맨땅에서 블로그 만들기 #2 프론트 틀잡기 1

Jake Seo·2020년 4월 14일

블로그만들기

목록 보기

2/5

맨땅에서 블로그 만들기 #2 프론트 틀잡기 1

Prologue

맨땅에서 무언가 만들어보자! 블로그 만들기는 예전부터 계속 하던 프로젝트인데 벌써 2번의 블로그를 만들었다가 맘에 안들어서 갈아 엎은 경험이 있다! 이번에는 예전보다 '낫게' 블로그를 만들어보자.

프론트 스택 다시 살펴보기

이전 포스팅에도 적었듯 프론트는 '그나마' 리액트가 가장 자신있어서 리액트를 선택하는 것이 합리적인 것 같다. 그리고 서버사이드 랜더링과 코드 스플리팅 등을 위해 next.js를 이용할 것이다. 그리고 스타일 도구로는 styled-components를 그나마 많이 사용해봤으니 이걸 사용하고, 디자인 도구로는 antd를 사용해보자.

react
- 자바스크립트 UI 라이브러리
typescript
- 안정적 시스템을 만들기 위해 사용 (저는 prop-types를 싫어합니다.)
next.js
- 블로그에 필수적인 SSR 등을 구현하기 위해 사용
express
- 프론트 서버를 한번 덧씌우는 역할을 위해 사용
react-helmet
- meta 태그 등을 용이하게 입력하기 위해 사용
styled-component
- 컴포넌트의 스타일링을 위해 사용
antd
- antd 컴포넌트를 사용하기 위해 사용
swr
- 리액트 데이터 패칭 훅을 사용하기 위해 사용
redux
- SPA의 상태관리를 하기 위해 사용
redux-saga
- 리덕스의 비동기 동작을 위해 사용

next, react 세팅하기

먼저 빈 폴더를 생성하고, next.js, react가 포함된 프로젝트 초기 셋팅을 해볼 것이다. 현재 나의 초기 셋팅은 아래와 같다.

위는 디렉토리를 만들고, 아무것도 넣지 않은 모습이다. 먼저 npm init -y를 이용해 프로젝트를 초기화해주자. 명령어를 입력하는 창이 없는 경우 메뉴에서 View - Terminal을 클릭하여 새로운 터미널을 켜준다.

명령어를 입력하면 위와 같이 package.json 파일이 생성된다. 이 상태에서 npm install react react-dom next 명령어를 입력해서 next, react에 필요한 패키지를 설치할 것이다.

명령어를 입력하면 위와 같이 설치가 된다.

그리고 다음으로는 package.json파일 내부의 scripts의 내용을 바꿔야 한다.

scripts는 npm run ... 등의 명령어를 쳤을 때, 실제로 어떤 것들이 실행될지에 대해 설정하는 것이다. 이를테면 "dev": "next"는 npm run dev를 쳤을 때, next라는 명령어를 실행하게 만드는 것이라고 생각하면 된다.

기존에 아래와 같던 내용을

아래처럼 바꿔준다.

다음으로는 next에서 사용될 페이지를 테스트용으로 하나 만들어보자. src\pages\index.js 파일을 하나 만들면 다음과 같은 상태가 된다.

참고로 next.js의 디렉토리 구조를 간단히 설명하면 아래와 같다.

.
├── .next             
├── components        
│   └── Components.js
├── next.config.js    
├── node_modules
├── package.json
├── pages             
│   ├── _document.js  
│   ├── _error.js     
│   └── index.js     
└── static

디렉토리 구조에 대한 자세한 내용 : https://blog.kesuskim.com/2017/07/develop-website-using-next-js/

index.js의 내용은 아래와 같이 작성해보자.

위 내용은 리액트의 함수형 컴포넌트에 해당하는 내용이다. <div> 태그를 리턴한다. 위 내용을 잘 모르겠다면, jsx를 검색하여 공부하면 된다.

이후에 터미널에 npm run dev 명령어를 입력하면 아래와 같은 글자가 뜨며 실행이 될 것이다.

브라우저에서 http://localhost:3000 에 접속했을 때, 아래와 같은 페이지가 뜨면 성공이다.

