Node.js와 NPM - by. UXKM

요약 설명

Gulp는 다른 프론트엔드 워크플로우 자동화 도구와 마찬가지로 Node.js & NPM ecosystem에 의존합니다.
따라서 Gulp를 설치하기 위해 반드시 Node.js를 우선 설치해야 합니다.

2.2.1. Node.js

노드 공식 사이트에는 노드를 다음과 같이 설명하고 있습니다.

요약 설명

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경으로, 서버 사이드에서 JavaScript를 실행할 수 있게 해줍니다. 이를 통해 비동기적이고 이벤트 기반의 서버 사이드 프로그래밍을 할 수 있으며, 네트워크 응용 프로그램 개발 등 다양한 용도로 활용됩니다.
Node.js는 자바스크립트로 서버를 구축하고 관리하는 간단하고 효율적인 방법을 제공합니다.

Node.js의 특징

Node.js는 웹 서버를 비롯한 다양한 서버 측 응용 프로그램 개발에 사용되며, JavaScript를 사용하여 전체 스택의 웹 애플리케이션을 개발할 수 있게 해줍니다.

  1. 비동기 이벤트 기반: I/O 작업을 비동기적으로 처리하여 여러 작업을 동시에 처리할 수 있습니다. 이는 Node.js가 대규모 데이터 처리나 실시간 애플리케이션에 적합하게 만듭니다.
  2. 단일 스레드: 단일 스레드 모델을 기반으로 하되, 이벤트 루프를 통해 여러 작업을 동시에 처리할 수 있습니다.
  3. 모듈 시스템: CommonJS 모듈 시스템을 따르며, 모듈 간의 코드를 재사용하기 쉽게 해줍니다.
  4. 간편한 패키지 관리: npm(Node Package Manager)을 통해 다양한 패키지를 손쉽게 관리하고 사용할 수 있습니다.
  5. 확장성: 비동기적인 자연으로 인해 대규모 애플리케이션에 적합하며, 클러스터링과 로드 밸런싱을 통해 확장성을 높일 수 있습니다.

Node.js 설치

node.js 사이트에 접속하여 왼쪽 안정적, 신뢰도 높음을 클릭하여 설치 파일을 다운로드 합니다.

node.js 사이트
https://nodejs.org/ko/

다운로드 한 설치 파일을 실행하여 Node.js 설치 마법사를 띄운 뒤 Next를 클릭합니다. 설치 과정 모두 Next만 클릭하면 됩니다.

Node 설치 마법사 실행

라이선스에 동의 후 모두 Next를 클릭합니다.

Node.js 라이선스 동의

Node.js가 설치될 위치를 지정합니다. 보통 Program Files에 설치합니다. Next를 클릭합니다.
다른 폴더에 설치를 원할 경우 원하는 폴더 위치로 변경하면 됩니다.

Node.js 설치 폴더 설정

사용자 정의 설정 화면입니다. 따로 변경할 내용이 없기에 Next를 클릭합니다.

Node.js 사용자 정의 설정

기본 모듈용 도구의 설치 여부를 묻는 화면입니다. 설치 할 필요가 없기에 Next를 클릭합니다.

Node.js Tools for Native Modules

여기까지 설치할 준비가 완료되면 Install을 클릭하여 설치를 진행합니다.

Node.js 설치

Node.js 설치 중

설치가 완료되면 Finish를 클릭하여 설치 마법사를 종료합니다.

node.js 설치 종료

Node.js 설치 확인

설치가 정상적으로 완료되었는지 확인합니다.
터미널에서 아래 명령을 실행 입력합니다.

node.js 설치 확인

Node.js가 정상적으로 설치 되었다면 위처럼 노드의 버전이 표시됩니다.

2.2.2. NPM

요약 설명

Node Pacackage Manager. 이하 npm은 이름 그대로 노드 패키지 매니저입니다.
세상에는 많은 자바스크립트 프로그래머들이 있고, 그들이 유용한 자바스크립트 패키지들을 이미 만들어 두었고, 그런 코드들이 공개되어 있는 것이 바로 npm입니다.
npm은 Node.js 생태계에서 중요한 역할을 하며, 개발자들이 라이브러리와 모듈을 효율적으로 활용하여 프로젝트를 개발할 수 있도록 도와줍니다.

