거니의 velog

* 지금까지 리액트의 기본 개념을 대부분 다루어 보았다. 웹 애플리케이션을 만들 때는 리액트 같은 프론트엔드 기술 만으로 필요한 기능을 구현할 수 없는 경우가 흔하다. 데이터를 여러 사람과 공유하려면 저장할 공간이 필요하기 때문이다.1. 소개하기(1) 백엔드* 우리는 서버를 만들어 데이터를 여러 사람과 공유한다. 그런데 서버에 데이터를 무작정 담지는 않는다. 데이터를 담을 때는 여러 가지 규칙이 필요하다. * 예를 들어 특정 데이터를 등록할 때 사용자 인증 정보가 필요할 수도 있고, 등록할 데이터를 어떻게 검증할지, 데이터의 종류가 다양하다면 어떻게 구분할지 등을 고려해야 한다. * 데이터를 조회할 때도 마찬가지이다. 어떤 종류의 데이터를 몇 개씩 보여 줄지, 그리고 또 어떻게 보여 줄지 등에 관한 로직..

5. 서버 사이드 렌더링과 코드 스플리팅 * 이제 서버 사이드 렌더링을 구현한 프로젝트에 코드 스플리팅을 도입해 볼 차례이다. 일단 리액트에서 공식적으로 제공하는 코드 스플리팅 기능인 React.lazy와 Suspense는 서버 사이드 렌더링을 아직 지원하지 않는다. 2019년 4월 기준에서는 리액트 공식 메뉴얼에서도 서버 사이드 렌더링과 코드 스플리팅을 함께 사용할 때는 Loadable Components를 사용할 것을 권장하고 있다. * Loadable Components에서는 서버 사이드 렌더링을 할 때 필요한 서버 유틸 함수와 웹팩 플러그인, babel 플러그인을 제공해 준다. 일단 yarn을 사용하여 Loadable Components를 설치해 보자. $ yarn add @loadable/com..

(6) redux-saga 코드 준비하기 * 이번에는 redux-saga를 사용하는 경우 서버 사이드 렌더링을 어떻게 해야 하는지 알아보자. * yarn으로 redux-saga를 설치하자. $ yarn add redux-saga * users 리덕스 모듈에서 redux-saga를 사용하여 특정 사용자의 정보를 가져오는 작업을 관리해 보자. [modules/users.js] import axios from "axios"; import { call, put, takeEvery } from "redux-saga/effects"; const GET_USERS_PENDING = "users/GET_USERS_PENDING"; const GET_USERS_SUCCESS = "users/GET_USERS_SUCCES..

4. 데이터 로딩 * 데이터 로딩은 서버 사이드 렌더링을 구현할 때 해결하기가 매우 까다로운 문제 중 하나이다. 데이터 로딩을 한다는 것은 API 요청을 의미한다. 예를 들어 페이지에서 필요로 하는 데이터가 있다면 API를 요청해서 응답을 받아 와야 한다. 일반적인 브라우저 환경에서는 API를 요청하고 응답을 받아 와서 리액트 state 혹은 리덕스 스토어에 넣으면 자동으로 리렌더링하니까 큰 걱정은 없다. 하지만 서버의 경우 문자열 형태로 렌더링하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링되지 않는다. 그 대신 우리가 renderToString 함수를 한 번 더 호출해 주어야 한다. 게다가 서버에서는 componentDidMount 같은 라이프사이클 API도 사용할 수..

(4) 서버 코드 작성하기 * 서버 사이드 렌더링을 처리할 서버를 작성해 보자. Express라는 Node.js 웹 프레임워크를 사용하여 웹 서버를 만들어본다. 이 과정은 꼭 Express가 아니어도 상관없으며, Koa, Hapi또는 connect 라이브러리를 사용하면 구현할 수 있다. 우리는 서버 사이드 렌더링을 할 때 Express를 사용한 이유는 해당 프레임워크가 사용률이 가장 높고, 추후 정적 파일들을 호스팅할 때도 쉽게 구현할 수 있기 때문이다. * 먼저 yarn을 사용하여 Express를 설치해 주자. $ yarn add express * react-router-dom 버전을 5로 다운그레이드 한다. $ yarn remove react-router-dom $ yarn add react-rout..