여기까지 했으면, react와 next에 대한 설정은 끝이다.

Typescript 적용하기

typescript를 적용하는 것은 생각보다 어렵지 않다. 우리가 typescript를 적용하기 위해 해야할 것은...

typescript 사용에 필요한 패키지 설치하기
tsconfig.json 파일 생성하기
index.js 파일 이름 index.tsx로 바꿔주기
npm run dev 실행시켜주기

패키지 설치하기

먼저, typescript 사용에 필요한 패키지들을 설치해보자.
아래 명령어를 입력하면 된다.

npm install --save-dev typescript @types/react @types/node

--save-dev는 왜 붙이냐면, typescript 패키지는 개발에 필요한 패키지이기 때문에 붙이는 것이다. 기본적으로 typescript는 개발자가 개발할 때 타입에 대해 더욱 명확하게 정의하여 잠재적 에러나 버그를 방지하는 것이다. 개발할 때에 필요한 패키지이기에 --save-dev로 명확하게 나눈다.

위와 같은 메세지가 나왔으면 잘 설치된 것이다.

tsconfig.json 파일 생성하기

위와 같이, tsconfig.json라는 파일을 빈(empty) 파일로 일단 생성한다.

그리고 위에 보이는 next-env.d.ts 파일은 절대 먼저 생성하지 않길 바란다. 저건 추후에 next 명령어를 치면 자동으로 생성해줄 것이다.

index.js -> index.tsx

기존에 src\pages 밑에 있던 index.js 파일의 이름을 위에 보이는 것처럼 index.tsx로 바꿔주자.

npm run dev 입력하기

이전까지의 모든 작업을 완료했으면 이전처럼 npm run dev 명령어를 입력해주자.

그러면 위와 같이 next에서 Typescript를 감지했다고 메세지를 송출하며 tsconfig가 기본 값으로 들어왔다(populated)고 나올 것이다.

tsconfig.json 파일을 클릭해보면,

위와 같이 아무 내용도 없던 tsconfig.json 파일이 기본 값으로 세팅된 것을 볼 수 있다.

tsconfig.json의 상세한 설정값에 대한 내용은 https://vomvoru.github.io/blog/tsconfig-compiler-options-kr/ 여기서 확인하실 수 있습니다. 또는 https://typescript-kr.github.io/pages/tsconfig.json.html 여기에서도 가능합니다.

다시 http://localhost:3000 으로 접속하여 서버가 제대로 실행되고 있는지 확인해보자.

위와 같이 나오면 성공이다.

next 위에 express 씌우기

next위에 express를 씌우는 이유는 next 서버 자체에서 지원하지 않고 express에서 지원하는 기능이 있어서이다.

이를테면 동적라우팅 같은 기능이 있다.

동적라우팅이란 post/:id와 같은 형식으로 라우팅을 했을 때 post/1234라고 입력하면, 쿼리스트링처럼 post?id=1234를 받은 것과 같은 역할을 하게 만드는 것이다.

그리고 각종 Express 미들웨어를 사용할 수 있다.

Express와 개발용 패키지 설치하기

일단 Express와 Express에서 사용할 미들웨어들을 설치해보자.

npm install express express-session morgan cookie-parser dotenv
npm install --save-dev nodemon ts-node @types/express @types/express-session @types/morgan @types/cookie-parser @types/dotenv @types/next @types/nodemon

위의 명령어를 차례로 입력해주면 된다.

각각의 패키지에 대해 설명하자면

express : node.js 서버를 띄우기 위한 패키지이다. node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 한다. 개발자는 자신이 원하는 미들웨어를 중간에 배치하여 유연한 서버를 구성할 수 있다. REST API를 개발하기 용이하다.
express-session : 세션과 쿠키는 브라우저에서 정보를 유지하기 위해 나온 개념이다. express 서버에서 세션을 유지하기 위한 모듈이다. 상세한 설정 값으로는 proxy, resave, saveUninitialized, secret, cookie 등이 있다.

const express = require('express');
const app = express();
const session = require('express-session');

