감정 일기장, 앱 배포단계

- new page는 사용자로부터 새로운 일기를 입력받아 추가하는 기능을 가진 페이지
- section은 div와 동일한 기능

- creativeDate에 저장된 데이트 객체를 input태그에 value 속성으로 넣으면input태그는 객체로 설정된 값을 이해하지 못해서 렌더링이 되지 않음
>>> Date객체를 문자열로 변환하여 넣는다

Date를 객체로 변환하여 저장한다

Diary

- 비교적 구현이 간단함(감정과 일기내용 렌더링)

- useEffect가 실행된 후 curDiaryItem에 저장되어 반환한 뒤 렌더링이 된다

-페이지가 유지되게 하고 싶다면 스테이트에 저장한 데이터를 외부 데이터 베이스에 저장하고,

외부에 저장했던 값을 불러와서 state값으로 넣어준다

- 웹 스토리지는 세션 스토리지와 로컬 스토리지로 나뉜다

- 두 스토리지는 문법적 차이는 거의 없으나 데이터의 보관과 유효 기관에 차이가 있다

- 웹 스토리지는 기본적으로 문자열 형태로 데이터를 보관한다

  // 데이터 저장
  localStorage.setItem("diary", JSON.stringify(nextState));

// 데이터 삭제
localStorage.removeItem(데이터의 키값);

배포 준비

타이틀 설정

- title 태그의 내용을 임의로 변경해주면 된다

- 위와 같이 설정하면 모든 페이지의 타이틀에 적용이 된다

- 페이지마다 타이틀을 다르게 하고 싶다면?
리액트 컴포넌트 내부에서 index.html의 타이틀 태그 안의 값을 페이지가 이동할 때마다 변경되도록 설정
>> 컴포넌트가 마운트 되었을 때 useEffect를 사용하여 callback함수를 호출

- 변수명에 있는 $는 DOM에 저장된다는 뜻이다

- 아이콘 이미지를 public폴더에 삽입

- link 태그 안에서 favicon을 설정할 수 있다

앱 배포 시 클라우드 서비스를 사용하는 방법이 편함
>> Vercel 사용

- Vercel은 깃 레포와 연동하여 쉽게 사용할 수 있다

vercel 계정 생성 - 배포 프로젝트의 터미널에서 vercel login 명령어 입력 - 로그인 후 배포 확인

프로그래밍