[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(1) - 기본 설정

목차

 

[Node.js]기본 패키지 구조 모듈 파헤치기(1)

[Node.js]기본 패키지 구조 모듈 파헤치기(2)

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(2) - 기본 구조

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(3) - JWT, 회원 가입과 로그인

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(4) - 컨트롤러에 검증로직 추가

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(5) - 1:N, N:M 관계

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(6) - OAuth 2.0(구글/네이버/카카오)

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(7) - 좋아요 추가, 코멘트 개수 쿼리 추가

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(7.5) - 페이지네이션

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(8) - AWS, Github Actions, NGINX를 이용한 자동배포(1/2)

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(8) - AWS, Github Actions, NGINX를 이용한 자동배포(2/2)

[Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(9) - 이미지 리사이징, S3 버킷에 이미지 업로드

 

그동안 Node.js로 알고리즘도 아주 쉬운 파트이지만 꾸준히 풀었고,

 

지난번에 기초적인 패키지의 폴더와 모듈에 대해 분석을 해보았으니

 

이제 실습이 남았다는 생각이 들었다.

 

물론 하나도 모르고 구글링을 엄청 해야겠지만..

 

역시 읽기만 하는 것보다는 내가 부딪치면서 입력해 보는 게 오래 남을 테니까.

 

시작하기 전에, 이후의 글은 Node.js와 TypeScript, npm은 기본적으로 설치되어 있다는 가정하에 이어진다.

 

Project Setting

 

일단 프로젝트를 위해 비어있는 폴더를 하나 생성한다. 늘 모든 이야기는 여기서 시작된다.

 

터미널을 열고 다음의 명령어를 실행한다.

npm init -y

그럼 아래와 같이 폴더에 package.json 파일이 생성된다.

 

 

package.json

 

가장 먼저 생성되는 시점에서 감이 오지만, 이 파일은 프로젝트의 핵심을 담고 있으며, 앞으로 담게 될 파일이다.

 

여기서 핵심이란 구체적으로 프로젝트의 메타데이터(이름, 버전, 라이선스 등)와 의존성, URL 구조 등을 가리킨다.

 

또한 프로젝트의 빌드나 배포, 테스트 등을 자동화할 수 있는 스크립트 파일을 정의할 수 있으며,

 

특별히 "main" 필드는 해당 프로젝트의 엔트리포인트를 정의하고 있다.

 

 

Install Express

 

계속해서 Express를 설치하자. 계속해서 터미널에서 다음의 명령어를 실행한다.

npm install express

그러면 아래와 같이 Express에 필요한 패키지가 전부 다운 받아지고,

 

왼쪽의 폴더 구성을 보면 모듈 폴더와 함께 package-lock.json이 생성된 것을 확인할 수 있다.

 

node_modules를 열어보면 그 안에 방금 설치한 모듈이 전부 들어있다.

 

추가로 타입스크립트 프로젝트를 진행하기 위해 express 라이브러리의 타입 정의를 설치한다.

npm install --save-dev @types/express

이 타입 정의를 설치하지 않으면 타입스크립트 파일은 express를 이해하지 못한다.

 

package-lock.json

 

이 파일은 설치된 의존성의 정확한 버전을 기록하며 어디서든 재현 가능한 빌드를 보장하기 위한 파일이다.

 

이렇게만 들어선 뭔 소린지 나도 모르겠으니, package.json과 비교하면서 특징을 살펴보자

 

1. 의존성 관리
   
   
   1. package.json에는 프로젝트가 의존하는 패키지와 허용 가능한 버전의 범위가 나열된다.
      npm install이 실행될 때마다 해당 범위 내에서 패키지의 최신 버전이 알아서 설치가 된다.
   2. package-lock.json은 프로젝트 의존성에 대한 스냅샷을 제공한다.
      이는 설치할 패키지의 정확한 버전, 또 그 패키지가 의존하는 모든 패키지의 정확한 버전을 지정한다.
2. 생성 시점
   
   
   1. package.json은 프로젝트의 극 초기 설정 과정에서 npm init과 함께 생성된다.
   2. package-lock.json은 그와는 다르게 npm install을 실행할 때마다 생성 혹은 업데이트된다.
3. 커밋 여부
   
   1. package.json은 프로젝트의 일부로서 항상 프로젝트의 버전과 맞춰 커밋해야 한다.
   2. package-lock.json은 반면 의견이 분분하며, 일반적으로는 개발 환경의 통일을 위해 커밋하는 편이다.

요약하면 package.json은 프로젝트의 의존성과 메타데이터를 선언하며, package-lock.json은 설치된 의존성의

 

정확한 버전을 스냅샷으로 찍어 재현 가능한 빌드를 보장한다.

 

TypeScript Setting

 

이어서 타입스크립트로 프로젝트를 설정하기 위한 설정을 해주자.

 

터미널에서 아래와 같이 입력한다.

npx tsc --init

그러면 아래와 같은 출력이 나오며,

 

패키지에 tsconfig.json 파일이 생성된 것을 확인할 수 있다.

 

 

tsconfig.json

 

이 파일은 타입스크립트 프로젝트에서 컴파일할 파일과 그 옵션을 설정하는 파일이다.

 

또한 타입스크립트를 컴파일하면 해당 파일을 읽고, 설정에 따라 타입스크립트를 자바스크립트로 번역한다고 한다.

 

따라서 다음과 같은 설정이 기록된다.

 

• compilerOptions: 컴파일러의 동작을 정의한다.
  
  
  • target: 타입스크립트를 어떤 버전의 자바스크립트로 컴파일할지 지정한다.
  • module: 컴파일된 코드가 어떤 모듈 시스템을 사용할지 지정한다.
  • strict
    true일 경우 타입스크립트는 코드를 조금 더 엄격하게 검사한다.
    모든 타입이 명시적으로 지정되어야 하며, null과 undefined는 같은 타입으로 간주된다.
  • outdir: 컴파일된 자바스크립트 파일이 저장될 위치를 지정한다.
• include & exclude: 컴파일러에게 어떤 파일을 컴파일하거나 무시할지 정해준다.
• files: 위와 비슷하게 컴파일할 파일들을 명시적으로 지정해 준다.

 

Writing Application Code

 

계속해서 아주 간단한 코드를 작성 및 실행해 보자. app.ts라는 파일을 생성한 뒤 아래의 내용을 입력한다.

import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

코드의 간단한 설명은 아래와 같다.

 

• import express from 'express'; → Express.js 웹 프레임워크를 가져온다.
• const app = express();
  Express 함수를 호출해 Express 앱 인스턴스를 생성하고 app에 할당한다.
  해당 객체는 개발이 진행됨에 따라 라우팅과 미들웨어 설정에 사용된다.
• const port = 3000; → 해당 웹 서버가 동작할 포트를 3000으로 설정하고 port에 할당한다.
• app.get('/', (req, res) => { ... });
  app.get 메서드를 이용해 HTTP GET 요청에 대한 라우팅을 정의한다.
  여기서 '/'는 URL을, req는 요청 객체를, res는 응답 객체를 의미한다.
• res.send('Hello World!'); → 응답 객체의 send 메서드를 호출해 'Hello World!'를 반환한다.
• app.listen(port, () => { ... });
  app 인스턴스의 listen 메서드를 호출해 서버를 시작한다.
  이때 첫 번째 매개변수는 서버의 포트 번호, 두 번째 콜백 함수는 서버 시작 시 콘솔에 메시지를 찍는 역할을 한다.

계속해서 작성한 코드를 이용해 서버를 실행해 보자.

 

위에서 언급했듯이 타입스크립트는 직접 실행할 수 없으므로 자바스크립트로 컴파일해야 한다.

 

터미널에서 다음과 같이 입력한다.

npx tsc

이어서 다음과 같이 입력하면,

node app.js

짠! 서버가 실행된다.

 

Install Mongoose and Connect

 

기쁨은 잠시 넣어두고 침착하게 디비에 연결하도록 하자.

 

이어지는 글도 위와 마찬가지로 로컬에 몽고디비가 깔려있다는 전제 하에 진행된다.

 

먼저, Mongoose와 그에 대한 타입스크립트 타입 정의를 설치한다.

지난 글에도 적었지만 mongoose는 MongoDB와 상호작용을 위한 node.js 기반의 ODM 라이브러리이다.

npm install mongoose

몽구스는 자체적으로 타입스크립트를 정의하기 때문에 두 개로 나눠서 설치할 필요가 없다.

 

계속해서 app.ts에 아래의 코드를 추가한다.

import mongoose from 'mongoose';

mongoose.connect('mongodb://localhost:27017/testdb' || '', {})
.then(() => console.log('MongoDB connected...'))
.catch((err) => console.log(err));

몽고디비가 실행 중이고, testdb라는 이름의 데이터베이스가 있어야 한다.

 

그 이후에 아래와 같이 입력하면,

npx tsc && node app.js

짠! 디비와의 연결도 끝이 났다.

 

솔직히 말해서, 디비 연결 이렇게 쉬울 일인가?.. 뭔가 허무했다.

 

여기까지 해서 기본 세팅은 끝났으니, 다음 글부터 조금씩 만들어 가보자.