[한입 크기로 잘라 먹는 리액트] - Node.js 기초

---

강의 - Section 3 : Node.js 기초

유데미 : https://www.udemy.com/course/winterlood-react-basic/

인프런 : 

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런

---

 

 

 

Node.js 기초

1. Node.js 소개

 

* Node.js는 '자바스크립트(JavaScript)'를 서버 측에서 실행할 수 있게 해주는 런타임 환경(실행 환경)이다.

원래 자바스크립트는 브라우저에서만 동작하는 언어였지만, Node.js 덕분에 서버에서도 자바스크립트를 사용할 수 있게 되었다.

(Node 등장 전에는 자바스크립트는 브라우저(클라이언트)에서만 실행하고, 서버측으로 데이터를 보낸 후 서버 측에서는 다른언어(PHP, Python, Java등)로 처리했었다.)

 

특징

1. 비동기 I/O : I/O작업(파일 읽기/쓰기, DB 작업, 네트워크 요청 등)을 비동기적으로 처리해서, 작업을 기다리는 동안 다른 작업을 수행할 수 있다
2. 단일 스레드 이벤트 루프 : Node.js는 단일 스레드 기반이지만, 내부적으로 이벤트 루프를 사용해 다수의 요청을 한꺼번에 처리할 수 있다
3. V8 자바스크립트 엔진 : 구글 크롬의 V8 엔진을 사용하여 자바스크립트를 매우 빠르게 실행한다.
4. 크로스 플랫폼 : 다양한 운영체제(Windows, Mac, Linux)에서 사용할 수 있다.
5. NPM(Node Package Manager) : Node.js의 패키지 관리 도구를 사용하여 모듈을 쉽게 설치하고 관리할 수 있다.

 

 

 

 

Node.js 기초

2. Node.js 사용

* VSCODE 내부 터미널 단축키 : Ctrl + J

 

* 패키지란 특정한 기능이나 코드를 모듈화한 파일이나 파일들의 집합을 말하며, 이러한 패키지들은 다른 개발자들이 쉽게 가져다 사용할 수 있도록 만들어 진 것이다. npm을 통해 설치하고 관리할 수 있다.

 

1. Node.js 프로젝트 초기화(package.json 파일 생성)

npm init

package name : 패키지 이름 
version : 패키지 버전
description : 패키지 설명
entry poin : 메인으로 실행될 js 파일
test command : 테스트 실행할 명령어
git repository : 깃 URL
keywords : 검색을 돕기위한 키워드
author : 프로젝트 작성자
license : 프로젝트 라이선스(기본값 : ISC)

 

 

2. index.js 파일 생성

console.log("안녕 js야");

 

생성 후 간단한 코드 작성 후 node에서 실행

 

실행방법 : node 실행할 파일 경로와 이름  (node src/index.js)

터미널

 

 

3. 패키지 스크립트 작성

 

* 패키지 스크립트란 package.json 피알의 script 섹션에 정의된 스크립트는 npm을 통해 실행할 수 있는 명령어이다. 이를 통해 자주 사용하는 명령어를 미리 정의하고, npm run을 통해 편리하게 실행할 수 있다.

패키지 스크립트 작성 예시 (package.json 파일의 script 섹션에 원하는 명령어 설정)

"scripts": {
    "start": "node index.js",
    "test": "echo \"Running tests...\"",
    "build": "webpack --config webpack.config.js",
    "dev": "nodemon index.js",
    "lint": "eslint .",
    "serve": "node server.js"
  }​

* start : npm start로 실행할 수 있는 기본 시작 명령어. 서버를 실행할 때 사용
* test : npm test로 실행할 수 있는 명령어. 테스트 도구를 사용해 스크립트 설정
* build : npm run build로 실행하는 빌드 명령어. 배포하기 전 최적화된 형태로 번들링 할 때 사용
* dev : npm run dev 로 실행할 수 있는 개발 모드 명령어. 코드를 수정할 때마다 재시작 필요 없이 자동 반영
* lint : npm run lint로 실행하는 코드 린트 검사 명령어. 코드 스타일을 유지하고 버그를 사전에 방지
* serve : npm run serve 로 실행할 수 있는 서버 실행 명령어

 

 

실제 작성한 패키지 스크립트

 

 

