프로젝트 빌드 & 배포준비

조뮁·2023년 1월 29일

React

목록 보기

32/34

프로젝트 타이틀 및 설명 수정

index.html

// 설명 변경
<meta
  name="description"
  content="나만의 감정일기장"
/>
    ...
// 타이틀 변경
<title>감정 일기장</title>

페이지마다 title 변경하기

1. 상세페이지

// Diary.js
const Diary = () => {

  // 페이지마다 title 변경하기
  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `감정 일기장 - ${id}번 일기`;
  }, []);

2. 수정 페이지

// Edit.js
const Edit = () => {
  // 페이지마다 title 변경하기
  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `감정 일기장 - ${id}번 일기 수정`;
  }, []);

3. 일기 작성 페이지

// New.js

// useEffect import
import { useEffect } from "react";
import DiaryEditor from "../components/DiaryEditor";

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

export default New;

파비콘 변경

public > favicon.ico 파일을 변경하면 페이지 아이콘을 변경할 수 있음

프로젝트 배포

프로젝트 용량 최적화 = build

프로젝트 내 띄어쓰기, 줄바꿈 등 용량을 차지하는 요소가 많기 때문에 이 요소들을 모두 압축해줘야함.
필요한 파일과 코드만 압축해서 서버에 올려야함.
"build" : "react-scripts-build" 명령어 실행
npm run build 축약 명령어로 입력 가능
build완료 후 프로젝트 상단에 build 폴더 생성

build 파일 배포

serve 패키지 install
npm install -g serve
로컬에서 배포
serve -s build
Local: http://localhost:3000
내 로컬에서 접속 가능한 주소
Network: http://192.168.194.8:3000
나와 같은 공유기를 사용 시, 접속할 수 있는 주소

오류 수정 1

일기를 모두 삭제 시 해당 오류 발생
일기가 없을 시, diaryList[0].id 데이터가 없기 때문에 오류 발생

// App.js
function App() {
  useEffect(() => {
    const localData = localStorage.getItem("diary");
    if (localData) {
      // dataId의 current값은 diary data에서 가져온 가장 높은 id의 +1을 해줘야 함 -> diaryList를 sort하여 가장 높은 값 가져오기
      // id기준으로 내림차순으로 정렬함수 생성
      const diaryList = JSON.parse(localData).sort(
        (a, b) => parseInt(b.id) - parseInt(a.id)
      );
      dataId.current = parseInt(diaryList[0].id) + 1;

    }
  }, []);

오류 수정 2

일기 작성 후 홈으로 돌아왔는데, 타이틀이 변경되지 않는 오류 있음
Home.js에 타이틀 변경 로직 추가

const Home = () => {
  const diaryList = useContext(DiaryStateContext);

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