React + Express + Typescript - 01. 서버 환경 구성

본 포스트에서는 Front-end는 리액트, Back-end는 Express 기반의 Node.js를 사용하여 하나의 프로젝트로 간단한 Application을 구성해 보겠습니다. 구성할 Application은 이전 포스트에서 진행했던 네이버 API 조회 Application을 재사용 하겠습니다.

 

React + Express + Typescript 프로젝트 구성하기

 

이전 포스트에서 진행했던 Naver API 조회 프로젝트는 연습은 할 수 있는 아키텍처이나 실제로는 사용할 수 없는 아키텍처 입니다. 브라우저에 있는 CORS 정책을 사용자가 해제해주지 않으면 실행이 되지 않는 구조이기 때문입니다. 하이브리드 앱으로 애플리케이션을 구성한다면 사용이 가능하지만 웹 페이지로는 사용이 불가능합니다.

 

그래서 Naver API를 조회하는 부분은 서버로 로직을 옮겨 서버 to 서버 인터페이스로 변경하고 화면에서는 동일한 Domain(IP)에 있는 서버 인터페이스를 사용하여  CORS 정책을 해제하지 않고도 사용할 수 있는 아키텍처로 변경하겠습니다.

 

서버 to 서버 인터페이스

 

위 그림과 같은 구성은 다른 서버와의 인터페이스 주체가 서버이므로, 서버 간 통신에는 브라우저의 CORS 정책이 영향을 주지 못합니다. 이렇게 로컬 서버에서 Naver API 서버와 통신하여 데이터를 받아온 후 동일한 Domain(IP)에 있는 화면에서 해당 정보를 사용해서 검색 기능을 구현해 보겠습니다.

 

먼저 아래 포스트를 참고하여 Express 기반의 Node.js 개발 환경을 구성합니다.

https://redballs.tistory.com/entry/Nodejs-Express-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95?category=569060 

Node.js Express 환경 설정

 

포스트를 따라서 구성하고 프로젝트를 구동해보면 "Hello World"를 확인할 수 있습니다. 하지만 우리는 TypeScript를 사용하기로 했으니 필요한 모듈을 설치하고 프로젝트 구조를 살짝 변경해 보겠습니다.

 

 

TypeScript 설치

개발 의존성으로 node와 express 라이브러리의 타입을 설치합니다.

D:\workspace\expressServer> yarn add --dev @types/node
D:\workspace\expressServer> yarn add --dev @types/express

 

app.ts 로 변경

./src/app.js 프로그램을 ./src/app.ts 로 변경하고 아래와 같이 작성합니다. 기본적인 내용은 변경이 없고 필요한 부분에 타입만 추가합니다.

import express, { Request, Response } from "express";
import path from "path";

const app = express();

app.use(express.static(path.join(__dirname, '../public')));
app.get('/', (req: Request, res: Response) => {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen('8001', () => {
    console.log('Server started');
});

 

타입 스크립트 컴파일 옵션 설정

프로젝트 루트에 tsconfig.json 파일을 아래와 같이 작성합니다.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    }
}

 

사용하는 컴파일 옵션에 대한 설명은 제 블로그의 아래 글을 참고해주세요.

https://redballs.tistory.com/entry/React-%EA%B8%B0%EC%B4%88-%EB%AA%A9%EB%A1%9D-TypeScript-03-Hello-World?category=566801 

React 기초 (목록 - TypeScript) 03 - 컴파일

 

컴파일 옵션까지 작성했으면 tsc 명령으로 컴파일을 진행합니다. 컴파일한 결과 파일은 ./dist 하위에 생성됩니다.

D:\workspace\expressServer> tsc

 

실행 확인

현재는 start 스크립트를 ./src/app.js로 설정해 두었는데 이제는 컴파일한 ./dist/app.js 파일을 사용해야 하므로 package.json 파일의 start 스크립트를 아래와 같이 변경합니다.

"scripts": {
  "start": "node ./dist/app.js"
}

 

변경 후 yarn start 명령어로 로컬 서버를 기동하여 브라우저에서 "Hello World"가 잘 출력되는지 확인합니다. 현재까지 진행한 프로젝트 폴더 및 파일 구조는 아래와 같습니다.

프로젝트 구조