유튜브 클론코딩[INTRODUCTION, SETUP]

What is NodeJS

• NodeJS : 브라우저 밖에서 돌아가는 자바스크립트

• 브라우저에서 자바스크립트를 분리해서 NodeJS를 만듦.

What is NPM

• npm : nodejs package manager

• npm은 기본적으로 nodeJS와 같이 설치된다. 그래서 nodeJS를 설치하면 npm을 바로 사용할수가 있다.

• yarn 이라는 패키지 매니저도 있다. npm과는 거의 차이가 없다.

• node 명령어는 거의 쓰지않고 대부분 npm 명령어를 쓴다.

• npm으로 다른 사용자가 만든 패키지와 공유 가능하다.

• 예를들어 npm i 패키지 명령어로 다른 사용자가 만든 패키지를 다운받을 수 있다.

Your First NodeJS Project

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

• NodeJS인 경우 파일의 이름은 package.json이어야 한다.

• 작업폴더(wetube)에 git repository를 만든다.

  1. 터미널에서 git init
  2. 깃헙사이트에서 repo 생성(여기서 이름은 wetube-reloaded로 함)
  3. url복사
  4. 터미널에서 git remote add origin [복사한 url]
  5. npm init => 기본 package.json만들기
  6. package.json에서 main은 프로젝트의 대표 파일을 나타낸다. 기본으로 index.js로 설정되어있다.
  7. index.js파일을 생성후 console.log("HI")를 입력한다.
  8. 터미널에서 node index.js를 입력하면 index.js파일이 실행된다. 하지만 node를 사용하는 방법으로 실행시키지 않도록 한다. 대신 코드를 package.json으로 실행한다.
  9. package.json에 아래와 같은 코드를 입력한다.

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

  10. 터미널에서 npm run win를 입력하면 index.js가 실행되는걸 ("HI"가 출력) 볼 수 있다. 물론, 프로젝트 폴더내 터미널에서 입력해야 한다(package.json와 같은 위치).

Installing Express

1. 터미널에서 npm install express또는 npm i express입력

2. node_modules 폴더가 생겼다. 이 폴더에는 npm으로 설치한 모든 패키지가 저장된다.

3. express 패키지는 사용하려면 다른 패키지들도 필요하다. express폴더내의 package.json파일에 접근해보면 dependencies가 있는데 이것은 express가 실행되기위한 패키지 목록이다.
   

4. npm i express를 실행하면 express 패키지뿐 아니라 express가 실행되기위해 필수적인 패키지들(여기서는 dependencies에 있는 패키지들) 또한 다운받는다.

• express 패키지를 사용하는 방법:

  1. index.js 파일에 들어가서

  2. 다음을 입력한다.

     const express = require("express");
const app = express();

Understanding Denpendencies

• node_modules와 package_lock.json 파일을 삭제를 해보자.
  

• 터미널에 npm i를 입력하면 다시 생긴다.
  

  • 주의할 점 : npm i실행하기 전에 열려있는 package.json파일을 저장하거나 닫고 실행한다. 그렇지 않으면 저장하기 전 파일기준으로 실행되고 package.json 파일도 이전상태로 수정된다.

• npm i를 입력하면 기존의 package.json 파일의 dependencies에 있는 패키지를 설치한다. 즉, 용량이 큰 node_modules 폴더를 업로드 하지않고, index.js(main파일)과 package.json 파일만 공유하면 나머지는 공유가능해 진다. => .gitignore파일을 생성하여 node_modules폴더를 추가하자.

• package_lock.json 파일은 npm i로 패키지를 다운할때 각 패키지별로 똑같은 버전을 다운 받을수 있게 해주는 파일이다. 그러니 본인과 똑같은 패키지를 공유하고자 할때 package_lock.json파일까지 공유해줘야 한다. package_lock.json파일은 해시코드로 묶여있기 때문에 수정할 경우 오류를 야기시키니 말 그대로 잠겨있는 파일이라 할 수 있다.
  

The Tower of Babel

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

  • NodeJS는 최신 JS문법을 이해못하는데 그럴때 필요한게 Babel이다.

  • Babel은 최신 JS코드를 구식 문법으로 자동으로 바꿔준다.

• Babel 사용법:

  https://babeljs.io/docs/en/usage

  1. 설치
     

     • 여기서 --save-dev 옵션은 바벨 패키지를 dependencies말고 devDependencies에 저장하라는 의미이다.

       

     • @babel/preset-env은 바벨의 사전 설정 플러그인 중 하나이다.

     • package.json은 단순 텍스트이므로 바벨 패키지가 dependencies에 있어도 결과는 똑같다. 다만 개발자에게 명시적으로 알려주기 위해 devDependencies에 입력하는 것이다.
       

     • dependencies나 devDependencies나 결국 node_modules폴더 내에 저장되는건 동일하다.

  2. babel.config.json파일 생성 후 다음 코드입력

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

  3. 사용방법
     

     • code에 작성한 코드를 넣으면 구식 형태의 코드로 반환된다.

  4. babel-node

     • 직접하기에 번거롭다면 package.json에 바벨로 컴파일하는 스크립트를 만들면 된다. babel-node는 Node.js CLI와 정확히 동일하게 작동하는 CLI로, 실행하기 전에 Babel 사전 설정(babel.config.json) 및 플러그인으로 컴파일한다.

     • 단, babel-node는 메모리에 캐시가 저장되기 때문에 메모리 사용량이 많아 불필요하게 무거워 진다. 또한 전체 앱을 즉석에서 컴파일해야 하므로 항상 시작 성능 저하를 경험하게 되므로 생산용으로 사용하면 안된다.

     • npm install --save-dev @babel/node

     

     • scripts를 다음과 같이 수정한다.

     

     • @babel/node를 설치했기 때문에 babel-node 라는 명령어를 쓸 수 있다.

     • 이제 npm run dev를 실행하면 컴파일시 바벨이 자동으로 적용된다.
       

     • 하지만 index.js 파일안의 코드를 수정할때마다 npm run dev 명령어를 사용해서 재시작해야한다. 이런 과정을 생략하고 싶을때 Nodemon을 사용한다.

Nodemon

https://github.com/remy/nodemon/

• Nodemon설치

  • npm i nodemon --save-dev
    

• scripts를 수정한다.
  

• npm run dev명령어를 실행후 index.js 안의 코드를 수정해본다.
  

  • HI2 => HI 로 변경

• 만약 babel-node은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치파일이 아닙니다 라고 오류가 뜨면 scripts를 아래와 같이 변경