Node.js 첫 시작 셋팅 2

 

네 번째. Babel 패키지 설치.

=> 이제 Babel 을 설치할거야. 허나 그 전에 git init . 을 터미널에 입력.

——

git init .   // init 뒤에 띄어쓰기 한 번 하고 . 찍기.

——

=> 해당 명령어는 프로젝트 안에 새로운 git 저장소를 생성하기 위한 명령어.

 

이제, 바벨 패키지를 설치. 여전히 zoom 프로젝트에서.

——

npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

——

=> babel 관련해서 내가 원하는 4가지를 설치.

 

 

 

다섯 번째. .gitignore 파일 생성.

——

touch .gitignore

——

.gitignore 을 생성해주고, 안에 /node_modules 을 입력.

——

/node_modules

——

=> 이게 뭔 소리냐. 프로젝트를 git 에 업로드 할 건데, zoom 폴더 안의 node_modules 는 업로드 하지 않겠다 라는 의미. 업로드 하면 미친 짓.

 

 

 

여섯 번째. nodemon.json 파일 설정.

해당 파일은 nodemon 을 설치하면서 이를 통제하기 위해 함께 생성한 파일.

——

{

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

}

——

=> nodemon.json 에는 ‘exec’ 이라는 명령어를 하나 넣어줄건데, exec 는 server.js 를 실행시킬 거야.

nodemon 은 exec 명령어를 이용해서 해당 코드 하나만 실행되도록 설정을 한 거야.

nodemon 이 실행될 때, exec 명령이 같이 실행될거야.

 

 

 

 

일곱 번째. bable.config.json 설정해주기.

——

{

     "presets": [“@babel/preset-env"] 

}

——

 

 

 

정리. 현재 package.json 의 내부 상황은 다음과 같아.

——

{

  "name": "zoom",

  "version": "1.0.0",

  "description": "Zoom clone using WebRTC and Websockets",

  "license": "MIT",

  "devDependencies": {

    "@babel/cli": "^7.19.3",

    "@babel/core": "^7.19.6",

    "@babel/node": "^7.20.0",

    "@babel/preset-env": "^7.19.4",

    "nodemon": "^2.0.20"

  }

}

——

=> 내가 npm 으로 설치한 패키지들이 잘 반영되어 있음을 알 수 있어.

 

Nodemon 에는 exec 라는 key가 하나 있는데, 이건 src/server.js 에 대해 babel-node 명령문을 실행시키는 구문이야.

babel.config.json 에는 우리가 사용할 유일한 ‘preset’ 이 입력되어 있어. 

 

 

 

 

 

여덟 번째. package.json 에 scripts 를 추가해줄 거야.

——

"name": "zoom",

"version": "1.0.0",

"description": "Zoom clone using WebRTC and Websockets",

"license": "MIT",

"scripts”: {

    "dev": "nodemon"

  },

  "devDependencies": {

    "@babel/cli": "^7.19.3",

    "@babel/core": "^7.19.6",

    "@babel/node": "^7.20.0",

    "@babel/preset-env": "^7.19.4",

    "nodemon": "^2.0.20"

  }

——

=> script 안에서 dev 는 nodemon 을 호출할거고, 그거만 할거야.

왜냐면 nodemon 이 호출되면 nodemon이 nodemon.json 을 살펴보고 거기 있는 코드를 실행할거야.

 

 

 

 

아홉 번째. Express 설치하기.

 

——

npm i express

——

=> 터미널에 위와 같이 입력. 여전히 위치는 zoom 폴더.

 

 

 

열 번째. Pug 설치하기.

——

npm I pug

——

=> pug 는 템플릿 엔진의 일종. Html 을 작성할 때 사용되며, html 을 브라우저로 리턴 해주는 과정에서 사용됨.

 

 

 

 

열 한번째. server.js 에 express import 하기. 그리고 app 설정.

——

import express from 'express';

const app = express();

 

console.log("hello node");

 

app.listen(3000);

——

=> express를 임포트하고, 서버 통신에 express 를 사용하기 위해 const app 에 express() 를 저장.

이제 app.listen(3000) 을 통해서 서버와 클라이언트가 통신을 할 수 있어.

 

 

 

마지막으로 서버가 제대로 돌아가는지 기동해보자.

아까 package.json 에 script - dev 설정해 준 것 있지? 그걸 실행시켜볼거야.

——

npm run dev

——

=> 잘 실행되었다면, 콘솔창에 hello node 라고 나올거야.

express 를 app 으로 실행하기에 app.listen(3000) , 즉 3000 포트를 통해서 클라이언트와 통신할 수 있어.

http://localhost:3000/  주소로 접속하면 can not get 이라고 나와. 이건 아직 get 을 설정해주지 않아서.

 

 

여기까지가 Node.js 속성 서버 설정이었어.

Babel, nodemon, express 3개 를 활용해서 node.js 프로젝트를 설정한거야.

 

이후에도 설정이 계속 될건데, Pug 를 설정해줘야 하고 첫 번째 view 를 설정해야 해.

그리고 기본적인 frontend 도 만들어 둬야 하지.

Express 에서 static files 도 설정할 수 있을 거야.

 

 

* 서버 내리고 싶으면 ctrl + C