이번 강의에서 다룰 주제는 리액트 라우터입니다. 리액트 라우터를 사용하면서, 웹팩을 설정하는 방법을 배우면서 프로젝트 코드를 빌드 할 때 여러 파일로 저장하는 Code Splitting 에 대해서 알아보고, 또 SEO (검색엔진 최적화) 및 초기 렌더링 성능 등을 위한 서버사이드 렌더링을 하는 방법도 다뤄보겠습니다. 이 강의에서 사용하는 리액트 라우터 버전은 v4 입니다.
이 강의의 2장과 3장은 초심자에게 추천하지 않습니다. 리액트 라우터의 사용법을 찾고 계시다면 여기의 동영상 강좌가 더욱 적합합니다.
이 문서는 패스트캠퍼스에서 진행하는 오프라인 강의를 위해서 준비된 문서이기에, 일부 부연설명들이 생략되어있습니다.
이번 강의는 3개의 파트로 나뉘어져있습니다.
1. 리액트 라우터 사용해보기
SPA (싱글페이지 어플리케이션) 에 대해서 이해하고, 리액트 라우터 v4 를 사용하여 여러 종류의 라우팅을 하는 방법을 알아봅니다.
2. 코드 스플리팅 사용하기
웹팩 설정을 통하여 코드를 여러개의 파일로 분리시키는 방법을 배웁니다. 이를 통하여 특정 라우트에서 필요한 어플리케이션 데이터만 불러와서 사용 할 수 있습니다. 트래픽이 아껴지고, 로딩속도도 개선되겠죠?
3. 서버사이드 렌더링 해보기
서버사이드 렌더링의 필요성, 장점, 단점을 알아본 후, 서버 사이드렌더링을 위한 웹팩 설정을 해보고, Node.js 의 웹프레임워크 Koa 를 통하여 서버사이드 렌더링하는 방법을 다룹니다.
이 튜토리얼에서 사용되는 코드는 https://github.com/vlpt-playground/advanced-rr4-tutorial 에서 열람 할 수 있습니다.
각 섹션별로 태깅이 되어있으니 태그를 유용하게 활용하시길 바랍니다.