nodeJS 앱을 개발하기 위한 setup

설치목록

• Visual Studio Code
  • extensions 목록
    • ESLint
    • HTML CSS Support
    • JS CoderFormer: Javascript Refacotring & Code Automation
    • JS Refactor :: JS CodeFormer
    • Live Server
    • Prettier - Code formatter
• NodeJS
• GIT

package.json

• json이란?
  • 프로그래머가 파일에 정보를 저장하기 위해 만든 방식 중 하나
• package.json 이라는 파일을 하나 만드는 것으로 nodeJS 프로젝트를 시작할 수 있다
  • 시작점을 찍는 작업
  • nodeJS에서는 이 파일 이름을 꼭 소문자로 써줘야 함
• 우리가 만들고 배포한 package를 다른 사람이 설치하면 이 package.json에 저장된 main(속성명)을 사용하게 된다
  • 물론 main 값도 필수는 아님
• package.json 의 기능
  • scripts : 실행하고 싶은 것
    • nodeJS의 명령어를 넣어둘 수 있다
      • nodeJS로 index.js를 실행

    // package.json 파일의 scripts 부분
    "scripts": {
        "start": "node index.js"
    },

    • package.json 이 들어있는 파일 위치에서 'npm run start' 라고 명령어를 쓰면 해당 명령어가 실행됨
      • 꼭 package.json이 들어있는 파일에서 명령어를 써줘야 함

express

• Node.js를 위한 빠르고 개방적인 웹 프레임워크
  • 오픈소스 소프트웨어
  • 웹 애플리케이션, API 개발을 위해 설계되었다
  • Node.js가 Chrome V8 엔진을 이용해 javascript로 브라우저가 아닌 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이라 한다면,
  • Express는 이런 Node.js의 원칙과 방법을 이용해 웹애플리케이션을 만들기 위한 프레임워크(도구)라고 할 수 있다
    • 프레임워크의 특징으로서, 어플리케이션 개발에 필요한 각종 라이브러리와 미들웨어 등이 내장되어 있어 개발하기 편하고, 수많은 개발자들에게 개발 규칙을 강제하여 코드 및 구조의 통일성을 향상시킬 수 있다는 장점이 있다
• 설치하기 : 패키지를 설치할 해당 프로젝트 폴더 경로 > npm i express
  • i : install
  • 설치하면 package-lock.json 파일과 node_modules 폴더가 생김
• package-lock.json
  • 설치되는 패키지들의 정확한 버전정보를 저장함
  • 해당 프로젝트가 사용한 패키지들의 버전정보를 정확하게 저장 → 프로젝트가 정상적으로 실행될 수 있도록 정확한 환경을 설정해주는 역할. 아주 중요!
• node_modules
  • 얘는 npm으로 설치한 모든 패키지가 저장될 곳임(폴더)
  • 하지만 지워져도 상관없음. package.json 만 있으면 npm이 알아서 설치해줄 테니까
• 설치된 express 에도 package.json이 있음
  • dependencies 라는 속성이 있는데 → express가 작동되려면 필요한 패키지들을 의미
    • 해당 패키지의 package.json에서 의존하는 다른 패키지들을 명시해둠
      • 그러면 해당 패키지를 설치하면서 의존하는 다른 패키지들도 연쇄적으로 다운받게됨
  • devDependencies 라는 속성도 있는데 → node_modules에 설치되는 애들은 아님

Dependencies

• npm 은 알아서 package.json 을 보고 dependencies 를 찾아서 필요한 모듈들을 설치해준다
• package.json 의 중요성!
  • node_modules를 올릴 필요 없이 package.json만 공유함으로 상대가 모듈을 설치할 수 있게 할 수 있음
• package-lock.json 은 패키지를 안전하게 관리해줌

.gitignore

• git에 올릴 때 제외하기 위해 숨겨놓을 폴더

babel

• 자바스크립트 컴파일러
• 최신 자바스크립트를 nodeJS가 알아들을 수 있도록 컴파일 해줌
• 설치하기 : npm install --save-dev @babel/core
  • devDependencies 설치 리스트에 올라감!
    • package.json은 텍스트 파일일 뿐이기 때문에 우리가 알아보기 위해 분리된 것일 뿐이지, dependencies에 옮겨 넣어도 상관은 없다
    • devDependencies는 개발자에게 필요한 dependencies이다
• babel 설정을 위해 필요한 파일 ⇒ babel.config.json

dependencies VS devDependencies

• 프로젝트를 실행하기 위해 필요한 dependencies (전자)
• 개발자에게 필요한 devDependencies (후자)
  • 전자가 자동차를 움직이게 하기 위해 필요한 휘발유같은 거라면, 후자는 운전에 도움을 주는 음악같은 거라고 보면 됨
• 즉, devDependencies 는 개발 도구!
• babel이 babel.config.json 파일을 알아서 찾아보고 설정할 것임
  • preset : babel을 위한 엄청 거대한 플러그인
    그중에서도 가장 유명한 것이 @babel/preset-env임
    • smart preset : 이 preset을 사용하면 최신 자바스크립트 구문을 사용할 수 있게 해줌

Nodemon

// Babel 사용하기
require("@babel/core").transform("code", {
    presets : ["@babel/preset-env"],
});

• 현재 설치되어 있는 babel
  • @babel/core
  • @babel/preset-env
• 이제 설치할 것
  • babel/node
  • 설치 스크립트 : npm install @babel/node --save-dev
• babel로 컴파일하는 scripts를 만들기 위해 필요한 것→ Nodemon
  • 우리가 만든 파일이 수정되는 걸 감시해주는 패키지
  • 파일이 수정되면 nodemon이 알아서 재시작 해준다
• @babel/node 를 설치하고 이런 스크립트를 작성하는 이유는
  최신 자바스크립트 문법을 NodeJS에서 쓰기 위해서임
  • 즉, babel 을 사용해서 scripts로 최신 자바스크립트를 사용한 코드를 실행하도록 하고 싶음
  • 거기에 더해서, nodemon을 이용해 파일이 수정될 때마다 자동으로 스크립트를 실행시키고 싶음
• 원래의 실행 스크립트 ( package.json 파일의 scripts 부분)
  • "scripts": { "run": "node index.js" },
• babel을 사용한 실행 스크립트
  • @babel/node 를 설치했기 때문에 babel-node 명령어를 사용할 수 있다
  • "scripts": { "dev": "babel-node index.js" },
• Nodemon을 사용할 때
  • nodemon 설치

  npm i nodemon --save-dev

  • nodemon 사용 방법
    • --exec 옵션 뒤에 명령어 입력
    • (까먹을까봐 메모) 실행시에는 터미널에서 package.json 있는 폴더 경로에서 > npm dev start

  // package.json 파일의 scripts 부분 
  "scripts": {
      "dev": "nodemon --exec babel-node index.js"
  },

에러 - 'babel-node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

• 해결 : global 옵션으로 설치해주기

npm i @babel/node -g

출처

https://nomadcoders.co/wetube (노마드코더-유튜브 클론코딩)