3-9. 최적화 및 히로쿠에 디플로이하기

최적화

여러분이 리스트를 렌더링 했다면, 그리고 또 그 리스트가 많은 데이터를 보여주게 된다면, 최적화 작업을 진행해주셔야 프로젝트의 성능이 좋아집니다. 우선, 현재 Memo 컴포넌트에서 최적화 작업을 하지 않았기 때문에, 만약에 MemoList 에 데이터가 추가되거나, 그 중 하나의 메모의 내용이 수정이 된다면, MemoList 안에 있는 모든 Memo 컴포넌트에서 render 메소드가 실행되게됩니다. 그 중 DOM 업데이트가 실제로 일어나게 되는 부분은 실제로 업데이트가 된 곳만 해당되겠지만, 가상 DOM 에서 렌더링 하는 과정이, 메모의 수가 무수하게 많아진다면 성능상 병목이 될 것입니다.

이 부분은 매우 간단하게 해결 될 수 있습니다. 더군다나 우리가 Immutable.js 를 사용하기때문에 더더욱 쉽게 해결 할 수 있게 되지요.

그냥, Memo 컴포넌트에서 shouldComponentUpdate 메소드를 작성해주면 됩니다. 내용은, 현재 props 와 이전 props 를 비교해서 memo 값이 다를때에만 render 메소드를 실행하도록 설정하시면 됩니다.

src/components/MemoList/Memo.js - shouldComponentUpdate

    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.memo !== this.props.memo;
    }

간단하지요?

히로쿠에 디플로이 하기

현재는 서버가 프로젝트 바깥에 위치하고있지만, 이제 데이터 서버를 프로젝트 내부에 만들어주겠습니다.

먼저, json-server 를 현재 프로젝트에 설치해주세요.

$ yarn add json-server

그 다음엔, 프로젝트 최상위 디렉토리에서 server 디렉토리를 만들고, 그 안에 index.js 파일을 만들어서 다음과 같이 작성하세요.

server/index.js

const jsonServer = require('json-server');
const path = require('path');

const server = jsonServer.create();
const router = jsonServer.router(path.resolve(__dirname + '/db.json'));
const middlewares = jsonServer.defaults({
    static: path.resolve(__dirname + '/../build/')
});

const port = process.env.PORT || 3001;

server.use(middlewares);

server.use(jsonServer.bodyParser);

server.use(router);
server.listen(port, () => {
    console.log('JSON Server is running');
});

서버를 작성하셨다면, 같은 디렉토리에 db.json 파일도 만드세요.

server/db.json

{
  "memo": [

  ]
}

서버를 준비 완료하셨습니다. 이제 리액트 프로젝트를 빌드하고 서버를 실행해보겠습니다. 서버를 실행하기 전에, 기존에 실행하던 json-server 는 종료해주세요.

이제 리액트 앱을 빌드해볼건데요, 리액트 앱을 빌드하면, 번들링 과정에서 자바스크립트 파일 사이즈가 최소화되고, 또 리액트에서 불필요한 경고 메시지같은것들을 생략해주어 파일사이즈/성능이 더욱 개선됩니다.

그 전에, 빌드 명령어에도 NODE_PATH 를 설정하셔야 제대로 빌드가 됩니다.

package.json

    "build": "cross-env NODE_PATH=src react-scripts build",

$ yarn build
$ node server

명령어를 실행한다음에, http://localhost:3001/ 페이지를 브라우저에서 열어보세요. 우리가 만든 프로젝트가 잘 나타나나요? 그렇다면, 여러분의 프로젝트가 히로쿠에 올릴 준비가 거의 완료 된 것입니다! 잘 나타났다면 package.json 의 스크립트 부분을 다음과 같이 변경하세요.

package.json

  "scripts": {
    "start": "node server",
    "start:dev": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "cross-env NODE_PATH=src npm run build"
  },

히로쿠에 프로젝트를 올렸을때, npm start 명령어를 기본적으로 실행하기 때문에 start 스크립트에서 서버를 실행하도록 설정하였고 기존 개발서버는 스크립트 명을 start:dev 로 바꾸었습니다.

그리고, 빌드 작업이 히로쿠에 올라간다음에 이뤄져야하기 때문에 heroku-postbuild 라는 스크립트를 만들어서 빌드 명령어를 실행하도록 설정했습니다. 이렇게 하면, 히로쿠에 프로젝트가 올라갔을때 서버를 실행하기전에 리액트 앱을 빌드합니다.

Heroku CLI 설치

https://devcenter.heroku.com/articles/heroku-cli

에서 본인의 운영체제에 따른 CLI 를 설치하세요. 설치하셨다면, 터미널에서 heroku -v 를 입력해보세요.

그 다음엔, 히로쿠에 가입을 하고 터미널에서 heroku login 을 입력하세요.

로그인을 하신 후에, 현재 프로젝트 디렉토리에서 git 을 시작한후, 지금까지 한 내용들을 다 커밋하세요.

$ git init
$ git add .
$ git commit -am'initial commit'

그 다음엔 다음 명령어들을 통하여 프로젝트를 히로쿠에 올리시면 됩니다.

$ heroku create <프로젝트명> # 프로젝트명을 공백으로 하시면 이름이 자동으로 랜덤설정 됩니다.
$ heroku config:set NPM_CONFIG_PRODUCTION=false # devDependency 도 설치하게 설정합니다
$ git push heroku master

작업을 마치셨다면, http://<프로젝트명>.herokuapp.com/ 으로 들어가보세요. 프로젝트가 잘 뜨는지 확인해보시고, 만약에 오류가 발생했다면 package.json 에서 스크립트를 제대로 설정했는지, 또 heroku config:set NPM_CONFIG_PRODUCTION=false 를 입력했는지 재확인하고 다시 push 를 해보세요.

results matching ""

    No results matching ""