한입 크기로 잘라 먹는 리액트 -일기장 프로젝트 pages- [인프런]

페이지 라우팅 0 - React SPA & CSR

 

 

 

==> 어떠한 요청에 따라 어떠한 파일을 보내줄지 정하는것.    웹서버들이 처리를 한다.

 

 

 

하지만 리액트는 멀티페이지 어플리케이션이 아닌 싱글페이지 어플리케이션(SPA)이다.

 

 

 

리액트로 제작된 웹사이틀르 요청하게 되면 어떤 요청이던 index.html 을 보내주고 React APP을 통쨰로 던져준다.

 

다른 페이지로 이동하고 싶어 클릭을 했을 시 서버에게 다른 페이지를 달라는게 아니라 react app이 페이지를 업데이트 시킨다.

그래서 서버와의 통신을 안해서 페이지 전환 시간이 엄청 빨라지게 된다.

데이터가 필요한 경우에는 서버에서 데이터만 빠르게 가져온다.  

 

 

이렇게 클라이언트 측에서 알아서 렌더링하는것을  CSR (Client SIde Rendering)이라고 한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

페이지 라우팅 1 - React Router 기본

npm i react-router-dom@6

리액트 라우터 라이브러리 설치

 

총 4개의 페이지를 만들것이며 모두 pages 폴더에서 코드를 작성할 것이다.

 

 

 

 

첫번째로 브라우저 url과  리액트 앱을 연결하는 react-router라는 컴포넌트로 app컴포넌트가 반환하는 곳을 감싸보자

 

 

이렇게 감싸져 있는 부분은 http://localhost:3000/ 이 url로 매핑 된다.

 

 

 

 

 

 

 

 

 

 

이제 url이 바뀌게 되면 어떤 컴포넌트가 페이지 역활을 하게

할것인지 결정하기 위해 routes, route태그를 사용

 

 

 

 

 

 

 

 

 

페이지를 이동하기 위해 a 태그(MPA)가 아닌   csa방식으로 페이지를 이동하는 컴포넌트 Link

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

페이지 라우팅 2 - React Router 응용

 

 

 

 

1. Path Variable

 

 

 

 

 

사용자 정의 훅인인 커스텀 훅을 사용해서 객체로 variable을 받을 수 있따.

 

 

 

 

 

2. Query String

 

 

QS버튼을 누르면 url이 

이렇게 바뀐다.

쿼리스트링을 바꿀 수 있는 setSearchParams함수도 받을 수 있다.

 

3. Page Moving

 

함수를 이동할 수 있는 훅을 반환해 준다.

 

 

 Home으로 가기 버튼을 늘로 home컴포넌트 페이지로 이동 할 수 있다.

전달해준 해당 인자의 url로 이동한다.

 

 

인자로 -1 을 줘서 뒤로 이전 페이지로 이동할 수 있다.

 

 

 

 

 

 

프로젝트 기초 공사 1

 

 

 

 

 

https://fonts.google.com/

 

에서 nanum pen 이 폰트를 사용할 것이다.

 

 

이런 식으로 import하는 법과 css 스타일링 방법을 알려준다.

 

 

 

 

 

 

 

 

 

어떤 위치에 있든  /public 을 가리키게 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

프로젝트 기초 공사 2

 

 

 

4개의 페이지가 각각 일기 데이터 state의 다른 부분을 필요로 한다.

 

 

일기 데이터를 관리할 state를 app컴포넌트에 작성해 보자

 

 

 

 

 

 

 

 

 

 

reducer로 상태를 관리하고 dispatch 함수들을 작성 후   컨텍스트를 넣어준다

 

 

 

 

 

 

 

 

 

 

페이지 구현 - 홈 (/)

 

날짜를 저장할 State

 

 

 

 

 

 

 

 

 

 

 

 

리스트 구성

 

 

 

ueseffect를 사용해서 curDate와 diaryList가 바뀌면 해당 년, 월 의 1일 부터 마지막일까지 사이의 일기 데이터를 가져온다.

 

 

다이어리 리스트만 우선 구현

 

 

필터 를 구현해 보자.

 

 

1. 최신순, 오래된순  관련 필터

2. 전부다 , good, bad관련 필터

3. 새 일기 쓰기 버튼 누르면 다른 페이지로 연결

 

 

 

다이어리 아이템 구현

1. 그림 2. 내용 3. 수정하기 버튼 구현

 

 

 

 

페이지 구현 - 일기 쓰기 (/new)

 

 

 

 

페이지 구현 - 일기 수정 (/edit)

 

 

 

 

 

페이지 구현 - 일기 상세 (/diary)

 

 

 

 

 

 

 

(서브 챕터) 흔히 발생하는 버그 수정 하기

개발자 도구로 들어가서 컴포넌틀르 확인하며 겹친 키를 확인.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

LocalStorage를 일기 데이터베이스로 사용하기

 

 

 

 

 

 

개발자 도구에서 확인 할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

프로젝트 최적화

 

최적화를 위해 낭비되는 연상을 찾는다.

그 방법으로는 크게 두가지가 있다.

1. 코드를 하나씩 보며 최적화를 체크 (정적)

2. 도구의 힘을 받기(동적) 

 

 

이렇게 이전에 설치한 확장 프로그램으로 하나씩 렌더하며 무슨 컴포넌트가 렌더되는지 확인한다.

 

 

 

==> React.Memo 사용

 

 

useState를 통해 받은 상태 변화 함수가 아니거나 useCallback으로 묶어놓은 함수가 아니면 컴포넌트 렌더링 될떄 다시 생성된다.

 

 

 

 

배포 준비 & 프로젝트 빌드하기

 

각 페이지별 헤더 바꾸기

 

 

 

 

 

 

npm run build

 

 

 npm i -g serve 후

 

serve -s build 로 배포 할 수 있다.

빌드 후 import가 잘못된 경우가 많아서 꼭 확인해보자

 

 

 

 

 

 

Firebase로 프로젝트 배포하기

firebase에 접속해서 프로젝트 만들기

 

npm install -g firebase-tools     파이어베이스 툴을 명령어로 이용하게 한다.

 

 

firebase login

firebase init

 

 

 

 

 

 

 

Open Graph 설정하기

 

썸네일 꾸미기

 

오픈 데이터는 meta데이터에 해당해서 index.js 파일만 수정하면 된다.

 

1. 썸네일

 

2. 사이트 이름이 뭘로 보일수 있는지

 

 

그리고 다시npm run build

firebase deploy