react-router :: 3장. 서버사이드 렌더링

이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 3장. 서버사이드 렌더링 이번 장에서는 리액트 어플리케이션을 서버사이드 렌더링 하는 방법을 알아보겠습니다. 여러분이 리액트를 통해 어플리케이션을 개발하게 될 때, 서버사이드 렌더링을 구현 할 수도, 하지 않을 수도 있습니다. 필수작업은…

react-router :: 2장. 코드 스플리팅 (Code Splitting)

이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 2장. 코드 스플리팅 (Code Splitting) 싱글페이지 어플리케이션의 단점은 자바스크립트 번들 파일에 어플리케이션에 대한 모든 로직을 불러와서, 규모가 커지면 용량이 커지기 때문에, 로딩속도가 지연 될 수 있습니다. 웹 어플리케이션을 하지만…

react-router :: 1장. 리액트 라우터 사용해보기

이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며,…

리액트 라우터, 코드 스플리팅, 그리고 서버사이드 렌더링 :: 목차

이번 강의에서 다룰 주제는 리액트 라우터입니다. 리액트 라우터를 사용하면서, 웹팩을 설정하는 방법을 배우면서 프로젝트 코드를 빌드 할 때 여러 파일로 저장하는 Code Splitting 에 대해서 알아보고, 또 SEO (검색엔진 최적화) 및 초기 렌더링 성능 등을 위한 서버사이드 렌더링을 하는 방법도…

[Video] 리액트 라우터 (react-router v4) 강의 [1/3] : 사용 방법

작년 Pre-release alpha시절에 한번 자료를 만든적이 있지만 올해초에 정식 릴리즈되면서 바뀌어도 너무 많이바뀌어버려서 이렇게 자료를 새로 만들었습니다. 흔히 사용되는 기능들을 대부분 다뤄보려다보니 생각보다 강의가 길어져서 동영상 하단에 타임라인을 추가했으니 참고하세요~ 타임라인 00:00 – 05:25 소개 및 프로젝트 셋업 05:25 –…

[React.JS] 강좌: 리액트 프로젝트에서의 라우터, React-router v3 사용하기

아직 React-Router v3 는 유지보수가 이뤄지고 있는 상태이며, 현재 2017년 3월 기준 가장 최신 버전은 v4 입니다 (한동안 베타였는데 정식 릴리즈되었습니다. 관련 동영상이 만들어졌으니 여기를 참조해주세요) 리액트 프로젝트에서 여러 페이지가 있을 땐, 라우터를 사용합니다. 라우터는 사용자가 요청한 URL에 따라서 다른…

[React.js] React-Router v4 Pre-Release 사용해보기

리액트 라우터 v4 공식 릴리즈되어 새 자료를 만들었습니다. 이 포스트에 있는 자료는 deprecated 되었으니 새 포스트를 참고해주세요. 최근, React Router 가 v4 버전을 pre-release 하였습니다. 어떻게 달라졌나 알아보고, 사용법도 알아봅시다. 제가 사용해본 결과, 기존의 사용법과 정말 많이 달라졌으며, 사용법이 정말…