[유튜브 클론] 개발환경 세팅(NodeJS, Express, Babel)

nodeJS 시작하기

 

document 폴더에 wetube 폴더를 만들고, vsc에서 불러온다.

package.json 파일을 생성한다

json이란 프로그래머가 파일에 정보를 저장하기 위해 만든 방식 중 하나이다.

Node js의 경우에 반드시 파일명 package.json이어야 한다.

우리는 직접 package.json 파일을 만들지 않을 거기 때문에 해당 파일을 삭제해준다.

 

참고로 계속 vsc 터미널에서 npm 입력이 되지 않아서..

nodejs 설치된 걸 확인했더니 여기엔 문제가 없어 오류를 찾아보니

아래와 같이 문제를 발견하고 해결했다.

댓글에 관련한 조언이 없길래 커뮤니티에 살포시 공유해둠.ㅋㅋ

(+ 터미널 단축키는 ctrl '`   , 터미널 내용 지우려면 clear 입력,    나가기는 exit 입력)

 

 

이제 터미널 사용할 준비 완료!

 

git init 입력해서 깃 레포지토리를 생성하고

깃허브에 직접 wetube-reloaded 레포지토리를 만들어준다

해당 레포지토리의 링크를 복사해서 터미널에 아래와 같이 작성해준다.

   git remote add origin 복사한URL

그러면 이제 git 이 wetube 폴더에서 일어나는 변경사항을 알려줄 것임!

 

npm init을 입력해서 package.json 파일을 만들어준다.

터미널에 쭉 뜨는 내용(이름, 라이센스, 레포지토리 주소 등...)이 맞는지 확인하고 나면 package.json 파일이 완성된다.

파일 내에서 기본적으로 작성된 main이랑 script 는 필요 없어서 삭제해준다.

그리고 index.js 파일 생성해줌.

 

node js파일명 --> 이 방법으로도 js파일을 실행시킬 수 있다

이번 프로젝트에서는 package.json으로 실행 해 줄것이다

package.json 안에 main --> 내가 만들고 배포한 package를 다른 사람들이 설치하면 main을 사용한다(이번 프로젝트에서는 필요없음)

 

package.json 안에 scripts를 만들어 준다

scripts 는 실행하고 싶을 것을 말한다 즉, scripts안에 실행할 것을 적어준다

ex) scripts={
"win": "node index.js" // win이 들어간 자리에 이름은 자유롭게 지어줄 수 있다
}

 

그 후 npm run start 로 실행시킬 수 있다  (package.json이 존재하는 폴더 한정)

 

---

Express 설치하기

 

npm i (install 써도 됨) express 를 터미널에 입력해서 Express 패키지를 다운로드 받는다
node_modules, package-lock.json 파일이 생성된다
node_modules 에는 npm으로 설치한 모든 패키지가 저장된다
express 는 혼자 작동되지 않기에 다른 패키지가 필요하다
node_modules 안에 express 안에 존재하는 package.json안에 dependencies는 express가 작동되기위해 필요한 패키지들을 나타낸다
express를 설치하는데 의존하고 있는 패키지가 있기 때문에 npm i express를 하면 그것들도 함께 설치된다
npm i express 를 했을 때 npm 이 알아서 dependencies에 express를 추가해준다

 

다음으로 넘어가기 전에 node_modules 폴더와 package-lock.json 파일 삭제하기

package.json 내에 dependencies로 express 있는 것 확인

 

---

 

Dependencies 이해하기

 

터미널에 npm i 를 입력하면 방금 삭제한 node_modules 폴더와 package-lock.json 파일이 다시 생긴다.

이는 npm이 package.json을 보고 dependencies를 찾은 후 그 안의 모듈을 알아서 설치해준 것!

package.json은 우리 프로젝트를 동작시킬 때 필요한 모듈들이 어떤 건지에 대한 정보를 담고 있다.

 

package-lock.json 은 내 패키지들을 안전하게 관리해준다.

패키지가 수정되었는지 버전 숫자들을 직접 입력할 필요 없이 npm이 알아서 처리해준다.

 

+ node_modul 폴더가 github에 올라가지 않도록 숨겨보기

.gitignore 파일을 생성하고 그 안에 /node_modules 를 입력한다

그러면 node_modules 폴더를 업로드하지 않게 된다.

 

+주의사항: npm install을 할 때는 에러 방지를 위해 package.json 창을 꼭 닫고 실행할 것!

(npm이 자동으로 package.json을 수정하는 것을 막기 위함임)

 

[요약]

• dependencies는 프로젝트를 구동시키는데 필요한 모듈들이다.
• 다른 사람들에게 node_modules 폴더를 보낼 필요 없다. package.json 파일을 가지고 npm.i 를 하면 npm이 dependencies에 있는 모든 것을 설치해준다.

 

