chatting server - 환경설정

javascript 와 node.js 의 express 모듈을 활용한 chatting server 를 개발해보겠습니다.

 

시작

node.js 를 사용하기 위해 환경설정을 하겠습니다.

먼저 작업을 진행할 폴더를 생성하는데 저는 chatting_web 이라는 이름으로 생성했습니다.

다음으로 해당 visual studio code 를 사용해서 해당 폴더를 열어줍니다.

해당 폴더를 열었으면 터미널 카테고리에서 새 터미널을 클릭하면 visual studio code 의 아래에 터미널 창이 생깁니다.

터미널에서 npm init -y 를 입력하면 package.json 파일이 생성됩니다.

PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web> npm init -y

 

nodemon 및 babel 설치

nodemon

nodemon 은 프로젝트의 소스코드가 수정될때마다 개발자가 node.js 를 다시 실행시키지 않아도

자동으로 변경사항을 감지해서 프로그램을 재시작시켜주는 도구입니다.

PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web>npm i nodemon -D

위와 같이 터미널에서 npm i 를 통해 nodemon 을 설치합니다.

다음으로 nodemon.json 파일을 생성해서 nodemon 이 실행될때 먼저 실행되어야할 명령을 작성합니다.

{
  "exec": "babel-node src/server.js"
}

babel 은 자바스크립트를 컴파일해주는 도구입니다.

nodemon 을 실행하기 전 자바스크립트 컴파일이 먼저 진행되야하므로 nodemon.json 에 위와 같이 작성합니다.

 

babel

위에서 설명한것처럼 babel 은 자바스크립트를 컴파일해주는 도구입니다.

여러 버전의 자바스크립트를 모든 브라우저가 사용할 수 있도록 컴파일해주는 도구

다음과 같은 명령어를 통해 babel 을 설치합니다.

PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web>npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

babel.config.json 파일을 생성하고 babel 에 대한 설정을 해줍니다.

{
  "presets": ["@babel/preset-env"]
}

 

express 모듈

node.js 환경에서 서버를 개발할 수 있도록 해주는 express 모듈을 설치하겠습니다.

PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web> npm i express

express 모듈 설치가 완료되었으면

프로젝트 폴더 안에 src 폴더를 생성하고 src 폴더에 server.js 파일을 생성해 아래와 같이 작성합니다.

import express from "express";

const app = express();

const handleListen = () => {
  console.log("Server Start");
};
app.listen(3000, handleListen);

 

결과

package.json 파일의 script 부분에 "dev" : "nodemon" 을 작성합니다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon"
  },

이는 dev 라는 명령어를 통해 nodemon 을 실행시킨다는 것으로

nodemon 을 실행하게 되면 위에서 설정을 한 것처럼 babel 을 통해 자바스크립트가 먼저 컴파일되고

nodemon 이 실행되어 소스코드가 수정될때마다 프로그램을 재시작합니다.

PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web> npm run dev

> chatting_web@1.0.0 dev
> nodemon

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node src/server.js`
Server Start

터미널에 npm run dev 를 입력하면 server.js 가 실행됩니다.

 

.gitignore

저는 프로젝트를 git 을 통해 관리를 할 것인데, 프로젝트 폴더의 node_modules 폴더를 보면 많은 파일들이 있습니다.

이를 git 에 업로드하게 되면 용량이 많이 필요하며 시간 또한 오래 걸리기 때문에 이것을 제외하고 올리겠습니다. 

프로젝트 폴더에 .gitignore 파일을 생성하고 다음와 같이 입력합니다.

node_modules

git add . 를 통해 인덱스 영역에 프로젝트를 올리고 git status 를 통해 반영된 파일들을 확인해보면

node_modules 폴더를 제외된것을 확인할 수 있습니다.

PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web> git add .
PS C:\Users\TEST\Desktop\Javascript_Advanced\chatting_web> git status
On branch dev
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   .gitignore
        new file:   babel.config.json
        new file:   nodemon.json
        new file:   package-lock.json
        new file:   package.json
        new file:   src/server.js