2019-09-10 TIL
인증 시스템
서버에서 세션과 인증된 쿠키를 사용하여 구현합니다.
인증된 쿠키는 쿠키를 설정할 때, 쿠키 내용과 사전 설정한 비밀 키를 가지고 HMAC(해시 메시지 인증 코드)를 생성하여 함께 보관하는 것입니다. 이것으로 유저가 쿠키를 변조하지 않았음을 검증할 수 있습니다.
서버에 세션 적용
백엔드 서버에 세션을 사용하려면 koa-session 라이브러리를 설치해야 합니다
$ yarn add koa-session
.env
PORT=4000
MONGO_URI-mongodb://localhost/blog
ADMIN_PASS=react123
COOKIE_SIGN_KEY=COOKiE$1GNK3Ykoa-session의 기본 설정 값을 자세히 확인하고 싶다면 https://github.com/koajs/session 을 참고하세요.
React - Redux 개발 흐름
-
UI 준비하기(프레젠테이셔널 컴포넌트 만들기)
-
리덕스 상태 관리하기
-
컨테이너 컴포넌트 만들기
이 세 가지 작업을 반복!!
서버사이드 렌더링
검색 엔진 최적화
페이지가 잘 검색되려면 서버사이드 렌더링이 필요합니다.
유저 경험 개선
서버사이드 렝더링을 하면 유저가 처음 들어왔을 때 자바스크립트를 모두 불러오고, 서비스에서 호출하는 API를 완료할 때까지 기다릴 필요 없이 이를 서버에 미리 실행시켜서 유저에게 제공할 수 있습니다. 따라서 초기 로딩 속도가 조금 더 빨라집니다.
서버사이드 렌더링의 단점
무조건 좋은 것은 아닙니다. 클라이언트에서 처리해야 하는 작업을 서버가 하는 것이기에, 결국 서버의 자원이 소모됩니다. 따라서 서버가 저사양일 때는 서버사이트 렌더링 구현을 권장하지 않습니다.
그리고 서버에 유저 유입이 순간적으로 늘어나면 서버 성능에 무리가 갈 수 있으므로, 동일한 페이지는 특정 기간 동안 캐싱하여 성능을 최적화할 수 있습니다.
추가로 서버사이드 렌더링의 의미가 있을 때는 검색 봇이 접근할 때와 처음 들어오는 유저가 사용할 때이므로 개인화된 데이터들은 상황에 따라 서버사이드 렌더링을 하지 않는 것이 적합할 수도 있습니다.(예: 로그인 상태일 때는 서버사이드 렌더링하지 않음)
또 서버사이드 렌더링을 구현하는 것은 구조가 꽤 복잡합니다. 단순히 문자열로 렌더링하는 것은 쉽습니다. 하지만 라우터와 연동하고 리덕스도 사용하면서 API를 활용할 때, 미리 호출하고 코드 스플리팅도 제대로 동작시키려면 다양한 것을 준비해야 합니다. 혼자 진행하려면 매우 복잡한 작업입니다.
서버사이드 렌더링 준비
서버사이트 렌더링을 구현하려면 클라이언트에서 준비한 컴포넌트 코드를 Node.js에서 사용해야 합니다. 즉, JSX, ES6 문법을 사용해야 한다는 말인데 Node v8 기준으로 ES6 문법의 import/export는 작동하지 않으며, JSX는 당연히 사용할 수 없습니다.
결국 리액트 관련 코드를 불러오려면 바벨을 사용해야 합니다. 서버에서 바벨을 설정하여 일반 자바스크립트에서는 지원하지 않는 문법들을 사용해야 합니다. 방법은 여러가지 있습니다.
예를 들어 babel-node를 사용하여 babel preset과 plugin을 적용해서 바로 코드를 실행하는 방법이 있는데, 이 방법을 불필요한 메모리를 추가로 사용하므로 권장하지 않습니다.
또 런타임에서 코드를 변화하여 실행하는 것이 아니라, 미리 바벨로 변환하여 실행하는 방법도 있습니다. 이 방법은 성능상 문제는 딱히 없지만, 리액트 프로젝트에 필요한 node_modules들이 똑같이 필요하기 때문에 패키지를 동일하게 설치해야 하는 단점이 있습니다. 따라서 서버 파일을 리액트 프로젝트 내부에 작성하는 것이 아니라면 그렇게 좋은 방법이 아닙니다.
우리는 webpack을 사용합니다. webpack으로 바벨 로더를 적용하여 코드를 변환하고, 파일 하나로 만들 것입니다. 리액트 관련 코드를 서버에서 쉽게 불러와 사용할 수 있습니다.
