[React.js 1팀] 03장. Node.js

1. Node.js란?

자바스크립트는 웹 브라우저에 내장된 자바스크립트 엔진에 의해 실행된다. 웹 브라우저를 자바스크립트 실행 환경이라는 의미에서 자바스크립트 런타임이라고도 한다. Node.js의 등장 전까지는 웹 브라우저가 유일한 자바스크립트 런타임이었기에 자바스크립트를 웹 사이트에서만 사용 가능했으나, 독립적인 자바스크립트 런타임인 Node.js의 등장으로 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었다. Node.js에 리액트를 다루는 여러 도구들이 내장되어 있고, Node.js가 리액트로 만든 자바스크립트 애플리케이션을 구동하기 때문에 리액트 학습 전 Node.js에 대해 알아보는 것은 필수적이다.

 

---

 

2. Node.js 환경 설정하기

(1). 윈도우 사용자 계정 이름 바꾸기

사용자 계정명이 한글이라면 향후 문제가 발생할 수 있으므로, 윈도우의 [시작] - [설정] - 제어판의 [계정] 항목에서 ‘가족 및 다른 사용자’ - ‘이 PC에 다른 사용자 추가’ 항목의 + 버튼을 눌러 새로운 계정을 추가하자.

 

(2). Node.js 설치

https://nodejs.org/en/

Node.js — Run JavaScript Everywhere

공식 홈페이지에서 다운로드 가능하다.

 

---

 

3. 비주얼 스튜디오 설치하기

비주얼 스튜디오 코드는 마이크로소프트가 개발한 오픈소스 코드 에디터이다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

공식 홈페이지에서 다운로드 가능하다.

 

---

 

4. Node.js 패키지

패키지(Package)는 Node.js에서 여러 개의 자바스크립트 파일을 실행 및 관리하는 단위이다.  Node.js를 사용할 때에는 하나의 복잡한 프로젝트에서 여러 자바스크립트 파일을 기능별로 나누어 패키지 형태로 구성한다. 

(1) 패키지 만들기
패키지 단위로 여러 파일을 관리하기 위해 최상위 폴더인 ‘루트 폴더’를 생성한 후

npm init

터미널에 위와 같이 명령어를 입력하면 Node.js 패키지를 구성하는 데 필요한 최소한의 구성 요소를 자동으로 생성하는 초기화 시킨다. 프롬프트 창이 나타나면 name에 루트폴더와 같은 이름을 입력하고, 나머지는 <엔터>를 쳐서 넘어가자.

 

package.json은 패키지의 메타 정보를 저장하는 파일이며, 초기화된 패키지의 package.json에는 기본적으로 다음 항목들이 존재한다.

• name: 패키지 이름 
• version: 패키지 버전 
• description: 패키지 설명(보통 패키지로 구성한 프로그램의 목적을 작성) 
• main: 패키지의 소스 코드 파일 중 메인 역할을 담당하는 소스 코드 파일 
• scripts: 패키지를 쉽게 다루기 위해 지정한 매크로 명령어 
• author: 패키지를 만든 사람 
• license: 패키지의 라이선스

 

(2) 패키지 스크립트 사용하기

Node.js 패키지의 package.json에는 scripts라는 항목이 있다. 이 scripts 항목은 복잡한 명령어를 간단한 명령어로 변경하는 일종의 매크로 기능을 지원한다.

 

새 파일 index.js를 생성하고 다음과 같이 코드를 작성해보자.

console.log("index run");

 

그 후, package.json의 script 항목에 다음과 같은 코드를 추가한다.

