[JavaScript] 위튜브 클론코딩(1) - NodeJS, NPM, Express, Dependencies, Babel, Nodemon

선영·2021년 11월 11일
1

JavaScript

목록 보기
13/27
post-thumbnail

2021.11.08~11.09 > #1.1~#1.4, #2.0~#2.4 수강
2021.11.16 > 수정

#1.3~#1.4 - NodeJS, NPM 란?

nodeJS

브라우저 밖에서 돌아가는 JS
nodeJS로 백엔드에서도 JS를 사용할 수 있다.

npm

nodeJS와 상호작용할 수 있게 해줌.
예를들면, nodeJS 패키지 다운로드 등...


SET UP

#2.0~#2.1 - NodeJS, Express

npm i

  • npm i 설치하고픈 pkg이름 -> pkg 인스톨

  • 터미널에 npm i express를 입력해서 Express를 인스톨 해주자.

  • pkg를 설치하면, 구성요소가 node-modules 폴더 안에 자동으로 설치된다.

  • package.json파일은 단지 text파일 일 뿐이다.
    우리가 필요한 모든것은 node-modules에 설치됨.

json

  • text contents에 ""(따옴표)와 ,(쉼표)를 활용한다.

  • 프로그래머가 파일에 정보를 저장하기 위한 방식중 하나.

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

  • 터미널에 npm init을 입력해주면 package.json에 정보를 채울 수 있다.

package.json>scripts

  • 아래예시 참고. 실행하고 싶은 모듈을 특정 scriptName으로 지정한 것.

  • 터미널에 npm run scriptName을 입력해주면 연결된 JS파일이 실행됨.

#2.2 - Dependencies

  • devDependencies는 개발자에게 필요한 것.

  • Dependencies는 프로젝트를 실행하기 위해 필요한 것.

  • package.json>dependencies에 필요한 정보가 다 있어서,
    우리는 npm i만 해도 관련 모듈을 설치할 수 있다.

  • 고로, 용량이 큰 node-modules 없이도 프로젝트 공유시 package.json(nodeJS 파일), index.js(일반적인 JS파일)만 보내주면 됨.

  • 주의// npm i를 할 땐, package.json을 꼭 닫거나 저장하자.
    그러지 않으면, npm이 자동으로 package.json을 수정한다.

  • package-lock.json은 우리의 패키지를 안전하게 관리해줌

  • package-lock.json을 우리의 팀원에게 같이 주면, npm i시, 정확히 똑같은 버전의 모듈이 설치될 것이다.

#2.3 - Babel

  • 우리가 작성한 최신JS를 사용할 수 있게 해준다.
    즉, nodeJS가 최신JS를 문제없이 이해하도록 변환해줌.

  • 개발자가 편리하기 위해 사용하는 pkg이므로, devDependencies에 해당

  • step1// babel 설정: 터미널에 touch babel.config.json 쳐서, babel이 해당폴더 찾아서 설정하도록 해주고, 필요한 pkg 설치.

  • step2// index.js파일에 babel을 사용하지 않고, 아래와 같이package.json>scripts로써 babel 컴파일하기.

"scripts": {
    "name": "babel-node index.js"
  }

step3// #2.4 - Nodemon

  • 우리가 만든 파일이 수정되는걸 감시해주는 pkg

  • 파일이 수정될때마다 nodemon이 자동으로 재시작해준다.

  • 개발자가 편리하기 위해 사용하는 pkg이므로, devDependencies에 해당


profile
Superduper-India

0개의 댓글