[유튜브 클론 코딩] #1.0~3.0 서버에 접속하기까지의 준비 과정(NodeJS, NPM, Express, Babel, Nodemon)

#1.3 What is NodeJS

 

NodeJS

• 크롬 V8 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임
• 브라우저 밖에서 돌아가는 자바스크립트(로컬 등)
• 자바스크립트를 브라우저에서 분리한 것
• 프로그래밍 언어. 백엔드도 가능!

 

---

#1.4 What is NPM

 

NPM

• 자바스크립트 언어를 위한 패키지 매니저
• npm은 nodeJS와 상호작용할 수 있게 해줌. 둘이 같이 사용해야 함.ㅇㅇㅇㅇ
• nodeJS를 npm 없이 쓸 수 없기 때문에 nodeJS와 함께 설치됨
• npm과 비슷한 패키지 매니저로 yarn이 있음
• nodeJS 명령어 보단 npm 명령어를 주로 쓴다.
• 다른 사람이 만들어 둔 패키지 공유할 수 있음

---

#2.0 Your First NodeJS Project

NodeJS project

npm init

이 명령어를 터미널에 입력하면 package.json이 생긴다.

 

---

#2.1 Installing Express

package.json 내 정보들

"main":

배포한 package를 다른 사람들이 설치하면 main을 사용한다. (필요 X)

"scripts":

실행하고 싶은 것을 적으면 된다.

"scripts": {
"dev": "node index.js"
}

위와 같이 적었으면, 터미널에 npm run dev라고 입력하면 index.js 파일을 node로 실행시킬 수 있다.

 

Express

npm i express를 터미널에 입력하면 node_modules 디렉토리를 만들어 준다.

express를 다운받고 node_modules\express\pacakge.json에 있는 dependencies도 같이 다운로드 받는다. 이렇게 npm i express를 하면 express를 설치하는 데 의존하는 패키지가 있고 그 패키지들도 다른 것들에 의존하기 때문에 체인처럼 엮여서 설치된다.

 

"dependencies":

프로젝트를 구동시키는 데 필요한 모듈들

 

※ devdependencies는 다운되지 않는다.

※ npm i express를 하면 npm이 알아서 package.json의 dependencies에 추가해준다.

 

---

#2.2 Understanding Dependencies

npm i

npm i 를 터미널에 입력하면 npm이 dependencies에 잇는 모듈들을 알아서 설치한다. 따라서 다른 사람들에게 공유할 때는 node_modules 폴더를 보낼 필요가 없다.

 

package-lock.json

패키지가 수정 됐는지 해시값으로 체크해주며 안전하게 보호한다.(뭔 용도인지 잘 모르겠음)

 

따라서 다른 사람에게 프로젝트를 넘길 때는 프로젝트 내용 파일과 package.json, package-lock.json 파일들만 넘기면 된다.

 

.gitignore

gitignore을 통해 원치 않는 파일이 깃허브에 업로드 되는 것을 막을 수 있다. node_modules 등을 넣으면 된다.

 

npm install 할 때 꼭 package.json을 닫고 해야하는 이유

package.json이 열려있고 뭔가 수정을 했는데 저장을 하지 않은 상태에서 npm i express를 실행하면 npm이 package.json의 dependencies를 수정하는데, 저장을 안 했기 때문에 버전 충돌이 일어난다.

 

---

#2.3 The Tower of Babel

Babel

자바스크립트 컴파일러. nodeJS가 이해하지 못 하는 최신 자바스크립트 코드를 nodeJS가 이해할 수 있도록 바꿔준다.

1) 터미널에 명령어 입력해 babel 패키지 설치하기

npm install --save-dev @babel/core

devDependencies는 개발자에게 필요한 dependencies다.

--save-dev

devDependencies에 저장하도록 하는 명령어

 

2) babel.config.json 파일 새로 만들기

babel이 알아서 babel.config.json 파일을 찾아 내용을 들여다 본다.

3) 아래의 코드 babel.config.json 파일에 입력하기

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

preset은 babel을 위한 매우 거대한 플러그인이다. preset 중에 preset-env가 가장 유명하다. 이 preset을 사용하면 최신 자바스크립트 구문을 사용할 수 있게 해준다.

4) 터미널에 명령어 입력

npm i @babel/preset-env --save-dev

 

---

#2.4 Nodemon

Nodemon

babel로 컴파일하는 scripts 만들기 위해 nodemon을 사용한다.

 

1) @babel/node 설치하기

npm install @babel/node --save-dev

 

2) 명령어로 nodemon 설치하기

 

npm i nodemon --save-dev

3) scripts 내용 변경하기

"scripts": {
"dev": "nodemon --exec babel-node index"
}

--exec 옵션 뒤에 babel-node를 써서 실행하게 만든다.

코드가 수정되면 알아서 서버를 재시작한다.

 

---

#3.0 Your First Server

NodeJS 서버 만들기

우선 폴더 정리를 한다. src 폴더를 만들어서 코드와 로직을 갖고 있는 모든 파일을 넣는다.

📂wetube

|----📂src

|      |----📄server.js

이렇게 폴더 구조를 바꾸면 주의할 점이, scripts에서 index 파일의 위치도 바꿔줘야 한다. 이 경우 src/server로 바꿔줘야한다.

 

import express from "express"

먼저 express에서 express를 import 해와야 한다. "express"라는 package를 express라는 이름으로 import 해온 것이다. 폴더의 위치를 적지 않아도 node_modules에서 express를 찾고 있다는 것을 알아낸다.

 

express를 사용하기 위해서는 먼저 express application을 만들어야 한다. express 설계를 위한 규칙이다.

const app = express();

express function을 이용하면 express application을 생성해준다. 이제 application 혹은 server가 생긴 것이다.

 

이제 app이 listen할 수 있게 해야한다. 서버는 항상 request를 listen하고 있다. request는 서버와 상호작용 하는 모든 일들을 말한다. 즉, 사람들이 뭔가를 요청할 때까지 기다리고 있도록 해야한다.

app.listen(4000,handleListening);

listen()에는 callback이 있다. 여기서 callback은 기본적으로 서버가 시작될 때 작동하는 함수다.

calback을 작성하기 전에 서버에게 어떤 port를 listening할지 얘기해 줘야 한다.(컴퓨터에는 수많은 port가 있기 때문이다.) port는 컴퓨터의 문이나 창문 같은 것이다.

콜백 함수는 아래와 같이 작성하자.

const handleListening = () => console.log("Server listening on port 4000 🐣");

 

localhost를 통해 서버에 접속할 수 있다.

localhost:4000

 

여기까지 하고 서버에 접속하면 Cannot get / 이라는 페이지를 확인할 수 있다.