vue3 express mongoDB 개발환경 세팅

Vue3 설치는 이전 포스팅 참조 

 

Express 로 backend 폴더 설치

npm install -g express-generator

 

express --view=pug backend

 

cd backend
npm install
npm start

폴더에 app.js 내용 지운 후 다음과같은 코드 작성

 

또는

backend 폴더 생성

npm init -y
npm install express

TS 사용하기

src 폴더를 만들고 그 안에 app.ts  생성. 타입스크립트 사용시 모듈을 설치해주어야한다. 

npm install ts-node
npm install -D typescript
npm install -D tslint

tsc --init

을 통해 tsconfig.json 파일 생성 후 "outDir": "dist"를 추가해준다. 또한 target : es6로 바꿔준다.

./node_modules/.bin/tslint --init

를 통해 tslint.json 생성하고 다음과 같이 rule 설정.

또한 package.json의 start option 변경

npm start하면 tsc로 ts 파일이 dist 폴더내에 js파일로 변환되어 웹이 읽을 수 있게 만들어주는 작업이 완료되었다.

 

 

이제 코드를 작성한다.

만약 타입스크립트를 사용하지 않는다면 기존의 reqire 대신에 es6 문법인 import를 사용하기 위해서는 package.json에 "type": "module"를 추가해주어야한다. 

타입스크립트 사용한다면 쓸 필요 없다. 아니 쓰면 작동하지않는다. 

 

import express from 'express'	//es6
const app = express();
const port = 3001;

app.listen(port, () => {
  console.log(`서버가 ${port}에서 동작중입니다.`);
});

다음과 같은 오류 나면

Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.ts(2580)

npm install @types/node --save-dev

이렇게 설치해준다.

 

이제 실행을 해본다. 

 

npm start

 

 

서버 동작 확인 끝!

 

mongoDB 설치

 

Community Server 클릭

Download

Compass 함께 설치

Install...!

finish

 

이제 mongoDB 환경변수 설정

 

bin 폴더를 들어가 폴더 경로 복사

환경변수 설정에서 path 누르고 edit (편집)

New 누르고 새로 생긴 칸에 MongoDB bin 폴더 경로 입력

하고 OK 누르면 끝

 

Powershell 또는 cmd 를 실행하여 mongo 입력시 아래와같이 실행된다면 성공적!

 

MongoDB compass를 사용하면 GUI로 DB를 다룰 수 있다. 

 

이제 다시 backend 폴더로가서 명령창을 열고 mongodb를 추가한다.

npm install mongodb

몽고db 연결

 

app.js에 아래 코드를 추가한다.

import MongoDB from 'mongodb'

MongoDB.connect(url, { useUnifiedTopology: true }, (err, client) => {
      assert.equal(null, err);
      console.log("Connected correctly to mongodb server");
      this.client = client
      client.close();
      
      //your code 
      
    });

그리고 서버를 재시작 하면

다음과 같이 서버는 3001번에서 동작중이며 몽고db 연결도 완료된것을 볼 수 있다.

 

그런데 포트를 여러개 열다보면 여러곳에서 같은 포트를 쓰게될 수 있어  충돌로 에러가 날 때가 있다. 

그럴 땐

netstat -ano

로 현재 열려있는 포트를 확인하고 강제종료하고싶은 포트의 PID를 기억하여 

taskkill /f /pid 3001

이제 다시 npm start 해주면 3001번에서 서버가 정상작동한다.