[20191211 TIL] 프로젝트 마무리

2019-12-11 TIL

블로그 프로젝트 마무리

1. 클라이언트 프로젝트(blog-frontend) 디렉터리에서 빌드

$ yarn build

2. koa-static으로 정적 파일 제공하기

서버를 통해 blog-frontend/build 디렉터리 안의 파일을 사용할 수 있도록 koa-static을 사용하여 정적 파일 제공 기능을 구현하자.

2.1 서버 프로젝트 디렉터리에서 koa-static 설치

$ yarn add koa-static

2.2 src/main.js 수정

(...)
import serve from 'koa-static';
import path from 'path';
import send from 'koa-send';

(...)

app.use(router.routes()).use(router.allowedMethods());

const buildDirectory = path.resolve(__dirname, '../../blog-frontend/build');
app.use(serve(buildDirectory));
app.use(async ctx => {
  if(ctx.status === 404 && ctx.path.indexOf('/api') !== 0) {
    await send(ctx, 'index.html', { root: buildDirectory });
  }
});

(...)

2.3 백엔드 서버 주소로 접속

http://localhost:4000/

클라이언트 프로젝트가 서버 주소에서도 보이게 됩니다. 짠!

3. 더 할 수 있는 작업

3.1 코드 스플리팅

현재 프로젝트에서 가장 큰 자바스크립트 파일의 크기는 약 138KB 현재는 프로젝트 규모가 그렇게 크지 않으므로 코드 스플리팅이 반드시 필요하지는 않습니다. 하지만 프로젝트에 기능이 더 많이 추가되어 500KB를 넘어가기 시작하면 코드 스플리팅을 생각해 보는 것도 좋습니다.

코드 스플리팅은 프로젝트 규모가 커졌을 때 도입하는 것이 바람직하기는 하지만, 프로젝트를 장기적으로 유지 보수할 것 같다면 초반부터 도입하는 것을 추천합니다. 왜냐하면, 개발을 계속하면서 결국 프로젝트의 규모가 커질 확률이 높기 때문입니다.

3.2 서버 호스팅

로컬 환경에서만 사용하는 것이 아니라 다른 사람도 사용하게 하려면, MongoDB 서버와 Node.js로 만든 API 서버가 구동될 수 있는 서버를 호스팅받아야 합니다. 다음은 많이 사용하는 대표적인 서비스들입니다.

AWS EC2: https://aws.amazon.com/ko/ec2
Google Cloud Compute Engine: https://cloud.google.com/compute/pricing
NCloud Compute: https://www.ncloud.com/product/compute
Vultr: https://www.vultr.com/pricing

3.3 서버 사이드 렌더링

서버 사이드 렌더링을 고려해본다면,

우선 서버 엔트리 코드에서 axios 클라이언트 client 인스턴스에 baseURL을 설정해 주어야 한다.

import client from './lib/api/client';
client.defaults.baseURL = 'http://localhost:4000';

그리고 서버 사이드 렌더링을 적용하고, 서버 컴퓨터에서 두 종류의 서버를 구동해야 한다.

하나는 API 서버, 다른 하나는 서버 사이드 렌더링 전용 서버 !!

그리고 nginx를 사용하여 사용자가 요청한 경로에 따라 다른 서버에서 처리하게끔 하면 됩니다.

또한, nginx를 사용하는 경우에는 정적 파일 제공을 Node.js 서버가 아닌 nginx 자체적으로 처리하는 것이 성능상 더 빠릅니다.

nginx 설정 예시

server {
  listen 8080;
  server_name localhost;

  location /api/ {
    proxy_pass http://localhost:4000;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  location /static {
    alias /Users/kingso/blog/blog-frontend/build/static;
  }

  location / {
    proxy_pass http://localhost:5000;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

위 구성을 참조하면 도움이 될 것입니다.

정리

리액트 프로젝트 개발 흐름

1. 기능 설계하기

어떤 컴포넌트가 필요할지 생각합니다.

2. UI 만들기

사용자에게 보이는 UI를 먼저 만듭니다.

3. API 연동하기

API 연동이 필요한 경우 필요한 코드를 준비합니다.

4. 상태 관리하기

리덕스, 컴포넌트 자체 상태 등을 통해 상태를 관리하고, 필요하면 컨테이너 컴포넌트를 만듭니다.

이러한 흐름으로 개발을 진행하는 과정에서 반복되는 코드가 있을 경우, 함수로 분리하거나 재사용할 수 있는 컴포넌트로 분리하면 좋다.

그리고 성능상 문제가 되는 부분이 있다면 shouldComponentUpdate 또는 React.memo를 사용하여 최적화를 시도해 볼 수도 있습니다.

Published 11 Dec 2019

# React

Kingso Kingso
각자의 방식대로