Node.js 기초

📚 패트스캠퍼스 데브캠프 프론트엔드 5주차 학습 내용을 정리한 내용입니다.
📚 잘못된 정보는 댓글로 알려주시면 정말 감사합니다!

Node.js

Node.js는 Chrome V8 자바스크립트 엔진으로 만들어진 자바스크립트 실행환경입니다. 우리는 Node.js를 통해 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있습니다!!

기본적으로 웹브라우저에서는 html, css, js만 동작할 수 있는 환경입니다. 하지만 순수하게 3가지 파일로 작업하게되면 개발하는 과정이 비효율적일 수 있습니다. 이에 도움을 주는 여러가지 모듈을 설치해서 효율적으로 개발을 진행할 수 있습니다.
하지만 이러한 모듈들은 브라우저 환경에서 직접 사용할 수 없으므로, Node.js 환경에서 도움을 받아 개발을 진행하고, 추후 브라우저에서 동작할 수 있는 형태로 변환하는 작업을 진행하게 됩니다.

🔗 설치 : https://nodejs.org/en
LTS(Long Term Suppoted) 버전 - 장기적으로 안정되고 신뢰도가 높은 버전

NVM

Node Version Manager, NVM은 Node.js의 버전을 쉽게 전환할 수 있도록 도움을 주는 관리 시스템입니다. 이를 통해 여러 버전을 설치해서 사용할 수 있습니다.👍

🔗 설치 : https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating

사용법

# 설치된 node js 확인가능
nvm ls

# Node.js 설치
nvm install 버전

# 사용할 버전 설정
nvm use 버전

# 특정 버전 삭제
nvm uninstall 버전

# 더 많은 명령어 확인
nvm --help

NPM

Node Package Manager, NPM은 전 세계의 개발자들이 만든 패키지(모듈)들을 관리해주는 시스템입니다.

프로젝트 생성

• npm init -y : NPM 으로 패키지를 관리할 수 있는 상태로 변경
• npm install 패키지명 -D : 패키지를 설치
  • node_modules 폴더가 자동으로 생성되면서 해당 패키지에 설치된 다른 패키지 들이 함께 설치 된 것을 확인 가능
  • -D 옵션 : 개발 환경에서만 필요한 패키지를 설치할 때 붙일수 있는 옵션

개발 서버 실행과 빌드 (feat. parcel-buldler)

앞서 개발에 도움을 주는 여러 패키지들은 실제 브라우저 환경에서는 동작하지 않으므로, 별도의 변환 작업이 필요하다고 했습니다. 이때 이 변환작업을 도와주는 것이 번들러의 역할입니다.

번들(Bundle)은 프로젝트 개발에 사용한 여러 모듈(패키지)를 하나로 묶어내는 작업을 의미합니다.

실습 시 npm install 명령을 통해 프로젝트에 parcel-bundler를 설치했고 parcel index.html 명령어를 통해 개발 서버를 실행할 수 있습니다. 하지만 터미널에서서는 parcel 명령어를 모르기 때문에 package.json에 별도의 설정을 해준 뒤 사용할 수 있습니다.

보통 아래와 같이 설정하며 터미널에서는 npm run dev 명령을 통해 개발 서버를 실행할 수 있습니다.
그리고 build 스크립트를 실행하면 웹 브라우저에서 동작할 수 있는 형태로 변환하는 작업이 일어나게 됩니다.

{
  "scripts" : {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
}

개발에 필요한 라이브러리 사용하기

개발에 필요한 모듈들은 import 방식을 통해 사용할 수 있습니다. 이때 경로를 따로 지정하지않아도 node_modules 경로에서 찾게되므로 모듈명만 적어주면 됩니다.

유의적 버전(SemVer)

Semantic Versioning, 유의적 버전은 버전에 의미를 부여한 것입니다.
node --version 명령을 통해 버전을 확인하면 숫자.숫자.숫자 형태인 것을 확인할 수 있는데, 각 숫자는 의미하는 바가 다음과 같습니다.

만약 버전앞에 ^ 기호가 함께 표시되어 있다면, 이는 Major 버전 안에서 가장 최신 버전으로 업데이트 할 수 있음을 의미합니다. 예를 들어 package.json에 ^12.4.1 로 명시된 상태에서 패키지 저장소에 12.10.2 버전이 출시된 상태라면 npm install 진행 시 설치되는 버전은 12.10.2가 됩니다.

NPM 프로젝트 버전 관리시 유의사항

npm을 통해 프로젝트를 관리할때는 프로젝트 내부에서 사용되는 여러 패키지를 설치하게되고 이는 node_modules에 위치하게 됩니다. 이를 포함하여 번들링 과정에서 생기는 각종 결과물들은 따로 버전관리 대상이 아니므로 .gitignore 파일을 통해 버전 관리 대상이 아님을 지정해주는 것이 중요합니다!

🔗 .gitignore 파일 생성