3. 서버 사이드 렌더링 구현하기 * 서버 사이드 렌더링을 구현하려면 웹팩 설정을 커스터마이징해 주어야 한다. CRA로 만든 프로젝트에서는 웹팩 관련 설정이 기본적으로 모두 숨겨져 있으니 yarn eject 명령어를 실행하여 밖으로 꺼내 주자. $ git add . $ git commit -m'Commit before eject' $ yarn eject (1) 서버 사이드 렌더링용 엔트리 만들기 * 엔트리(entry)는 웹팩에서 프로젝트를 불러올 때 가장 먼저 불러오는 파일이다. 예를 들어 현재 작성 중인 리액트 프로젝트에서는 index.js를 엔트리 파일로 사용한다. 이 파일부터 시작하여 내부에 필요한 다른 컴포넌트와 모듈을 불러오고 있다. * 서버 사이드 렌더링을 할 때는 서버를 위한 엔트리 파일을 ..

1. 서버 사이드 렌더링의 이해 * 서버 사이드 렌더링은 UI를 서버에서 렌더링하는 것을 의미한다. 앞에서 만든 리액트 프로젝트는 기본적으로 클라이언트 사이드 렌더링을 하고 있다. 클라이언트 사이드 렌더링은 UI 렌더링을 브라우저에서 모두 처리하는 것이다. 즉, 자바스크립트를 실행해야 우리가 만든 화면이 사용자에게 보인다. * 한번 CRA로 프로젝트를 생성하고 개발 서버를 실행해 보자. 그리고 크롬 개발자 도구의 Network 탭을 열고 새로고침을 해 보자. $ yarn create react-app ssr-recipe $ cd ssr-recipe $ yarn start * package.json을 다음의 코드를 참조하여 다시 빌드하자. { "name": "server-side-rendering", "v..

* 리액트 프로젝트를 완성하여 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업을 통해 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지, 공백 등을 제거하여 파일 크기를 최소화하기도 하고, 브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업도 할 수 있다. 만약 프로젝트 내에 이미지와 같은 정적 파일이 있다면 해당 파일을 위한 경로도 설정된다. * 이 작업은 웹팩(webpack)이라는 도구가 담당한다. 웹팩에서 별도의 설정을 하지 않으면 프로젝트에서 사용 중인 모든 자바스크립트 파일이 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합쳐진다. * CRA로 프로젝트를 빌드할 경우 최소 두 개 이상의 ..

(2) redux-saga * 이번에는 redux-saga를 통해 비동기 작업을 관리하는 방법을 알아보자. 이 미들웨어는 redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어이다. * redux-thunk는 함수 형태의 액션을 디스패치하여 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 원리이다. 그래서 구현한 thunk 함수 내부에서 원하는 API 요청도 하고, 다른 액션을 디스패치하거나 현재 상태를 조회하기도 했다. 대부분의 경우에는 이전 절에서 배운 redux-thunk로도 충분히 기능을 구현할 수 있다. * 이번에 배울 redux-saga는 좀 더 까다로운 상황에서 유용하다. 예를 들어 다음과 같은 상황에서는 redux-saga를 ..

3. 비동기 작업을 처리하는 미들웨어 사용 * 미들웨어가 어떤 방식으로 작동하는지 이해했는가? 이제 오픈 소스 커뮤니티에 공개된 미들웨어를 사용하여 리덕스를 사용하고 있는 프로젝트에서 비동기 작업을 더욱 효율적으로 관리해 보겠다. * 비동기 작업을 처리할 때 도움을 주는 미들웨어는 정말 다양하다. 이 책에서 다룰 미들웨어는 다음과 같다. - redux-thunk : 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어이다. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해 준다. - redux-saga : redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어 라이브러리이다. 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성하여 비동기 작업을 ..