app.use(session({
  secret: 'mySecret',
  resave: false,
  saveUninitialized: true,
  cookie: {
    httpOnly: true,
    secure: false
  }
}));

// 위와 같은 형식으로 세션의 옵션 설정이 가능하다.

morgan : 서버에 남는 정보를 로깅하기 위해 사용하는 패키지이다. 어떤 형식으로 로그를 표기할지에 대한 옵션들이 있고, 대표적으로는 short나 tiny 같은 옵션이 있다.
cookie-parser : 말 그대로 쿠키를 파싱(변환)하기 위해 사용하는 패키지이다. 싸인된 쿠키를 사용할 수 있는데, 싸인된 쿠키란 secret으로 암호화한 쿠키를 말한다. 쿠키에 대한 접근은 req.cookies 혹은 req.signedCookies 를 통해 접근 가능하다.
dotenv : 서버에서 사용하는 비밀키(secret)를 관리하기 위한 패키지이다. 이 패키지는 절대 github과 같은 곳에 업로드해서는 안 된다!!
nodemon : 이것도 역시 개발에 필요한 도구이며, 변경사항이 있을 때마다 서버를 재실행 시켜주는 기능이 있어 개발할 때 편의를 제공한다.
ts-node : 타입스크립트로 된 소스를 노드에서 실행시켜주는 실행기이다.
@types/... : 해당 패키지의 타입 정보를 가진 녀석들이다.

Server.ts 파일 작성하기

위의 패키지를 전부 설치하셨으면, 이제 server라는 디렉토리 생성 후 server.ts 파일을 만들어보자.

이렇게 server.ts 파일을 만들어주고, 아래와 같은 내용을 작성한다.

import express, {Request, Response} from 'express';
import next from 'next';
import morgan from 'morgan';
import dotenv from 'dotenv';
import expressSession from 'express-session';
import cookieParser from 'cookie-parser';

const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();
const port = process.env.PORT || 3000;

(async () => {
  try {
    await app.prepare();
    const server = express();
    server.all('*', (req: Request, res: Response) => {
      return handle(req, res);
    });
    server.listen(port, (err?: any) => {
      if (err) throw err;
      console.log(`> Listening on localhost:${port} - env ${process.env.NODE_ENV}`);
    });
  } catch (e) {
    console.error(e);
    process.exit(1);
  }
})();

그리고 package.json 파일에 접근하여, scripts의 내용을 아래와 같이 수정해준다.

이 상태에서 npm run dev를 입력하면 에러가 난다.그 이유는 바로 tsconfig 설정 내부에 "module": "esnext"라는 설정이 있어서 그렇다. Next.js는 타입스크립트 컴파일링을 esnext로 하려 하는데, express는 commonjs 패턴 위에서 개발되었다. 이 설정을 위해 tsconfig.server.json파일을 새로 만들자.

내용은 아래와 같이 작성하면 된다.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "noEmit": false
  },
  "include": ["server"]
}

위의 내용을 하나씩 설명하자면,

"extends": "./tsconfig.json" 는 tsconfig.json에서 모든 옵션을 가져오겠단 것이다.
"compilerOptions.module" : "commonjs" 는 commonjs를 모듈 패턴으로 사용하겠단 것이다. 이 설정은 express와 next를 같이 동작하게 만들기 위해 필요하다.
"compilerOptions.outDir" : "dist" 는 개발 말고 실제 제품을 만들 때 사용되는 프로덕션 모드를 위한 옵션이다. dist라는 디렉토리에 컴파일된 파일들이 위치하게 된다.
"compilerOptions.noEmit" : true 이 옵션도 역시 프로덕션 모드를 위한 옵션이다. next.js에서는 기본적으로 바벨을 사용하여 타입스크립트를 컴파일한다. 그래서 타입스크립트 컴파일러는 .js파일을 만들어내지 않는다. 우리는 이 값을 TS 컴파일러에게 알리고 server 파일들을 컴파일한다.
"include": ["server"] 이 옵션도 프로덕션을 위한 옵션이다. 이 옵션은 server 디렉토리에 존재하는 .ts파일을 컴파일하라고 알려주는 옵션이다.