node.js 실습 > 줌 -1-

줌 클론코딩

 

 

 

node.js 를 사용하여 실시간 채팅과 화상통화가 가능한 웹 사이트를 만들어 볼 거야.

 

 

 

 

 

______________________________________________________________________________________________________________

 

SERVER SETUP

 

 

 

 

우선 node.js 를 기반으로 한 서버 구축을 위해서 기본적인 셋팅들을 몇 가지 해줄거야.

zoom 이라는 폴더를 만들어 줄 것이고, 해당 폴더는 일반적인 Node.js 프로젝트가 될 거야.

그렇기 위해서 package.json, Babel, Nodemon 설정 이런 것들을 해줄거야.

 

터미널을 통해서 NomadCoders 폴더에 들어간 상태에서 다음과 같이 실행.

——

mkdir zoom // zoom 폴더 생성

 

cd zoom // zoom 폴더 진입

 

npm init -y // zoom 폴더 내부에 package.json 생성. -y 는 디폴트 값으로 생성하겠다 라는 의미.

——

=> package.json 이 프로젝트에 왜 필요한가? 

작업을 하다 보면 수많은 다양한 패키지 들을 다운받게 될 텐데, 이들을 관리하고 한 눈에 쉽게 알아볼 수 있도록 해주기 위해서.

 

 

 

이제 VSC 로 zoom 폴더를 실행.

그럼 폴더 안에 package.json 이라는 파일이 있을거야. 해당 파일을 열어보면,

——

{

  "name": "zoom",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

——

=> 이렇게 설정이 되어 있어. 이 중에 script 와 main, keywords, author 은 통째로 삭제해줄거야.

허나 본인에게 필요하다면 사용하고.

그리고 license 에는 ‘MIT’ 를 넣어줄거야.

또한 description 은 “Zoom clone using WebRTC and Websockets” 라고 명명.

——

{

  "name": "zoom",

  "version": "1.0.0",

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

  "license": "MIT"

}

——

=> 이렇게.

 

 

 

또한, GitHub 에 올릴 것을 고려해서 README.md 도 추가해 줄거야.

VSC 우측 상단에 보면 내가 원하는 방향으로 터미널을 켤 수 있는 아이콘이 존재해. 에디터의 하단에 터미널이 오도록 아이콘을 선택.

그리고 터미널에서 다음과 같이 입력. 물론 zoom 파일에 들어온 상태에서.

——

touch README.md

——

=> touch 키워드는 빈 파일 생성 또는 파일의 수정시간 및 접근 시간을 수정하기 위한, 맥의 기본 명령어.

touch 뒤에 파일 이름이 올 경우, 해당 파일이 존재하지 않는다면 생성해. 만약 파일이 있다면 수정 시간을 업데이트 해.

 

해당 README.md 안에서 # Noom 이라 불리는 메시지를 남길거야.

——

# Noom

 

Zoom Clone using Node.js, WebRTC and Websockets.

——

 

 

 

 

 

 

이제부터 기본 셋팅에 있어서 정말 중요한 부분인데, npm 을 통해서 Zoom 프로젝트에 필요한 패키지들을 설치할 거야. 다 터미널을 통해서.

 

 

첫 번째. Nodemon 설치하기.

우선 nodemon 을 통제하기 위한 파일을 만들어 줘.

——

Zoom > nodemon.json

——

 

그 다음 터미널에서 npm 으로 nodemon 패키지를 설치.

——

npm i nodemon -D     

——

=> npm 을 사용하여 nodemon 을 install 할거다. -D 는 development mode, 즉 로컬에서만 사용하겠다는 의미.

 

 

 

두 번째. Babel

=> Babel은 ES6,7로 작성된 코드를 브라우저가 인식할 수 있는 ES5로 변환시켜주는 Transpiler 이다. 

즉 자바스크립트의 최신 버전을 브라우저가 이해할 수 있도록 도와주는 녀석.

——

babel.config.json

——

=> 우선 babel 을 설치하는데에 앞서서 babel 을 통제할 수 있는 파일을 하나 만들어 줄거야.

zoom 폴더 안에 위와 같은 json 파일을 생성해 줘.

 

 

세 번째. Server.js 만들어주기.

——

Zoom > src

Src > server.js

——

=> zoom 폴더 안에 src 라는 폴더를 만들고, 그 폴더 안에 server.js 라는, 서버를 통제하는 js 파일을 생성해 줘.

 

 

 

네 번째. 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