npm start 실행

 

 

 

 

 

Node.js 기초

3. Node.js 모듈 시스템 이해

 

* 모듈이란 특정한 기능을 수행하는 코드 덩어리(파일)이다. 큰 프로젝트를 개발할 때는 코드를 여러 파일로 분리하고 각 파일에 필요한 기능만 담아 관리하는 것이 좋다

(ex. user 모듈, cart 모듈, payment 모듈)

 

* 모듈 시스템이란 모듈을 생성하고, 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템.

  강의에서는 여러개의 모듈 시스템 중 Common JS(CJS), ES Module(ESM)에 대해서 살펴보도록 한다.

 

CommonJS (CJS)
: Node.js가 기본적으로 사용하는 모듈 시스템. 이 방식은 JS가 브라우저에서만 실행되던 시절, 자바스크립트를 서버에 사용하기 위해 만들어진 모듈 시스템으로, Node.js가 탄생할 때부터 쓰여왔다. CommonJS 모듈은 동기적으로 로딩되므로, 파일을 실행할 때 해당 모듈을 즉시 불러온다. 따라서 서버 측 환경에서 주로 사용되며, 브라우저 환경에서는 사용에 제약이 있다.

ES Module (ESM)
 : JS 언어의 표준 모듈 시스템으로, ES6에서 도입된 방식이다. 브라우저와 Node.js에서 모두 사용할 수 있도록 만들어졌으며, 최신 문법에 맞춰진 모듈 시스템이다. ESM은 비동기 로딩을 지원하므로 네트워크 요청이 필요한 경우 비동기로 모듈을 로딩할 수 있다. 이는 브라우저와 서버 환경 모두에서 사용할 수 있게 만들어진 표준화된 방식이다.

 

 

Common JS

 

1. math.js 파일 생성

(실습을 위해 간단한 계산 기능을 하는 모듈 생성)

// math 모듈

function add(a, b) {
    return a + b;
}

function sub(a, b){
    return a - b;
}

module.exports = {
    add : add,
    sub
}

 

* module.exposrts : Common JS 모듈 시스템에 의해서 두 개의 함수가 현재 모듈에서 내보내지게 된다.

(변수의 이름과 값의 이름이 같다면 sub 처럼 한 번만 명시해줘도 된다)

 

 

 

2. index.js에서 값 받기

// index.js

const moduleData = require("./math");

console.log(moduleData); // { add: [Function: add], sub: [Function: sub] }
console.log(moduleData.add(1, 2)); // 3
console.log(moduleData.sub(1, 2)); // -1

 

* require : 다른 모듈을 가져올 때 사용

 

// index.js

const { add, sub } = require("./math");

console.log(add(1, 2)); // 3
console.log(sub(1, 2)); // -1

 

* 이렇게 객체의 구조 분해 할당을 이용하면 코드의 가독성과 효율성이 향상됨

(객체의 구조 분해 할당이란 객체의 속성 값을 꺼내와 개별 변수로 할당할 수 있게 해주는 문법이다)

 

 

 

ES Module

 

1. package.json에서 ESM 사용 설정

(Node.js에서 .mjs 확장자를 사용하지 않고도 ESM을 사용할 수 있도록 함)

"type": "module"

 

* 참고로 이렇게 설정하면, Common JS 모듈 시스템은 ESM 규칙과 충돌하기 때문에 오류가 발생하여 사용할 수 없음

Error Message
: require is not defined in ES module scope, you can use import instead

 

 

 

2. math.js 파일 수정

// math 모듈

function add(a, b) {
    return a + b;
}

function sub(a, b){
    return a - b;
}

export { add, sub };

 

* export : ESM에서 모듈을 내보낼 떄 사용

 

// math 모듈

export function add(a, b) {
    return a + b;
}

export function sub(a, b){
    return a - b;
}

* 함수 앞에 export를 작성해도 똑같이 동작함

 

 

 

3. index.js에서 값 받기

// index.js

import { add, sub } from "./math.js";

console.log(add(1, 2)); // 3
console.log(sub(1, 2)); // -1

 

* import : ESM에서 다른 모듈을 가져올 때 사용

* 참고로 import 할 때 확장자를 작성하지 않으면 파일을 찾지 못해 오류가 발생함

