Node.js에 대해 알아보자
Node.js란?
자바스크립트의 런타임이다. 기존에는 웹브라우저가 유일한 런타임이었기 때문에 웹브라우저 외에서는 사용할 수 없었다. 하지만 Node.js가 등장한 이후로는 어떤 환경에서도 자바스크립트를 실행 할 수 있게 되었다.
npm
Node.js를 설치하면 npm이라는 도구도 함께 설치된다. npm은 Node.js의 프로젝트 단위인 '패키지'를 관리하는 도구이다.
Node.js로 자바스크립트 실행하기
`파일명: sample.js`
console.log("hello");`터미널 창`
SSAFY@DESKTOP-QFN2D55 MINGW64 /d/React_study
$ node sample.js
Hellonode sample.js는 Node.js에게 sample.js를 실행하라는 명령이다.
Node.js 패키지
복잡한 프로그램을 만들기 위해서는 여러 개의 자바스크립트 파일이 필요하다. 하나의 프로젝트에서 여러 자바스크립트 파일을 Node.js를 이용해 실행할 때는 패키지 형태로 구성한다. 패키지는 Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위이다.
패키지 만들기
패키지를 생성하려면 npm(Node Package Manager)을 이용해야 한다.
npm init
npm init는 Node.js 패키지를 초기화하는 명령어이다. 초기화란 Node.js 패키지를 구성하는 데 필요한 최소한의 구성 요소를 자동으로 생성하는 과정이다.
package name 부분만 입력해주고 나머지는 공백으로 작성하자.
그러면 다음과 같이 package.json이라는 파일이 생성된다.
package.json은 패키지의 메타 정보를 저장하는 파일이다. Node.js는 package.json에서 패키지 정보를 확인하여 적절한 방식으로 프로그램을 가동한다.
패키지 스크립트 사용하기
Node.js 패키지의 package.json에는 scripts라는 항목이 있다. 이 scripts 항목은 복잡한 명령어를 간단한 명령어로 변경하는 일종의 매크로 기능을 지원한다. scripts항목을 수정하여 직접 사용해보자!
지금까지 sample.js를 실행하기 위해서는 terminal에 node 명령어와 함께 경로를 명시해야 했다. package.json의 scripts 항목을 사용하여 간단하게 sample.js를 실행해보자.
package.json의 scripts 항목에 "start"부분을 추가하자.
`파일명: package.json`
{
"name": "react_study",
"version": "1.0.0",
"description": "",
"license": "ISC",
"author": "",
"type": "commonjs",
"main": "sample.js",
"scripts": {
"start": "node sample.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
}그 다음 terminal에 npm run start를 입력하자.
npm run 명령은 뒤에나오는 스크립트를 실행한다. 즉, npm run start를 입력하면 package.json에 기록한 scripts에서 일치하는 명령어를 찾아 실행한다.
Node.js 모듈 시스템
모듈이란 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 말한다. 자바스크립트에서는 독립된 하나의 파일을 '모듈'이라고 부른다. 그리고 이러한 모듈을 사용하는 방법을 '모듈 시스템'이라고 한다.
ES모듈 시스템 (ECMAScript Module System)
ESM은 가장 최근에 개발된 모듈 시스템으로 React, Vue와 같은 최신 FE기술은 모두 ESM을 채택하고 있다.
ESM 사용 설정
Node.js는 기본적으로 CJS 모듈 시스템을 사용한다. 따라서 ESM 모듈 시스템을 사용하려면, package.json에서 설정을 변경해야 한다.
'파일명: package.json'
{
"name": "react_study",
"version": "1.0.0",
"description": "",
"license": "ISC",
"author": "",
"type": "commonjs",
"main": "sample.js",
"scripts": {
"start": "node sample.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"type": "module" // 이 항목을 추가하면, Node.js가 ESM을 사용하게 된다.
}설정을 변경하지 않고 ESM 문법을 사용하면 오류가 발생할 수 있다!!!
개별 내보내기
모듈이 필요한 이유는 특정 파일의 값이나 함수를 다른 파일에서 공유하기 위함이다. 특정 값이나 함수를 다른 파일에서 공유하려면, 먼저 해당 파일에서 내보내(export)는 공유 설정 작업이 선행되야 한다.
그럼 한번 직접 코드를 작성해서 export해보자!
`파일명: circle.js`
const PI = 3.141592;
function getArea(radius) {
return PI * radius * radius;
}
function getCircumference(radius) {
return 2 * PI * radius;
}circle.js에 선언한 한개의 상수와 두개의 함수를 내보낼 것이다. ESM에서는 다음과 같이 export 키워드를 변수나 함수 선언 앞에 붙이면 해당 값을 모듈에서 내보낼 수 있다.
`파일명: circle.js`
export const PI = 3.141592;
export function getArea(radius) {
return PI * radius * radius;
}
export function getCircumference(radius) {
return 2 * PI * radius;
}한번에 여러 값을 내보낼 때는 export를 다음과 같이 사용할 수도 있다.
`파일명: circle.js`
const PI = 3.141592;
function getArea(radius) {
return PI * radius * radius;
}
function getCircumference(radius) {
return 2 * PI * radius;
}
export { PI, getArea, getCircumference };이렇게 필요한 값이나 함수를 내보내면 이제 다른 모듈에서 불러와 사용할 수 있다.
개별 불러오기
ESM은 import문으로 모듈에서 값을 불러온다.
`파일명: sample.js`
import { PI, getArea, getCircumference } from "./circle.js";
console.log(PI, getArea(1), getCircumference(1));terminal에서 npm run start 명령어로 sample.js를 실행하면
위와 같은 결과값을 확인할 수 있다.
전부 불러오기
ESM에서는 import * as A from B 형식으로 모듈이 내보낸 값을 한번에 불러올 수 있다. sample.js에서 수정을 해보자.
`파일명: sample.js`
// 모듈 circle.js가 내보낸 값을 모두 불러와 변수 circle에 프로퍼티로 저장한다.
import * as circle from "./circle.js";
// circle.PI와 같이 점 표기법으로 특정 모듈에 접근한다.
console.log(circle.PI, circle.getArea(1), circle.getCircumference(1));
기본값으로 내보내기
ESM에서는 eport 키워드 다음에 default를 붙여 모듈의 기본값으로 내보낼 수 있다. 모듈의 기본값으로 내보내면 다른 모듈이 이 값을 불러올 때 다른 이름을 붙여도 상관없다.
circle.js를 다음과 같이 수정하자.
`파일명: circle.js`
const PI = 3.141592;
function getArea(radius) {
return PI * radius * radius;
}
function getCircumference(radius) {
return 2 * PI * radius;
}
export default { PI, getArea, getCircumference };라이브러리 사용하기
Node.js 패키지에서는 외부 패키지를 설치해 사용할 수 있다. 외부 패키지란 자신이 만든 node.js 패키지를 서버에 올려 다른 사람도 사용할 수 있도록 배포한 파일이다. 이러한 외부 패키지를 다른 말로 라이브러리라고 한다. 라이브러리는 프로그램 개발에 사용할 수 있는 기능들을 모아 모듈화 한 것이다. 예를 들어 'Loadash'는 배열, 객체를 다루는 데 필요한 복잡한 기능들을 단순한 함수 형태로 만들어 제공해준다.
Lodash
lodash는 JavaScript의 인기있는 라이브러리 중 하나이다. 보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게끔 하는데에 사용된다. JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용하다. 이러한 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 된다. 특히 FE 환경에서 많이 쓰인다.
라이브러리 설치하기
lodash를 사용하기 위해서 npm i lodash를 terminal에 입력하자. 모든 라이브러리를 이렇게 설치하는 것은 아니다. npmjs.com에서 검색창에 내가 원하는 라이브러리를 검색해서 설치 방법을 찾아보자
라이브러리 설치 이후 패키지의 변화
라이브러리를 설치하면 react_study 패키지에 세가지 변화가 일어난다.
- lodash 라이브러리를 저장하는 'node_modules'폴더가 생성된다.
- package.json에 lodash 라이브러리의 정보를 저장하는 dependencies 항목이 추가된다.
- 패키지 루트 아래에 package-kock.json이라는 파일이 생성된다.
node_modules
이 폴더는 라이브러리가 실제로 설치되는 곳이다.
node_modules 폴더에는 앞서 설치한 라이브러리 lodash 폴더가 있다. 그리고 lodash 폴더에는 소스 코드 파일들이 있다.
package.json의 dependencies
패키지에 라이브러리를 설치하면 package.json에 dependencies 항목이 추가된다.
package.json에 dependencies 항목이 추가된 것을 확인할 수 있다. 이 항목에서는 패키지에 설치한 라이브러리의 이름과 버전이 표시되어있다.
package-lock.json
패키지에 라이브러리를 설치하면 package-lock.json 파일이 자동으로 생성된다. package-lock.json은 설치된 라이브러리의 버전을 정확히 밝히기 위해 존재한다. 이 파일을 별도로 생성하는 이유는 package.json의 dependencies에 설치된 라이브러리의 정확한 버전이 아니라 버전의 범위만 있기 때문이다.
따라서 정확한 버전을 알려면 package-lock.json을 확인해야한다.
라이브러리 다시 설치하기
node_modules 폴더는 외부 라이브러리가 실제로 설치되는 곳이기에 Node.js 패키지 중에서 용량이 가장 크다. 때문에 공유할 때는 보통 이 폴더는 제외하고 공유한다. 따라서 패키지를 공유한 패키지에 node_modules가 존재하지 않으므로 라이브러리 사용이 불가하다. 공유자가 이 라이브러리를 사용하기 위해서는 자신의 terminal에서 npm install 명령을 수행해야한다. 이 명령어는 package.json의 dependencies에 표시한 버전 범위와 package-lock.json에 표시한 정확한 버전 이름을 이용해 필요한 패키지를 자동으로 설치한다. 만약 package-lock.json이 없다면 package.json의 범위를 기반으로 라이브러리를 설치한다.
라이브러리 사용하기
lodash를 직접 사용해보자.
`파일명: sample.js`
// 라이브러리를 불러올 때는 경로와 확장자를 명시하지 않아도 된다.
import lodash from "lodash";
const arr = [1, 1, 1, 2, 2, 1, 1, 4, 4, 3, 2];
// uniqBy 메서드는 인수로 전달한 배열에서 중복값을 제거하고 반환한다.
const uniqueArr = lodash.uniqBy(arr);
console.log(uniqueArr);위의 코드를 npm run start로 실행해보자.
lodash의 uniqBy메서드를 통해 중복값을 제거한 결과값을 확인 할 수 있다.
