7-12. 배포 준비하기 (DEPLOY1)

먼저 우리의 프로젝트의 이름을 React App으로 나갈 수 없으니 title을 변경해보자.

우선 개발자 도구의 Elememts 탭에서 보면 아래와 같이 head 티그 안에서 title이 React App이라고 되어있는 것을 확인할 수 있다.

이는 public 폴더 안의, index.html에서 찾아볼 수 있다.

 

그럼 우리는 여기서 한번 직접 편집해보자.

그럼 다음과 같이 title이 변경된 것을 확인할 수 있다.

 

그리고 이 project의 description도 수정해주자.

그리고 language도 en이 아닌 ko로 수정하여 한국어로 변경시켜주자.

 

 

 

그런데 모든 페이지에서 title이 모두 감정일기장으로 고정되어있는 것을 볼 수 있는데,

이번에는 페이지별로 title을 다르게 한번 주어보자!

이는 index.html의 모든 head의 title이 변경되는 것이아니고, div id="root"인 부분이 변경되는 것이라 인지하면 된다.

자 우선 Diary 컴포넌트에서 useEffect를 통해 titleElement를 가져와보자.

그럼 Edit 페이지에도 아래와 같이 적용해보자.

그리고 new페이지도 아래와 같이 title을 변경해보자.

그럼 페이지별로 title이 변하게 된다.

 

 

 

 

 

 

자 다음으로는 tilte옆의 아이콘을 바꿔보자.

우선 아이콘은 다음을 변경하면 된다.

그럼아래와 같이 변경되는 것을 확인할 수 있다.

 

 

 

그리고 지금 소스코드들을 보면, 공백도 띄어쓰기도 많은데 이것도 다 용량이다.

그래서 배포 전에는 다 줄여서 배포를 해야한다! 필요한 부분만도 추출해서 그 부분만 올려야한다!

그래서 우리는 이 작업을 빌드라고 한다.

 

package.json 코드에 build 파트를 보면 이 명령어로 배포할 수 있는 압축파일을 얻을 수 있다.

자그럼 빌드를 한번 해보자!

build는 프로젝트 크기에 따라 빌드시간이 달라지고, 지금은 우리 프로젝트가 작기 때문에 빠른 시간내에 제작이 된다.

그럼 build가 완료되고 build 폴더가 준비되었다라고 출력된다.

그럼 프로젝트에 다음과 같이 build 폴도가 생긴 것을 확인할 수 있는데

index.html이나 다른 폴더들을 확인하면 줄바꿈 하나 없이 파일이 생성된 것을 확인할 수 있다.

그리고 build log를 확인하면 다음 명령어로 배포를 할 수 있는 것을 볼 수 있다.

자 그럼 위의 명령어로 배포를 한번 해보겠다.

근데 코드상에서 현재 내용을 바꿔도 localhost에서는 적용되지 않는다. 왜냐하면 빌드한 작업에 대해서 띄우는 것이기 때문에! 적용시키려면 build하고 다시 띄워야한다!

 

 

자 그러면 기존에 있던 일기들은 삭제하면 Local Storage에 있는 Key값의 Vaule는 빈 배열로 전달되고 있는 것을 확인할 수 있다.

이렇게 하고 localhost를 새로고침하면 빈화면만 나오게 되는데 App.js에 다음과 같이 조건값을 걸어주면 정상적으로 출력됨을 찾을 수 있다.

 

 

 

마지막으로

새 글을 작성하고 home 페이지로 돌아왔는데 상단 title이 아직도 '감정일기장 - 새 일기'임을 찾을 수 있다.

삭제를 하고도 동일하게 이전의 title이 그대로 인것을 확인할 수 있다.

Diary, Edit, New 컴포넌트에서는 UseEffect로 title 엘리먼트를 바꿔주고 있다.

그런데 Home 컴포넌트에서는 하고있지 않음을 알 수 있다.

그래서 아래와 같이 Home 컴포넌트에도 useEffect를 이용하여 title을 변경하도록 하면 된다.

그래서 다시 아래의 명령어로 빌드를해보자!

npm run build

serve -s build

그러면 정상적으로 title명이 변경되는 것을 확인할 수 있다.

 

 

그래서 오늘 배포하기 전 테스트 하는 방법과

에러를 고치는 과정을 배워보았다.

 

다음시간에는 도메인을 가지고 호스팅하는 방법을 배워보도록 하자.