---

Express 사용하기

 

index.js에서 작성

const express = require("express");

const app = express();

 

The Tower of Babel

 

Babel은 자바스크립트 컴파일러이다.

babel은 우리가 작성한 최신 JS를 컴파일 해준다. 즉, nodeJS가 JS를 이해할 수 있도록 변환시켜준다.

 

 자바스크립트에는 아직 nodeJS가 이해하지 못하는 최신 코드가 있는데,

이를 해결하는 방법으로는

1. nodeJS 가 이해하는 자바스크립트만 쓰거나,

2. babel 을 사용하는 것이다.

 

nodeJS 에서 사용 가능한 babel 설치하기

 

터미널에 아래 내용을 입력해서 babel 을 설치한다.

npm install --save-dev @babel/core

 

package.json 은 그냥 텍스트 파일이고, 모든 파일은 node_modules 폴더에 설치된다

package.json 내에 dependencies와 devDependencies 가 구분되어 있는 것은

어떤 패키지가 무슨 일을 하는지 알려주는 것이다.

devDependencies는 개발자에게(만) 필요한 dependencies이다.

 

정리하자면 예제에서

하나는 프로젝트를 실행하기 위해 필요한 dependencies 이고 (자동차를 움직이는 데 필요한 가솔린 같은 것)

하나는 개발자에게 필요한 devDependencies 이다 (운전을 더 잘하려면 음악이 있어야 하는 것과 비슷함)

 

"dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10"
  }

 

여기서 중요한 것은 쳐야 하는 명령어가 다르다는 것이다.

npm install --save-dev @babel/core 에서 --save-dev를 지우면

devDependencies 안의 내용이 dependencies로 이동해버린다. 치명적이지는 않지만 주의할 것.

 

이제 babel의 설정 파일 (babel.config.json) 을 만들어준다.

그리고 해당 파일 안에 아래 코드를 입력한다 (babel 설명서 그대로 진행)

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

그리고 devDependencies에 추가하기 위해 

npm i @babel/preset-env --save-dev 를 실행해준다.

 

참고로 preset은 babel을 위한 거대한 플러그인이다.

플러그인 중에서도 smart preset이기 때문에 preset-env이 가장 유명하다

이 preset을 사용하면 최신 자바스크립트 구문을 사용할 수 있게 해준다. 바로 내가 찾던 것!

 

babel 사용하기

 

여기서는 babel을 직접 입력해서 사용하지 않고,  package.json에 babel로 컴파일하는 scripts를 만들어준다.

그리고 이걸 위해 nodemon을 사용한다.

 

그 전에 설명서에 나와 있는 @babel/node 를 설치한다.

 npm i @babel/node --save-dev

 

이제 win이라는 scripts 대신에 dev를 써주고,

node index.js 대신에 babel-node를 써서 작성해준다 (@bable/node를 설치했기 때문에 해당 명령어 사용 가능)

"scripts": {
    "dev": "babel-node index.js"
  },

 

index.js 에 작성한 내용대로 npm run dev를 해주면 결과값이 나오는데,

수정할 때마다 다시 run 해줘야 한다는 점이 번거롭다.

ex) hej i am jia 라고 바꾸면 다시 run 해서 반환해야 확인 가능

그래서 nodemon을 사용해보는 것임!

// const express = require("express"); 최신 문법으로 바꾸면 ->
import express from "express";

console.log("hejj");

// npm run dev ---> hejj

 

nodemon은 우리가 만드는 파일이 수정되는 걸 감시해주는 패키지이다.

파일이 수정되면 nodemon이 알아서 재시작을 해준다. (그러면 npm run dev를 계속 실행할 필요가 없어짐)

그렇다면 nodemon을 설치해보자!

npm i nodemon --save-dev

 

그리고 scripts 중 babel-node 앞에 nodemon --exec 를 작성해준다.

{
  "name": "wetube",
  "version": "1.0.0",
  "description": "The best way to watch videos.",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jangjia01234/wetube-reloaded.git"
  },
  "scripts": {
    "dev": "nodemon --exec babel-node src/server.js"
  },
  "author": "Jia.J<jangjia01234@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/jangjia01234/wetube-reloaded/issues"
  },
  "homepage": "https://github.com/jangjia01234/wetube-reloaded#readme",
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/node": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "nodemon": "^2.0.19"
  }
}

 

저장 후 npm run dev 실행!

 

 

그러면 위에 보이는 것과 달리 npm run dev 이후 콘솔이 종료되지 않는다

console.log("how are you?")로 수정하니 수정된 값을 바로 반영해서 보여준다. 편리하구만.ㅋㅋ

 

nodeJS가 아니라 babel-node 로 작성하고 있다는 점 기억하기! (최신 문법 반영)