한 입 크기로 잘라먹는 리액트 3장: Node.js

Node.js 설치 및 기본 설정

블로그 포스팅에서 Node.js를 사용하여 리액트 프로젝트를 설정하는 방법에 대해 다루겠습니다. 이 글에서는 Node.js 설치부터 패키지 관리, 모듈 시스템까지의 기본적인 내용을 설명하겠습니다.

Node.js 설치하기

Node.js는 Chrome의 V8 JavaScript 엔진 위에 구축된 JavaScript 런타임입니다. Node.js를 설치하려면 Node.js 다운로드 페이지로 이동하여 운영 체제에 맞는 설치 프로그램을 다운로드하고 설치합니다. 현재 최신 버전은 20.15.0입니다.

설치 후, 명령 프롬프트나 터미널에서 다음 명령어를 입력하여 Node.js와 npm이 제대로 설치되었는지 확인합니다

 

https://nodejs.org/en/download/prebuilt-installer

Node.js — Download Node.js®

v20.15.0

 

cmd창에서 확인

node -v
npm -v

버전 번호가 출력되면 정상적으로 설치된 것입니다.

Node.js 패키지 관리

Node.js 프로젝트를 설정하려면 프로젝트 디렉터리에서 npm init 명령어를 실행하여 package.json 파일을 생성합니다. 이 파일은 프로젝트의 메타데이터를 포함하고 있으며, 종속성 관리를 자동으로 처리해줍니다.

npm init

 

몇 가지 질문에 답변하면 package.json 파일이 생성됩니다.

패키지 스크립트 사용하기

package.json 파일에는 스크립트를 정의하여 반복적인 작업을 자동화할 수 있습니다. 예를 들어, start 스크립트를 추가하여 애플리케이션을 실행할 수 있습니다.

{
  "scripts": {
    "start": "node index.js"
  }
}

 

이제 npm start 명령어를 사용하여 index.js 파일을 실행할 수 있습니다.

Node.js 모듈 시스템

Node.js에서는 각 파일이 독립적인 모듈로 간주됩니다. 모듈을 가져오려면 require 함수를 사용합니다.

// CommonJS 모듈 시스템
const fs = require('fs');

하지만 최신 ES 모듈 시스템을 사용하려면 package.json 파일에 "type": "module"을 추가하고 import 및 export 구문을 사용합니다.

{
  "type": "module"
}

// ES 모듈 시스템
import fs from 'fs';

 

JSON 사용하기

Node.js에서는 모든 통신을 JSON 형식으로 처리해야 합니다. JSON은 경량의 데이터 교환 형식으로, JavaScript 객체 표기법을 따릅니다. JSON 데이터에서 콤마(,)는 매우 중요합니다.

라이브러리 사용하기

Node.js에서 외부 라이브러리를 사용하려면 npm을 통해 설치할 수 있습니다. 예를 들어, lodash 라이브러리를 설치하려면 다음 명령어를 실행합니다.

 

npm i lodash

이 명령어를 실행하면 package-lock.json 파일이 생성되며, 이는 프로젝트의 모든 종속성을 정확하게 기록합니다.

 

설치된 라이브러리는 다음과 같이 사용할 수 있습니다.

import _ from 'lodash';

const array = [1, 2, 3];
const reversedArray = _.reverse(array.slice());
console.log(reversedArray); // [3, 2, 1]

결론

이 글에서는 Node.js를 설치하고 기본적인 설정을 하는 방법에 대해 설명했습니다. Node.js를 사용하면 JavaScript로 서버 사이드 애플리케이션을 개발할 수 있으며, npm을 통해 다양한 라이브러리를 쉽게 관리할 수 있습니다. 리액트 프로젝트와 함께 사용하면 더욱 강력한 웹 애플리케이션을 개발할 수 있습니다.

다음 글에서는 리액트를 사용하여 간단한 웹 애플리케이션을 만드는 방법을 다루겠습니다. Node.js와 리액트의 조합을 통해 더 나은 개발 환경을 구축해 보세요