반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

짧은코딩

배포 준비 본문

인프런, 유데미/한입 크기로 잘라 먹는 리액트

배포 준비

5_hyun 2022. 6. 27. 23:41
반응형

상단 제목 바꾸기

public/index.html에 가서 <title>부분을 수정한다.

    <title>감성 일기장</title>

description

description은 사이트의 성격을 요약해서 나타낼 수 있다.

    <meta name="description" content="나만의 감정 일기장" />

언어 변경

<html lang="ko">

이렇게 ko로 해야 번역하기가 안뜬다.

페이지마다 제목 바꿔주기

-Diary.js

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

 

-Edit.js

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

 

-New.js

  // 페이지마다 제목 다르게 하기
  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `감성 일기장 - 새 일기`;
  }, []);

사이트 아이콘 변경하기

public/favicon.ico가 웹 브라우저의 아이콘이 된다. 삭제하고 변경해주면 된다.

빌드

위 과정을 다 수행하면 배포 할 준비가 완료되었다. 하지만 공백 하나하나가 용량이라서 압축해야하는데 이를 빌드라고 부른다. 빌드는 필요한 파일과 소스 코드만 압축해서 서버에 올려서 배포한다. package.json에 보면 build가 있다.

 

npm run build

이 명령어를 입력하면 빌드가 완료된다.

 

그리고 보면 build 파일이 생성되어 있다. 안에 파일을 열어보면 띄어쓰기 없이 압축되어 있다.

 

npm install -g serve

이 명령어를 입력하면 serve라는 빌드된 파일을 배포해 줄 수 있는 패키지를 설치했다.

 

serve -s build

이 명령어로 배포할 수 있다.

 

이렇게 나오고 Local은 내 컴퓨터 상 주소고, on Your Network는 같은 공유기를 사용하는 사람들이 접속할 수 있는 주소이다.

 

에러 수정

하지만 에러가 발생할 수 있다. 그러면 다시 가서 수정해주면된다.

-App.js

useEffect(() => {
    const localData = localStorage.getItem("diary");
    if (localData) {
      // 로컬 스토리지에서 불러오고 내림차순으로 정렬
      const diaryList = JSON.parse(localData).sort(
        (a, b) => parseInt(b.id) - parseInt(a.id)
      );
      
      if (diaryList.length >= 1) {
        // 다음에 만들어질 일기의 id는 저장되어 있는 개수보다 커야된다.
        dataId.current = parseInt(diaryList[0].id) + 1;
        // 초기값으로 설정하는 액션
        dispatch({ type: "INIT", data: diaryList });
      }
    }
  }, []);

일기가 아무것도 없으면 에러가 발생해서 diaryList의 길이가 1개 이상일 때만 초기값 액션을 하도록 해줬다.

 

또 다른 오류는 페이지마다 제목이 각각 다르게 나와야하는데 그렇지않다. 왜냐하면 Home.js에는

  // 페이지마다 제목 다르게 하기
  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `감성 일기장`;
  }, []);

이렇게 하지 않았기 때문이다.

 

수정하고 나서는 다시 빌드해주면 된다.

=> 만약 이런 테스트를 거치지 않으면 실제 배포할 때 잘못할 수 있기 때문이다.

반응형
저작자표시

'인프런, 유데미 > 한입 크기로 잘라 먹는 리액트' 카테고리의 다른 글

프로젝트 분석  (0) 2022.06.29
Firebase로 프로젝트 배포하기  (1) 2022.06.28
최적화 하기  (0) 2022.06.27
LocalStorage를 일기 DB로 사용하기  (0) 2022.06.24
흔한 버그 수정하기  (0) 2022.06.24
'인프런, 유데미/한입 크기로 잘라 먹는 리액트' Related Articles more
Comments