시작에 앞서 몇가지 정의에 대해 설명해 보자. 백앤드 데이터 등록과 조회의 방법과 구성에 관한 로직을 만드는 것 Node.js 자바스크립트 엔진 기반으로 웹 브라우저 뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임 Koa Node.js 환경에서 웹 서버를 구축할 때 사용하는 웹 프레임 워크중 하나이며, Express의 개발팀이 개발한 프레임워크이다. Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용해서 사용하므로 필요한 기능만 이용해 서버를 만들 수 있어 Express보다 가볍다. 또한, async/await 문법을 정식으로 지원하기에 비동기 작업을 쉽게 관리할 수 있다. 작업 환경 준비 1. Node 설치 확인 node --version 2. 프로젝트 생성 순서는 디렉..
React
현제 SSR의 문제점? API를 사용하면 HTML 로 렌더링할 때 서버의 컴포넌트에 대해 모든 데이터가 준비 되어있어야 한다. 이 말은, HTML을 클라이언트에게 보내기 전에 서버의 모든 데이터를 수집해야 한다는 것이다. 그렇다면, 게시물을 렌더링한다고 했을 때 게시물의 데이터가 큰 경우 서버에서 생성하는 HTML의 생성이 게시물의 데이터를 받아와 렌더링하여 클라이언트에 전송하기까지 지연될 수 있다. 이로 인하여 게시물 외 페이지의 다른 영역의 렌더링 또한 지연되게 된다. 또한, Javascript 코드가 로드된 후 HTML을 hydration하고 상호작용할 수 있도록 React에 전달하는데, React는 컴포넌트를 렌더링하는 동안 서버에서 생성한 HTML에 이벤트 핸들러를 첨부한다. 이때 React에서..
리액트에서 공식적으로 제공하는 코드 스플리팅 기능인 React.lazy와 Suspense는 SSR을 지원하지 않는다. React 18 부터는 지원한다고 한다. 이번 정리가 끝나면 바로 알아보고 정리해보자. 지금은 Loadable Components를 사용해서 코드 스플리팅을 해보자. Loadable Components는 SSR을 할 때 필요한 서버 유틸 함수와 웹팩 플러그인, babel 플러그인을 제공한다. npm add @loadable/components @loadable/server @loadable/webpack-plugin @loadable/babel-plugin 1) 라우트 컴포넌트 스플리팅하기 우선 BluePage, RedPage, UserPage를 스플리팅 해주자 App.js import ..
데이터 로딩은 서버 사이드 렌더링을 구현할 때 까다로운 문제 중 하나이다. 이때 데이터 로딩은 API 요청을 의미한다. 서버의 경우 문자열 형태로 렌더링하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링 되지 않는다. 그 대신 renderToString 함수를 한 번 더 호출해야 한다. 거기다 서버에서는 componentDidMount 같은 라이프 사이클 API도 사용 불가능 하다. SSR의 데이터 로딩을 해결할 수 있는 방법은 많지만, 이번에는 redux-thunk와 redux-saga를 사용해 보자. 1) redux-thunk 코드 준비 여기에서 thunk와 saga, axios를 설치해 주자 npm add redux-thunk redux-saga axios 이번 프로젝..
SSR (Server Side Rendering)이란? 말 그대로 이다. 사용자에게 제공할 UI를 서버에서 미리 렌더링 하는 것 이다. 반대로, CSR (Client Side Rendering)은 브라우저에서 UI를 렌더링 하는 것 이다. 각 방식의 장단점 Server Side Rendering Client Side Rendering 장점 1. 검색 엔진이 웹 애플리케이션의 페이지를 원할하게 수집할 수 있다. 2. 초기 헨더링 성능을 개선할 수 있다. 1. SSR에 비해 속도가 빠르다. 2. 서버의 부하가 낮다. 단점 1. 브라우저 대신 서버가 처리하므로 서버 리소스가 사용된다. 2. 프로젝트 구조가 복잡해지고, 개발이 어려워질 수도 있다. 1. 검색 엔진이 페이지의 정보를 수집하기 어렵다. 2. 모든 ..
코드 스필리팅? 정의 : 싱글 페이지 에플리케이션(SPA)와 같이 용량이 커지면 페이지 로딩 속도가 느려지는 환경에서 특정 상황에서 특정 코드를 불러오기 위해 미리 코드를 분리하는 작업 코드 스플리팅으로 얻는 이점은 다음과 같다. 불필요한 주석, 경고 메시지, 공백등을 제거하여 파일을 최소화 브라우저에서 JSX 문법이나 다른 최신 JS 문법이 원활히 실행되도록 트랜스 파일 작업을 함 이미지와 같은 정적 파일이 있다면 해당 파일을 위한 경로 설정 →위의 이점을 얻는 작업은 webpack이 해준다. 웹팩에 별도 설정을 하지 않으면 프로젝트에서 사용중인 모든 JS와 CSS파일이 하나의 파일로 합쳐진다. 또한, 파일을 빌드하면 파일명에 해시(hash) 값이 포함되어있다. 이 값은 빌드 과정에서 해당 파일의 내용..
