Page 35 -

브라우저로 페이지를 열어서 Menu 컴포넌트에 있는 링크를 눌러 보세요. 빨간색, 파란색 컴포넌
트가 잘 나타나나요?

그림 20-4 페이지 컴포넌트 만들기

이제 서버 사이드 렌더링을 구현할 프로젝트가 준비되었습니다. 본격적으로 서버 사이드 렌더링
을 구현해 봅시다.

20.3 서버 사이드 렌더링 구현하기 R E A C T 20

서버 사이드 렌더링을 구현하려면 웹팩 설정을 커스터마이징해 주어야 합니다. CRA로 만든 프로 서버 사이드 렌더링

젝트에서는 웹팩 관련 설정이 기본적으로 모두 숨겨져 있으니 yarn eject 명령어를 실행하여 밖
으로 꺼내 주세요.

$ git add .
$ git commit -m'Commit before eject'
$ yarn eject

20.3.1 서버 사이드 렌더링용 엔트리 만들기

엔트리(entry)는 웹팩에서 프로젝트를 불러올 때 가장 먼저 불러오는 파일입니다. 예를 들어 현재
작성 중인 리액트 프로젝트에서는 index.js를 엔트리 파일로 사용합니다. 이 파일부터 시작하여
내부에 필요한 다른 컴포넌트와 모듈을 불러오고 있지요.

545

리액트를 다루는 기술_개정판(본문)최종출력용.indb 545 2019-08-20 오전 11:03:33