[클라우딩 어플리케이션 엔지니어링 TIL] 240221 - 프로젝트 배포 준비 & 프로젝트 빌드하기, 감정 일기장 프로젝트 복습

Intro

---

완성된 프로젝트를 빌드하기 전에 브라우저 탭의 아이콘과 타이틀을 변경하는 방법을 배웠다.

생각지도 못한 부분이었는데 가장 중요한 부분이었다.

 

 

 

 

오늘 학습한 내용

---

페이지 제목 설정하기

페이지 컴포넌트가 마운트 할 때마다 useEffect로 title 태그의 값을 바꿔준다.

useEffect(() => {
  const titleElement = document.getElementsByTagName('title')[0];
  titleElement.innerHTML = `감정 일기장 - ${id}번 일기`;
}, []);

 

 

Favicon 설정하기

Favicon은 브라우저 탭의 제목 왼쪽 아이콘이다.

public 폴더 내의 favicon.ico를 원하는 아이콘으로 변경하면 된다.

 

 

프로젝트 빌드&배포

$ npm run build
$ npm install -g serve
$ serve -s build

 

성공적으로 빌드가 되면 build 폴더가 생성된다.

 

 

 

 

 

마무리

---

여태까지 강의 들으며 실습했던 내용을 혼자 처음부터 개발해보며 공부하고 있는데 백지가 된 기분이다.

역시 강의를 본다고 아는 게 아니었다. 꼭 직접 해보는 습관을 들여야겠다.

어렵지만 혼자서 끙차끙차 만들어내야지..!!