Node.js + Express + TypeScript 게시판 만들기 #1 – 개발 환경 구성

작성자:

Node.js 기반으로 게시판을 만드려고 한다.

백엔드는 Express. 프론트엔드는 Vue를 사용하려고 한다.

이 글을 읽기 전 Node와 Visual Studio Code를 설치하는 것을 추천한다.

Node 설치

VS Code 설치

해당 링크에서 확인할 수 있다.

개발환경

  • Backend: Node.js, Express
  • Language: TypeScript
  • Editor: Visual Studio Code
  • Package Manager: npm

1. 프로젝트 폴더 생성

윈도우환경에서 개발할테니 그냥 편하게 gui를 이용해서 생선한다.

2. npm 프로젝트 초기화

VS Code에서 해당 폴더를 연 뒤 명령어를 실행한다.

npm init -y

3. package.json 확인

프로젝트의 의존성과 스크립트를 관리하는 파일이다.

이후 설치되는 패키지 정보들이 기록된다.

4. Express 설치

npm install express

Node 기반 백엔드 서버 프레임워크이다.

5. 생성 파일 확인.

node_modules, package-lock.json 두 파일이 추가된다.

6. TypeScript 관련 패키지 설치

npm install -D typescript ts-node @types/node
npm install -D @types/express

Express 타입 정의를 설치한다.

TypeScript JavaScript

참고로 타입스크립트와 자바스크립트를 간단히 비교해보자면

TypeScript는 코드 실행전에 타입을 검사하여 오류가 있는지 확인한다.

아무래도 JavaScript에 비해서 코드를 읽었을때 이해도가 더 높을 순 있으나 문법이 길어져서 번거로울 수도 있겠다.

아무튼 많이 사용해보진 않아서 한 번 경험해보려고 한다.

7. TypeSciprt 설정 파일 생성

TypeSciprt 컴파일 옵션을 담는 설정 파일 tsconfig.json을 생성한다.

npx tsc --init

npm은 패키지 설치이고 npx는 패키지 실행인데 여기서는 아무래도 tsconfig.json을 생성하고 초기화만 하면 되므로 npx로 사용한 것 같다.

8. index.ts 작성

src/index.ts를 생성한다.

import express from 'express';

const app = express();

app.get('/', (req, res) => {
    res.send('hellod nodejs');
});

app.listen(3000, () => {
    console.log('server start');
});

9행에서 서버를 실행하면 server start 로그가 찍히고

5행에 request를 / 로 보내면 ‘hellod nodejs’ 텍스트를 응답으로 받는다. 이와중에 hello도 오타가 있네..

9. tsconfig.json 수정 (에러 해결)

이렇게 작성하면 import express 여기에 ECMAScript imports and exports cannot be written in a CommonJS file under ‘verbatimModuleSyntax’. A…… 이러한 에러가 뜬다.

"compilerOptions": {
    "module": "commonjs",
    "verbatimModuleSyntax": false,
    "esModuleInterop": true,

tsconfig.json에서 해당 내용 수정 또는 입력하면 된다.

10 .package.json 스크립트 추가

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "ts-node src/index.ts"
  },

TypeScript를 실행하기 위한 스크립트를 추가한다.

11. 서버 실행

npm run dev

터미널에서 server start를 확인할 수 있다.

12. 실행 확인

Node.js Express + Vue

브라우저에서 localhost:3000로 접속하면 hellod nodejs 텍스트를 확인할 수 있다.

이번 글에서는 Node.js + Express + TypeScript로 백엔드 기본 환경을 구성했다.

다음 글에서는 nodemon을 이용해서 서버를 자동 재시작하게끔 설정하고, Express 라우터를 분리하여

본격적인 서버 구조를 구성해보도록 한다.

Post Views: 35

댓글 남기기