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

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

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

이 포스트는 조금 오래된 포스트입니다 (2018년 9월 기준 아직 작동은 합니다) 새로 작성된 포스트가 있으니 velog 에 올린 리액트 프로젝트 코드 스플리팅 정복하기 포스트를 읽어주세요. 이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 2장. 코드 스플리팅 (Code…

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 하였습니다. 어떻게 달라졌나 알아보고, 사용법도 알아봅시다. 제가 사용해본 결과, 기존의 사용법과 정말 많이 달라졌으며, 사용법이 정말…