React

koa-router 사용 Koa를 사용할 때에도 라우트 작업을 해줘야 하는데, Koa에는 라우터 기능이 내장되어 있지 않기에 koa-router 모듈을 설치해야 한다. npm i koa-router 1. 기본 사용법 index.js에서 라우터를 불러와 적용하는 방법이다. const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); // 라우터 설정 router.get('/', ctx => { ctx.body = '홈'; }); router.get('/about', ctx => { ctx.body = '소개'; }); // app 인스턴스에 라우터 적용 ap..

nodemon이란? 코드를 변경할 때마다 서버를 자동으로 재시작해주는 도구이다. 우선 설치부터 해보자면 npm i --dev nodemon 개발용 의존 모듈로 설치해주고 package.json 에 script를 다음과 같이 입력한다. { "name": "blog-backend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node src", "start:dev": "nodemon --watch src/ src/index.js" }, "keywords": [], "author": "", "license": ..

시작에 앞서 몇가지 정의에 대해 설명해 보자. 백앤드 데이터 등록과 조회의 방법과 구성에 관한 로직을 만드는 것 Node.js 자바스크립트 엔진 기반으로 웹 브라우저 뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임 Koa Node.js 환경에서 웹 서버를 구축할 때 사용하는 웹 프레임 워크중 하나이며, Express의 개발팀이 개발한 프레임워크이다. Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용해서 사용하므로 필요한 기능만 이용해 서버를 만들 수 있어 Express보다 가볍다. 또한, async/await 문법을 정식으로 지원하기에 비동기 작업을 쉽게 관리할 수 있다. 작업 환경 준비 1. Node 설치 확인 node --version 2. 프로젝트 생성 순서는 디렉..

현제 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 이번 프로젝..