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가지를 설치.