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를 사용하여 전체 스택의 웹 애플리케이션을 개발할 수 있게 해줍니다.
비동기 이벤트 기반 : I/O 작업을 비동기적으로 처리하여 여러 작업을 동시에 처리할 수 있습니다.
Node.js가 대규모 데이터 처리나 실시간 애플리케이션에 적합하게 만듭니다.
단일 스레드 : 단일 스레드 모델을 기반으로 하되, 이벤트 루프를 통해 여러 작업을 동시에 처리할 수 있습니다.
모듈 시스템 : CommonJS 모듈 시스템을 따르며, 모듈 간의 코드를 재사용하기 쉽게 해줍니다.
간편한 패키지 관리 : npm(Node Package Manager)을 통해 다양한 패키지를 손쉽게 관리하고 사용할 수 있습니다.
확장성 : 비동기적인 자연으로 인해 대규모 애플리케이션에 적합하며,
클러스터링과 로드 밸런싱을 통해 확장성을 높일 수 있습니다.
Node.js 설치
Node.js 공식 사이트에 접속한 후,
Node.js 다운로드 (LTS)를
클릭하여 설치 파일을 다운로드 합니다.
(LTS 버전이란? 안정성과 장기 지원이 필요한 프로젝트에서 사용하는, 공식적으로 장기간 유지보수가 보장된 신뢰할 수 있는 버전입니다.)
다운로드 한 설치 파일을 실행하여 node.js 설치 마법사를 띄운 뒤 Next를 클릭합니다.
설치 과정 모두 Next만 클릭하면 됩니다.
라이선스에 동의 후 모두 Next를 클릭합니다.
Node.js가 설치될 위치를 지정합니다. (보통 Program Files에 설치합니다.) Next를 클릭합니다.
다른 폴더에 설치를 원할 경우 원하는 폴더 위치로 변경하면 됩니다.
사용자 정의 설정 화면입니다. 따로 변경할 내용이 없기에 Next를 클릭합니다.
기본 모듈용 도구의 설치 여부를 묻는 화면입니다. 설치할 필요가 없기에 Next를 클릭합니다.
여기까지 설치할 준비가 완료되면 Install을 클릭하여 설치를 진행합니다.
설치가 완료되면 Finish를 클릭하여 설치 마법사를 종료합니다.
Node.js 설치 확인
설치가 정상적으로 완료되었는지 확인합니다. 터미널에서 아래 명령을 실행 입력합니다.
Node.js가 정상적으로 설치 되었다면 위처럼 노드의 버전이 표시됩니다.
2.2.2. NPM
요약 설명
npm(Node Package Manager)은 이름 그대로 Node.js의 공식 패키지 관리자입니다.
세상에는 수많은 자바스크립트 개발자들이 이미 유용한 패키지들을 만들어 공개해두었고,
이러한 코드들이 모여 있는 공간이 바로 npm입니다. npm은 Node.js 생태계에서 핵심적인 역할을 하며,
개발자들이 자바스크립트 라이브러리나 도구를 손쉽게 설치하고 관리할 수 있도록 도와줍니다.
또한, 개발자가 자신이 만든 패키지를 npm에 등록하고 배포할 수 있는 기능도 제공하여,
협업과 코드 재사용성을 크게 향상시킵니다. npm에 업로드된 노드 모듈을 ‘패키지’라고 부르며, 패키지는 다른 패키지를 사용할 수 있는데,
이와 같은 관계를 ‘의존 관계’라고 합니다.
이런 구조를 통해 개발자들은 다양한 오픈소스 모듈을 효율적으로 활용하여 프로젝트를 빠르고 안정적으로 개발할 수 있습니다.
npm은 Node.js를 설치하면 함께 자동으로 설치되기 때문에, 별도로 npm을 설치할 필요는 없습니다.
즉, 이미 Node.js를 설치했다면 npm 명령어를 바로 사용할 수 있으며, 다양한 패키지를 설치하거나 관리할 수 있습니다.
npm의 주요 기능
패키지 설치 및 제거
필요한 자바스크립트 라이브러리나 도구를 프로젝트에 설치하거나, 더 이상 필요 없는 패키지를 제거할 수 있습니다.
의존성 관리
package.json 파일을 통해 프로젝트에서 사용하는 모든 패키지의 이름과 버전을 자동으로 관리합니다.
패키지 업데이트
설치된 패키지를 최신 버전으로 쉽게 업그레이드할 수 있어, 보안이나 기능 개선을 반영할 수 있습니다.
스크립트 실행
npm run 명령어로 빌드, 테스트, 실행 등 반복 작업을 자동화할 수 있도록 설정할 수 있습니다.
패키지 배포 및 공유
직접 만든 패키지를 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으로 활용할 수 있는 모든 명령어를 확인할 수 있습니다.