Error Message
: [ERR_MODULE_NOT_FOUND]: Cannot find module

 

 

 

# default 내보내기

 

* default는 모듈에서 단일 값을 기본으로 내보내고 싶을 때 사용함. 이렇게 내보내게 되면 해당 모듈을 가져올 때 가져오는 이름을 자유롭게 지정할 수 있음

(export로만 내보내는 명명된 내보내기는 가져올 때 정확한 이름으로 가져와야 함)

 

// math 모듈

export default function multiply(a, b){
    return a * b;
}

 

// index.js

import mul from "./math.js";
// 여러개를 한번에 가져올때는 import mul, { add, sub } from "./math.js" 로 가져오면 됨


console.log(mul(1, 2));

 

 

Node.js 기초

4. Node.js 라이브러리 사용

 

* 라이브러리란 개발에 필요한 다양한 기능을 제공해주는 코드 모음이다. Node.js는 기본적으로 제공되는 내장 라이브러리와 외부 라이브러리를 통해 웹, 서버, 파일 처리, 네트워크 통신 등 여러 기능을 손쉽게 구현할 수 있다.

 

내장 라이브러리 일부 소개(이름 클릭하면 설명 페이지로 이동)

1. fs(File System) : 파일을 읽고, 쓰고, 삭제하는 등의 파일 시스템 조작 기능
2. http : HTTP 서버와 클라이언트를 만들기 위한 라이버러리로 간단한 웹 서버 구축 시 사용
3. path : 파일 경로를 조작하는 기능을 제공해 경로를 결합하거나 확장자를 추출할 때 사용
4. url : URL을 파싱하거나 구성요소를 조작하는 기능
5. crypto : 암호화와 관련된 기능을 제공(데이터 암호화, 해시 생성 등)
6. events : 이벤트 기반 프로그래밍을 위한 라이브러리
7. os : 운영체제와 관련된 정보와 기능을 제공하며 시스템 메모리, CPU 정보등 확인 가능
8. stream : 데이터 스트림을 다루기 위한 라이브러리로 파일을 읽고 쓰는 등의 작업에서 유용
9. util : 다양한 유틸리티 함수들을 제공하는 라이브러리

 

 

1. 외부 라이브러리 설치

 

1.1 npm 홈페이지 접속(구글에 npmjs라고 치면 제일 위에 뜨는 페이지)

npm | Home

 

 

1.2 설치 할 라이브러리 이름 검색

(간단한 실습을 위해 강의에서는 randomcolor라는 라이브러리 다운)

 

우상단 install 부분에 있는 설치 코드 복사 후 VSCODE 터미널에서 실행

 

"dependencies": {
    "randomcolor": "^0.6.2"
}

 

package.json에 라이브러리 추가 된 것 확인

 

* node_modules와 package-lock.json

라이브러리를 처음 설치하면 node_modules폴더와 package-lock.json 파일이 자동으로 생성된다.

 

node_modules 

 : 이 폴더는 실제 라이브러리를 실행하기 위해 필요한 모든 파일이 저장되는 곳이다.

package-lock.json

 : 이 파일은 패키지가 사용하는 라이브러리들의 버전, 경로, 무결성 정보를 기록하며, 다른 개발자가 package.json과 이 파일을 가지고 npm install을 실행하면, 이 파일에 기록된 대로 라이브러리를 설치하여 같은 환경을 재현할 수 있다.

 

2. 라이브러리 사용

 

// index.js

// 라이브러리를 import할 때는 경로가 아니라 라이브러리 이름을 작성하면 됨
import randomColor from "randomcolor";

const color = randomColor();
console.log(color);

 

 

 

# 만약 node_modules 폴더와 package-lock.json이 지워졌다면?

Error Message
: [ERR_MODULE_NOT_FOUND]: Cannot find package

 

package.json "dependendies"에 라이브러리들이 저장되어 있기 때문에

npm i 또는 npm install을 입력해서 실행하면 모든 라이브러리를 다시 재 다운로드 해준다.

(package.json만 있으면 언제든 필요한 라이브러리들을 다운받을 수 있기 때문에 보통은 프로젝트를 공유하거나, 아니면 깃허브 등에 업로드할 때는 node_modules 폴더는 포함하지 않는다)