[React] Node.js와 라이브러리

본격적으로 리액트에 들어가기 앞서 다시 한번 상기하는 공부.

Node.js 란?

• JavaScript 실행 환경 (Run Time), 즉 구동기이다.
• JavaScript는 웹 페이지 내부에 필요한 아주 단순한 기능만을 개발하기 위해 만들어졌다. 문법 자체가 매우 유연하고 작성하기가 쉽게 (생산성이 높게) 개발 되었다. 개발자들은 이렇게 쉬운 자바스크립트를 웹 브라우저 밖에서도 사용하고 싶어했다. 그래서 2009년에 탄생한 것이 node.js 이다.
• Node.js에서 사용하는 프로그램의 단위는 ‘패키지’ 라고 한다. (= 프로젝트)
  1. 패키지의 root 폴더를 로컬 원하는 곳에 만든다.
  2. VSCode에서 루트 폴더를 열고 터미널( ctrl+j )을 연다.
  3. npm init을 실행한다. (초기화한 정보로 package.json 파일이 생성된다.)
  4. index.js 파일을 생성한다.
  5. 터미널에 node index.js(내가 설정한 파일이름)을 입력하면 js파일을 실행할 수 있다.
  6. package.json/scripts 안에 “start”라는 이름으로 node index.js을 지정하면, 예("start": "node src/index.js”) npm run start라는 명령어로 간단히 실행할 수 있다.
• npm (Node Package Manager)

모듈 시스템(Module System)이란?

• 모듈을 생성하고, 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템이다.
• JavaScript의 모듈 시스템은 여러가지가 있는데 그 중에 CommomJS와 ES Module을 알아보자.

CommonJS

math.js

// math 모듈

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

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

module.exports = {
    add,
    sub,
}

index.js

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

console.log(add(1, 2));
console.log(sub(4, 2));

ES Module

• packate.json 파일에 "type": "module” 추가가 필요하다.
• import 할 때 확장자명까지 입력 해주어야 한다.

math.js

// math 모듈

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

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

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

export { add, sub };

// 함수 선언문 앞에 export라는 키워드를 넣어도 가능, 예) export function add(a,b)
// default 함수는 그 모듈을 대표하는 함수

index.js

// default로 설정된 함수는 아무이름으로 가져올 수 있음
import mul, { add, sub } from "./math.js";

console.log(add(1, 2));
console.log(sub(4, 2));

라이브러리란?

• 프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓은 것이다.
• 라이브러리 설치
  1. 구글에 npmjs를 검색하고 상단에 npm 사이트를 클릭한다.
  2. 원하는 라이브러리를 검색한다. 예 ) randomcolor
  3. 설치 방법에 따라 VSCode 터미널에서 install 한다. 예 ) npm i randomcolor
• 라이브러리를 설치 하고 나면?
  1. package.json에 “dependencies” 항목이 추가된다. 이 라이브러리에 의존하고 있다는 의미이다.
  2. node_modules란 파일이 추가된다. 실제로 라이브러리가 저장되는 장소이다.
  3. package-lock.json란 파일이 추가된다. 이 패키지가 사용하고 있는 라이브러리의 정보를 정확하고 엄밀하게 알려주는 파일이다.
  4. ^0.6.2 처럼 버전 앞에 ^의 의미는 Version Range(버전 범위)로 대략적인 범위를 표기한다. 여기에서는 0~1 버전 사이에 버전 중에 최신 버전으로 설치하겠다는 의미이다.
• 실수로 node_modules나 package-lock.json을 삭제했다면?
  • 터미널에 npm i 또는 npm install 을 입력하면 package.json / dependencies 안에 기록되어 있던 라이브러리들이 모두 재설치 된다. 그래서 보통 nodu_modules 파일은 github에 공유하지 않는다.

 

출처 : 한입 크기로 잘라 먹는 리액트