💡 이 게시물은 node.js가 설치되었다는 가정 하에 작성된 게시물이다.
1. node.js란?
node.js에 대한 설명을 시작하기 전에 웹 브라우저에 대해 간단히 언급하면, 기존 브라우저에서는 자바스크립트 엔진이 인터프리터 방식을 사용하면서 코드 양이 증가할수록 성능이 저하되는 단점이 있었다.
그러나 구글은 빠른 속도를 제공하는 V8 엔진을 사용한 '크롬' 브라우저를 공개하고, 이후에 node.js가 등장하게 되었다.
따라서 node.js는 V8 자바스크립트 엔진으로 빌드된 실행 환경이다.
2. 프론트엔드 개발에서 node.js가 필요한 이유
1️⃣ 빌드 및 자동화 도구
node.js는 프론트엔드 개발에서 많이 사용되는 빌드 및 자동화 도구를 실행하는데 이상적이다. TypeScript나 SASS 같은 브라우저가 이해할 수 없는 언어의 전용 트랜스파일러나 여러 파일 및 모듈을 번들링하여 최적화된 하나의 파일로 생성하는 Webpack 같은 도구는 node.js 환경에서 동작하며, 이를 통해 코드를 번들링하고 최적화할 수 있다.
2️⃣ 프론트엔드 개발 환경 커스터마이징
react의 create-react-app이나 vue의 vue-cli를 사용하면 기본적으로 제공하는 개발 환경을 사용할 수 있다. 그러나 프로젝트 상황에 맞게 개발 환경을 세팅해야 하는 경우가 빈번하기 때문에 개발 환경을 직접 세팅하려면 node.js 환경에서 커스터마이징 할 수 있다.
3️⃣ NPM (Node Package Manager)
node.js는 NPM이라는 패키지 관리자를 제공한다. 프로젝트에서 다양한 라이브러리와 도구를 사용할 때 NPM을 통해 쉽게 관리할 수 있다.
3. 프로젝트 초기화
우선 하단의 명령어를 통해 새로운 디렉토리를 생성하고 해당 폴더로 이동한다.
mkdir 디렉토리명 && cd 디렉토리명하단 명령어를 통해 프로젝트명, 버전 등을 정보를 작성하고, 프로젝트를 생성한다. 기본 정보로 작성하고 싶다면 npm init -y 명령어를 작성하면 된다.
npm init프로젝트가 생성되면 해당 디렉토리 내에 package.json 파일이 생성되고, 하단과 같은 내용이 작성되어 있다. 하단 내용은 init 명령어를 통해 작성된 프로젝트 정보가 담긴다.
{
"name": "develop-environment",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",
"license": "ISC"
}
package.json 파일에 담긴 정보는 다음과 같다.
name: 프로젝트명 (필수값)version: 프로젝트 버전 정보 (필수값)description: 프로젝트에 대한 설명main: 노드 프로젝트의 시작점 경로 (프론트엔드 프로젝트일 경우 사용하지 않는다.)scripts: 프로젝트에 대한 명령어author: 작성자license: 권한
4. 프로젝트 명령어
프로젝트 명령어는 package.json 파일 내에 있는 scripts 에 작성된 명령어로 실행한다. 실행, 테스트, 빌드, 배포 등의 명령어를 작성할 수 있으며, 우선 기본적으로 작성되어 있는 test 명령어를 하단과 같이 터미널에 실행하면 다음과 같은 결과가 나온다.
Error: no test specified와 같은 에러메세지가 출력됐다. 이건 scripts 에 작성된 test 명령어가 실행됐기 때문이다.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}상단에 작성된 명령어는 echo 명령어로 Error: no test specified 에러메세지를 출력시킨 뒤 에러 코드 1을 던지면서 종료한다.
npm에서 제공하는 기본적인 명령어는 다음과 같다. (터미널에 npm을 작성하면 확인할 수 있다.)
기본적인 명령어가 아니여도 scripts 내에 추가할 수 있다. build란 명령어를 추가하고 해당 명령어를 실행하면 하단과 같은 결과를 확인할 수 있다.
"scripts": {
"build": "echo \"NPM RUN BUILD 실행\""
}
5. 프로젝트 내 패키지 설치
NPM을 통해 패키지를 설치하고 관리할 수 있다. npm install 명령어를 통해 프로젝트에서 사용할 패키지를 설치할 수 있다. 해당 프로젝트에 react를 하단 명령어를 통해 설치해보자.
npm install react다운로드가 완료되면 package.json 파일에 설치한 패키지 정보를 확인할 수 있다. react가 최신 버전으로 다운로드된 것을 확인할 수 있다.
"dependencies": {
"react": "^18.2.0"
}6. 정리
이번엔 NPM을 통해 프로젝트를 초기화하고 프로젝트 내에서 사용할 수 있는 명령어 작성 방법에 대해 알아보았다. 그리고 install 명령어를 통해 프로젝트 내에서 사용할 수 있는 패키지를 설치하는 방법에 대해 알아보았다. 다음엔 패키지 버전 표기법에 대해 알아보겠다.