npm에 업로드된 노드 모듈을 패키지라고 부릅니다. 모듈이 다른 모듈을 사용할 수 있는 것처럼, 패키지도 다른 패키지를 사용할 수 있습니다. 이러한 관계를 의존 관계라고 합니다.

npm의 주요 기능

npm을 사용하면 개발자들은 프로젝트에 필요한 다양한 라이브러리와 모듈을 쉽게 설치하고 관리할 수 있습니다.

  1. 패키지 설치: npm을 사용하여 프로젝트에 필요한 패키지를 설치할 수 있습니다. 이를 통해 외부 라이브러리나 모듈을 프로젝트에 쉽게 통합할 수 있습니다.
  2. 의존성 관리: 프로젝트에 사용된 패키지의 의존성을 자동으로 관리합니다. 즉, 특정 패키지를 설치할 때 해당 패키지가 의존하는 다른 패키지도 함께 설치됩니다.
  3. 버전 관리: npm은 패키지의 버전을 관리하고 다양한 버전의 패키지를 사용할 수 있도록 지원합니다. 이를 통해 프로젝트가 특정 버전의 패키지에 의존할 수 있습니다.
  4. 스크립트 실행: npm을 사용하여 프로젝트에 정의된 스크립트를 실행할 수 있습니다. 이를 통해 테스트 실행, 빌드 프로세스 등을 자동화할 수 있습니다.
  5. 패키지 공유: npm 레지스트리를 통해 개발자들은 자신이 개발한 패키지를 공유할 수 있습니다. 이를 통해 커뮤니티와 협업하여 패키지를 공유하고 재사용할 수 있습니다.

앞으로 Gulp를 세팅하기 위해 npm을 활용하여 많은 패키지를 설치해야 합니다.
실제 패키지 설치에 앞서 npm을 어떻게 사용하는지 간단하게 알아봅니다.

npm을 이용한 확장 모듈(패키지) 설치

확장 모듈을 설치하기 위해 터미널에서 npm install이라는 명령어를 사용해야 하고, npm install 명령어에는 지역(local) 설치와 전역(global) 설치 옵션이 있습니다.
옵션을 별도로 지정하지 않으면 지역으로 설치됩니다.

지역(local) 설치

현재 폴더에 패키지를 설치합니다. 지역(local)으로 설치된 패키지는 해당 프로젝트에서만 활용됩니다.
노드 모듈은 ./node_modules에 그리고 실행파일들은 ./node_modules/.bin에 설치됩니다.

전역(global) 설치

모든 프로젝트가 공통으로 사용하는 패키지는 전역(global)에 설치합니다.

전역 설치 경로

  • macOS의 경우
    /usr/local/lib/node_modules
  • 윈도우의 경우
    c:\Users\%USERNAME%\AppData\Roaming\npm\node_modules
  • 정확한 설치 경로를 확인하려면 터미널에서 아래 명령을 실행합니다.
    전역 설치 경로 확인

설치된 확장 모듈(패키지) 관리

모듈 설치 후 최신 버전에 대한 업데이트나 필요없는 모듈 삭제 등의 관리가 필요합니다.

모듈 업데이트

설치 되어있는 모듈에 대한 버전 업데이트를 할 수 있습니다.

특정 버전으로 모듈 설치 및 업데이트

모듈을 특정 버전으로 설치하거나 이미 설치되어있는 모듈을 특정 버전으로 업데이트 할 수 있습니다.
버전을 특정하지 않으면 항상 최신 버전으로 자동 설치되는데 해당 모듈의 최신 버전이 버그가 많고 호환성이 떨어지는 경우 임의로 몇 단계 낮은 버전의 모듈을 설치하는 경우가 종종 있습니다.

모듈 정보 확인

패키지의 세부 정보를 파악하고자 할 때 사용하는 명령어 입니다.
전역(global) 또는 지역(local)으로 설치가 되지 않은 패키지의 정보 확인도 가능하며, 만약 패키지가 npm에 등록되어있지 않다면 404에러 메시지를 출력합니다.

설치된 모듈 삭제

설치한 모듈을 삭제할 수 있습니다.

나머지 npm 명령어 확인

터미널에서 npm 명령어를 실행하면 npm으로 활용할 수 있는 모든 명령어를 확인할 수 있습니다.

npm 명령어 확인