{
  (...)
  "scripts": {
  "start": "node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  (...)
}

 

원래는 index.js 파일을 실행하기 위해 터미널에 node ./index.js라는 명령어를 입력해야했으나, 위와 같은 과정을 통해

npm run start

라는 명령어로 간단하게 index.js 파일을 실행할 수 있게 되었다.

npm run 명령은 뒤에 나오는 스크립트를 실행한다. 즉, npm run start를 입력하면 package.json에 기록한 scripts에서 일치하는 명령어를 찾아 실행한다.

 

---

 

5. Node.js 모듈 시스템

(1) 모듈

모듈이란 독립적으로 존재하는 프로그램의 일부로 재사용이 가능한 것들을 말한다. 프로그래밍에서 모듈은 마치 컴퓨터 부품처럼 독립적으로 존재하는 것으로, 다른 프로그램의 부품으로 활용 가능하다. 자바스크립트에서는 독립된 하나의 파일을 ‘모듈’이라고 부르는데, 자바스크립트 모듈은 대개 특정 정보를 담은 하나의 객체거나 특정 목적을 지닌 복수의 함수로 구성하는 경우가 많다. 

 

(2) 모듈 시스템

이러한 모듈을 사용하는 방법을 '모듈 시스템'이라 한다. 자바스크립트에는 다양한 모듈 시스템이 있다. 대표적으로  ES 모듈 시스템은 ECMAScript 모듈 시스템의 약자로, 줄여서 ESM이라고 한다. ESM은 가장 최근에 개발된 모듈 시스템으로, 리액트, Vue와 같은 최신 프론트엔드 기술은 모두 ESM을 채택하고 있다.

 

Node.js는 기본적으로 ESM이 아닌 CJS 모듈 시스템을 사용한다. 따라서 ESM 모듈 시스템을 사용하려면, package.json에서 설정을 변경해야 한다.

 

package.json에 다음과 같이 코드를 추가하자.

{
  "name": "chapter3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module" *
}

 

(3) 내보내기

모듈이 필요한 이유는 특정 파일의 값이나 함수를 다른 파일에서 공유하기 위함이다. 이를 위해 내보내(export)는 공유 설정 작업이 선행되어야 한다.

const PI = 3.141592;

function getArea(radius) {
  return PI * radius * radius;
}

function getCircumference(radius) {
  return 2 * PI * radius;
}

ESM에서 다음과 같은 circle.js 파일에서 내보내기를 하는 방법에는 2가지가 있다.

 

export const PI = 3.141592;

export function getArea(radius) {
  return PI * radius * radius;
}

export function getCircumference(radius) {
  return 2 * PI * radius;
}

첫번째는 키워드나 변수 앞에 export를 붙여 해당 값을 내보낼 수 있다.

 

const PI = 3.141592;

function getArea(radius) {
  return PI * radius * radius;
}

function getCircumference(radius) {
  return 2 * PI * radius;
}

export { PI, getArea, getCircumference }; ①

두번째는 코드 아래에 export문을 추가해주는 것이다. 이는 한 번에 여러 값을 내보내기 위해 사용한다.

 

(4) 불러오기 (개별, 전부)

모듈을 불러오는 방법에도 2가지가 있는데,

import { PI, getArea, getCircumference } from "./circle.js";

console.log(PI, getArea(1), getCircumference(1));

첫번째는 개별 불러오기이다.

 

import * as circle from "./circle.js"; 

console.log(circle.PI, circle.getArea(1), circle.getCircumference(1)); 

// 출력 : 3.141592 3.141592 6.283184

두번째는 전부 불러오는 방식이다. 이는 모듈 circle.js가 내보낸 값을 모두 불러와 변수 circle에 프로퍼티로 저장하고, circle.PI와 같이 점 표기법으로 특정 모듈에 접근할 수 있다.

 

(5) 기본값으로 내보내기

export default 10; // 모듈의 기본값

위와 같이 ESM에서는 export 키워드 다음에 default를 붙여 모듈의 기본값으로 내보낼 수 있다.  모듈에서 기본값으로 내보내면 다른 모듈이 이 값을 불러올 때 다른 이름을 붙여도 상관없다. 

import name from './some-module.js';

지금까지 export로 내보낸 값은 중괄호로 내보낸 이름과 동일한 이름으로 불러와야 했으나, export default 명령으로 기본값으로 내보내면 자유롭게 이름을 지정해 불러올 수 있다.

 

---

 

6. 라이브러리 사용하기

Node.js 패키지에서는 다른 사람이 배포한 외부 패키지를 설치해 사용할 수 있다. 이러한 외부 패키지를 라이브러리라 하는데, 이는 프로그램을 개발할 때 공통으로 사용할 수 있는 기능들을 모아 모듈화한 것으로, 라이브러리를 이용하면 모든 기능을 사용자가 직접 개발하지 않아도 된다는 편리함이 있다.

 

(1) 라이브러리 설치하기

https://www.npmjs.com/

npm | Home

패키지 관리 도구인 NPM (Node Package Manager)의 개발팀이 관리하는 위 사이트에서 다른 개발자들이 개발하여 등록한 다양한 라이브러리를 탐색하고 설치 가능하다. 이 사이트에 등록된 라이브러리들은 대부분 오픈소스이므로 무료로 사용할 수 있다.

 

예시로 자바스크립트에서 유명한 'Lodash' 라이브러리를 설치해보자. 이 라이브러리는 배열, 객체를 다루는 데 필요한 복잡한 기능들을 단순한 함수 형태로 제공하는 라이브러리다.

1. 라이브러리명인 'lodash'를 검색한다.

2. 검색 결과들 중 'exact match(정확히 일치)'라는 태그가 붙은 항목을 클릭한다.

3. 라이브러리에 대한 설명, 사용 방법, 설치 방법 등을 제공하는 라이브러리 상세 페이지의 Readme 탭에서, install 항목은 설치 명령어를 나타낸다.

4. 이 명령어를 비주얼 스튜디오 코드 터미널에 입력한다. 이때, 작업 경로가 루트폴더가 맞는지 확인한다.

npm i lodash

npm i는 npm install이라 쓸 수 있다.

이 명령어는 npm i 다음에 필요한 라이브러리 이름을 입력하면 npmjs.com 서버에서 불러와 패키지를 자동으로 설치한다.

 

(2) 라이브러리 설치 이후 패키지의 변화

위와 같이 라이브러리를 설치하면 3가지 변화가 생긴다.

1. 패키지 루트에 lodash 라이브러리를 저장하는 'node_modules' 폴더가 생성된다.

2. package.json에 lodash 라이브러리의 정보를 저장하는 dependencies 항목이 추가된다.

3. 패키지 루트 아래에 package-lock.json 파일이 생성된다.

 

(2) - 1. node_modules

이 폴더는 패키지에 설치된 라이브러리가 실제로 저장되는 곳이다. 이미 node_modules 폴더가 있는 상태에서 다른 라이브러리를 설치하면, 이 폴더에 추가된다.

 

(2) - 2. package.json의 dependencies

dependencies(의존) 항목은 이 패키지를 실행하기 위해 필요한 추가 라이브러리라는 뜻으로, 이 패키지의 설치한 라이브러리의 이름과 버전이 표시되어 있다. lodash의 버전은 ^X.Y.Z 형태로 ^가 버전 코드 앞에 붙어 있다. 이 ^는 캐럿 이라고 부르며, 캐럿과 함께 표기된 버전은 버전의 범위(Version Range)를 뜻한다. 

 

(2) - 3. package-lock.json

package-lock.json은 설치된 라이브러리 버전을 정확히 밝히기 위해 존재하는 파일로, 버전의 범위(Version Range)만을 나타내는 dependencies와는 달리, 정확한 버전을 나타낸다.

 

(3) 라이브러리 다시 설치하기

라이브러리가 실제로 설치되는 node_modules 폴더는 용량이 크기 때문에 Node.js 패키지를 공유할 때 이 폴더를 제외하고 공유한다. 따라서 이 패키지를 공유받은 사람은 라이브러리를 따로 설치해야하는데, 이때 설치 명령어인 npm install 명령을 입력하면, 컴퓨터가 자동적으로 공유한 package.json과 package-lock.json에 있는 정보를 토대로 node_modules를 다시 만든다. 이를 통해, 공유받은 사람도 공유한 사람과 같은 버전의 라이브러리 사용이 가능해진다.

 

 

---

출처: 이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023).

Corner React.js1
Editor: Mingging