[패스트캠퍼스] 국비지원 14일차 학습일지

Node.js

Node.js : Javascript 런타임, Javascript가 실행되는 환경을 의미한다.

 

• 브라우저 : 자바스크립트 코드 실행기
• Node js : 컴퓨터에서 자바스크립트 실행되는 환경, 컴퓨터를 제어하면서 개발할 때 도움을 받고 있다.

 

 

브라우저에서 실행하기 전에 html, css, javascript로 변환하는 과정이 필요하다.

 

npm과 nvm

NPM : Node Package Manager, 전 세계 개발자들이 만든 다양한 기능 (패키지, 모듈)을 관리한다.

 

 

• LTS : Long Term Supported, 짝수 버전을 의미하고 안정적이며 신뢰도가 높다. 권장되는 버전
• 홀수 버전은 최신 버전을 의미하고, 변경사항이 많고 안정적이지 않다.

 

명령어 nvm을 이용하여 node js version을 관리할 수 있다. (프로젝트가 version에 영향을 받는 경우가 많기 때문이다.)

powershell에서 진행하면 된다.

 

 

😊 node js version 관리하는 nvm 명령어 모음

 

nvm ls // node js version check
nvm use 사용하고자 하는 version
nvm uninstall 제거하고자 하는 version
nvm install 설치하고자 하는 version

 

npm 이용하여 새로운 프로젝트 생성하기

지금까지는 open live server를 이용하여 프로젝트를 생성하였는데, 이제부터는 node js를 이용하여 컴퓨터 서버를 이용하여 프로젝트를 생성할 것이다. (요즘 프론트엔드 개발 트랜드)

 

 

😊 npm 명령어 모음

 

npm 이용하여 새로운 프로젝트를 생성하는 과정

1. 새로운 프로젝트를 생성한다.
2. node modules를 설치한다.
3. parcel package를 설치한다. * 개발용 서버 설치하기
4. lodash를 설치한다.
5. index.html와 app.js 생성하기.

6. package.json에서 scripst에 dev와 build를 추가한다.
7. npm run build를 이용하여 dist 생성하기.
8. npm run dev를 이용하여 프로젝트를 띄운다.

 

 

• 개발용 의존성 패키지 : 오직 개발할 때만 필요하다. 웹 브라우저 실행 시에는 필요하지 않는다. (예) parcel-bundler
• 일반 의존성 패키지 : 웹 페이지에서 동작시키는 용도이다. (예) lodash

• package-lock.json : 자동적으로 관리
• package.json : 직접적으로 관리, 내부에서 사용되는 패키지 정보 저장한다.

 

npm init -y // 새 프로젝트 생성하기.
npm install // node_modules 설치하기.

npm install parcel-bundler -D // devDependencies 설치하기. * 개발용 의존성 패키지
npm install lodash // dependencies 설치하기. * 일반 의존성 패키지

npm run build // dist 추가하기.
npm run dev // 새 프로젝트 띄우기.

 

 

{

  "name": "02-js-essentials",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "dev": "parcel index.html",

    "build": "parcel build index.html"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "parcel-bundler": "^1.12.5"

  },

  "description": ""

}

 

 

  // scripts에 dev와 build 추가하기.
  
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },

 

 

 

버전 무시하기 위하여 .gitignore 파일을 생성하여 다음과 같은 코드 작성하기.

 

// .gitignore

.cache/
dist/
node_modules/

 

 

 

 

유의적 버전

숫자 3개 + 마침표 이용 : Major.Minor.Patch

 

• Major : 기본 버전과 호환 X
• Minor : 기본 버전과 호환 O 추가된 버전
• Patch : 기본 버전과 호환 O 수정된 버전

 

^Major.Minor.Patch : Update를 통한 Major, Minor, Patch 버전을 최신 버전으로 만듦. (Major version 안에서 가장 최신으로 업데이트)

앞에 없애면 npm update lodash를 실행해도 갱신되지 않는다.

 

 

JS 가져오기 및 보내기

export default를 이용하여 내보낼 수 있고, import를 이용하여 가져올 수 있다.