Dnote 7. React - 404페이지 완성 및 빌드된 리액트 띄우기

killi8n·2018년 9월 23일
0

Dnote

목록 보기
15/15
post-thumbnail

음 이제 마지막이네요!

그러나 로그인 후 에러가 나타나는 현상을 방지하기 위해,

NoteContainer를 다음과 같이 바꿔주도록 하겠습니다!

containers/NoteContainer.js

404페이지를 완성하고 장고서버로 빌드된 리액트를 띄워볼까요?

다음과 같이 NotFound 컴포넌트를 생성해주세요.

components/common/NotFound/NotFound.js

components/common/NotFound/NotFound.scss

components/common/NotFound/index.js

컨테이너도 하나 만들어 줍니다.

containers/NotFoundContainer.js

페이지에 반영해줍니다.

pages/NotFound.js

이렇게 하면 나름 깔끔한 NotFound페이지가 보여지게 됩니다.

이제 뒤로가기 기능을 추가해보겠습니다.

containers/NoteContainer.js

components/common/NotFound/NotFound.js

이제 뒤로가기도 잘됩니다!

자 이제는 빌드한것을 띄우는 노드 서버를 하나 개설해 보겠습니다.
그 전에 yarn build로 미리 빌드 해주세요.

우리의 백엔드와 프론트엔드가 있는 같은 위치에 build-server라는 폴더를 만들어 주세요. 그리고 그 폴더로 들어가서

를 해주십시오.

그다음에 다음 명령어로 필요한 node 패키지들을 다운받아줍니다.

저희는 express보다 조금더 가벼운 노드 서버 라이브러리인 koa를 사용하겠습니다.

그리고 src 폴더를 하나 만들고 그 밑에 index.js 를 만들어주세요.

src/index.js

다음과 같이 작성해줍니다.

저희의 빌드 된 파일은 frontend/build 에 들어가 있으므로, 그 파일을 serve해주는 것입니다.

그런데, 저희는 백엔드 포트를 8000번을 사용하므로, proxy를 설정해주어야 합니다.

그 후에 fallback을 사용하여 빌드된 리액트의 라우팅을 모두 싱크시켜줍니다.

자 이렇게 하고 localhost:4000 에 접속하면 잘뜨게 됩니다!

profile
killi8n

0개의 댓글