리액트로 만든 감정일기장이다
이 프로젝트 빌드 전 몇까지 배포준비를 해보자!
1. 타이틀 변경
우선 웹페이지 타이틀을 고쳐보자 index.html의 <title> 태그를 감정일기장으로 바꿔주자
↓
그리고 맨 위에있는
<html lang="en"> x
<html lang="ko"> olang 설정도 영어가 아닌 한국어로 바꿔쥬쟈
메인타이틀은 감정일기장이지만 그 페이지마다 페이지가 하는 행동으로 타이틀을 변경시켜 볼 것이다
페이지마다 useEffect의 mount때를 이용해 보자
useEffect(() => {
const titleElement = document.getElementsByTagName("title")[0];
titleElement.innerHTML = `감정일기장 - ${id}번 일기`;
}, []);title태그의 0번 요소가 우리가 원하는 태그이기 때문에 이렇게 가져와보자
각각의 페이지마다 적용을 해주고 안에 들어갈 문자도 적절하게 넣어주자
페이지마다 타이들이 변하게 된다!
2. 아이콘 변경
이 리액트로고의 아이콘을 프로젝트에 맞는 아이콘으로 변경해 줄 것이다
기존의 favicon.ico를 삭제하고 내가 원하는 아이콘으로 교체해 준다
일기장 아이콘으로 변경해 주었다!
3. 빌드 세팅
배포를 준비하기 위해서 몇 가지 빌드 세팅을 해보자 쉽게 필요한 파일, 코드들만 압축해 서버에 올리수 있는 상태를 만드는 것이다
터미널에서 npm run build 명령어를 입력하면
새로운 build라는 파일이 생성된다
npm install -g serve
serve -s build
다음 명령어를 차례대로 입력해 배포를 해보자
배포가 되었다! 로컬주소로 들어가 보면
어라 배포전 미처 해결하지 못한 에러가 생겼다 이럴 경우는 에러를 해결한 후
npm run build
serve -s build다시 명령어를 차례대로 입력해 주면 된다!
..💬
다음엔 로컬뿐이 아닌 어디서든 내가 만든 페이지를 볼 수 있게 배포를 해볼 것이다!
'개발🐕 > React' 카테고리의 다른 글
| [React] 리액트 Open Graph - 링크의 썸네일, 미리보기제목, 설명 (0) | 2023.01.16 |
|---|---|
| [React] 리액트 프로젝트 배포 - Firebase Hosting (0) | 2023.01.16 |
| [React] 리액트 페이지 라우팅 SPA와 CSR (2) | 2023.01.09 |
| [React Project: 간단한 일기장(完)] 컴포넌트 트리에 데이터 공급하기- Context (0) | 2023.01.07 |
| [React Project: 간단한 일기장(9)] 로직 분리하기 -useReducer (0) | 2023.01.06 |