Node.js 정리

현성·2023년 11월 24일

Node.js 란 ?

Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.
JavaScript 런타임이란 프로그래밍 언어가 동작하는 환경을 의미합니다.

즉, 브라우저에서 작동하는 JavaScript코드를 컴퓨터에서도 작동하게 해주는 프로그램입니다.

npm

Node.js를 다운받으면 npm이란 것이 같이 설치가 되는데
npm(Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는
시스템입니다.
npm을 통해 우리는 라이브러리를 스크립트로 연결하지 않고 명령어로 설치하여 사용할 수 있습니다.
그렇게 되면 관리 효율 증가와 손쉬운 기능 고도화라는 장점이 있습니다.

이제 npm을 사용하여 프로젝트를 시작하는 방법에 대해서 설명하겠습니다.

개발툴(vscode)을 열고 터미널을 연 후 npm init을 입력하면 초기 설정에 대한 질문과 함께 초기화가 진행됩니다. 모든 질문에 기본값을 원한다면 npm init -y로 같은 결과를 얻을 수 있습니다.
npm init을 입력하면 프로젝트 디렉토리에 package.json파일이 생기는 것을 확인할 수 있는데 이 파일에는 우리의 프로젝트 정보와 후에 설치할 라이브러리들의 정보를 확인할 수 있습니다.

라이브러리 설치 & 연결

라이브러리 설치는 npm install (라이브러리 명)으로 하고 연결된 자바스크립트 파일에
import (변수명) from '(라이브러리 명)'으로 연결하여 사용할 수 있습니다.
라이브러리를 설치하면 우리의 프로젝트 디렉토리에 node_modules폴더와 package-lock.json파일이 생성됩니다. node_modules는 우리가 설치한 모듈(패키지)을 담고 있어 많은 라이브러리를 사용한 프로젝트라면 용량이 커질 수 있습니다. 그렇기 때문에 버전관리를 하지않는 것이 일반적입니다. 그 방법은 프로젝트 폴더에 .gitignore파일에 해당 폴더를 추가해주면 됩니다.
그 후에 node_modules가 없는 프로젝트에서 개발을 시작할 때 npm install 명령어를 통해 우리가 사용하려는 패키지들을 다시 설치할 수 있습니다.

parcel

parcel은 여러 가지 패키지들을 실제 웹사이트에 올라갈 수 있는 하나의 구조로 묶어주는 역할을 하는
번들러입니다.
이 parcel의 설치 방법은 패키지를 설치할 때와는 조금 다릅니다.

npm install parcel --save-dev

npm install --save-dev parcel

npm install -D parcel

세 가지 방법 모두 같은 결과를 내게 됩니다.

parcel 개발 서버 실행과 빌드

package.json과 루트 디렉토리의 index.html에 연결할 자바스크립트 파일명을 잘 명시하고
index.html의 script태그의 속성에 type="module"을 추가해줍니다.
그리고 package.json의 코드를 아래의 사진처럼 작성합니다.
(scripts 부분의 dev와 build가 중요합니다.)