리액트 배우기 전, Node.js

React와 Next는 모두 Node.js를 기반으로 구동되는 라이브러리이다.

Node는 자바스크립트를 실행시키는 실행 환경(구동기)을 말한다.

 

 

 

 

 

[js의 역사]

 

JS는 페이지 내부에서 발생하는 아주 단순한 기능을 개발하기 위해 만들어짐

그래서 애초에 웹 브라우저 내부에서만 작동할 것이라 예상하고 설계됨

 

but  Node.js의 등장으로 언제 어디서든 사용할 수 있는 범용적인 언어가 됨

Node.js는 js의 태생적 한계를 넘어설 수 있게 도와줌

 

 

 

 

 

Node.js 환경에서는 JS로 어떤 목적이 있는 프로그램을 만들 때 

패키지라는 단위로 만든다. 리액트,넥스트도 다 패키지로 만들어진다

 

npm init 을 통해

package.json이라는 새로운 패키지를 만들 수 있다.

 

node (경로/파일명) 을 입력하면

노드를 통해 js파일을 실행시킬 수 있다

 

ex) node src/index.js

 

프로젝트가 복잡해질수록 node js로 실행시킬 파일의 경로가

계속 복잡해질 수 있다. 이때 package script를 사용하면 좋다.

 

package.json 파일 안의 “scripts”에서 설정할 수 있는 일종의 매크로이다.

 

 

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

test를  실행하면  터미널에 echo~ 명령어가 실행된다는 뜻이다.

 

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start" : "node src/index.js"

  },

이렇게 한다면. npm run start를 터미널에 입력했을 때

node src/index.js 명령어가 실행되고, 최종적으로 index.js 파일이 실행된다.

 

진짜 일종의 매크로임

 

 

 

 

 

[Node.js 모듈 시스템]

 

모듈이란?

 

전체 파일의 일부이지만, 독립적인 파일로 분리되어 있어서

언제든 다른 프로그램에 재사용할 수 있는 단위를 모듈이라고 함

하나의. js 파일을 하나의 모듈로 취급함

 

 

 

모듈 시스템이란?

 

모듈을 만들고 불러와 사용할 수 있도록 도와주는 시스템

 

Common JS 모듈 시스템(CJS)

ES 모듈 시스템(ESM) 

 

두 시스템을 사용한다.

 

 

 

 

[math.js]

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

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

 

[index.js]

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

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

위의 코드에서 index.js를 실행시키면 오류가 난다.

math.js에서 각 함수들을 내보내주고, 그것을 index.js가 받아야 한다.

이렇게 내보내고 가져오는 시스템이 ‘모듈 시스템’

 

 

 

 

 

CJS방식

 

math.js에서 값을 내보기 위해 module이라는 내장객체를 사용한다.

module.exports={
    add,
    sub
}

module.exports의 값으로 add함수와 sub함수를 포함하는 객체를 설정한다.

즉 math 모듈로부터 두 개의 함수를 내보내도록 설정했다.

 

 

index.js에서 내보내진 값을 가져오기 위해서 내장함수 require(‘./경로’)를 호출한다

const moduleData= require(“./math“)

인수로 전달한 경로에 위치한 모듈에서 내보낸 값을 가져와서

moduleData 변수에 저장하는 것이다.  (즉 객체가 저장됨)

 

 

index.js에서 사용하기 위해서는

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

이런 식으로 점표기법으로 쓰면 된다.

 

 

[전체코드]

 

[index.js]

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

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

 

[math.js]

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

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

module.exports={
    add,
    sub
}

 

 

**const moduleData= require(“./math“) ;

이 부분을 구조분해 할당을 통해

const {add, sub } = require(“./math“) ; 로 사용해도 된다.

 

 

 

 

 

ESM 방식 

 

react, next가 기본적으로 사용하는 시스템. 사용하기 전에, ESM을 이용한다고 알려줘야 한다.

package.json에 “type” : “module”을 추가해 준다

 

이제부터 모듈 시스템으로 ESM을 사용한다고 선언하는 것이다.

선언과 동시에 CJS 방식은 사용할 수 없다.

 

 

ESM에서는 모듈로부터 값을 내보낼 때 

그냥 export를 쓰고 띄어쓰기 후 객체 안에 내보낼 값만 담으면 된다.

 

즉 math.js에서 값을 내보기 위해

export (add, sub);

을 입력한다.

 

 

내보내진 값을 가져오기 위해서 index.js에서는 import를 쓰고,

중괄호로 가져오고자 하는 값을 입력한다. 그리고 from을 통해 경로를 입력하면 된다.

 

즉 index.js에서 값을 가져오기 위해서 

 import {add , sub} from “./math.js”

을 입력한다. (require과 다르게 경로에 확장자를 넣어줘야 함)

 

 

 

[전체코드]

 

[index.js]

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

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

 

[math.js]

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

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

export {add, sub};

 

 

 

 

 

ESM에서는 다양한 방식으로 값을 내보내고

다양한 방식으로 가져올 수 있게 지원한다.

 

자주 사용하는 몇 가지 방법

 

 

1. 함수 선언문 앞에 export를 붙인다.

export function add(){

};

 

2. 기본값 내보내기 

 

여기서 기본 값이란 하나의 모듈을 대표하는 값이다.

기본 값으로는 하나의 값만 내보낼 수 있다.

export default를 붙여서 내보내면 된다.

 

 

3. import 경로 합치기

 

import mul from “./math.js”
import {add, sub} from “./math.js”

// 위의 두 코드를 아래 처럼

import mul, {add, sub} from “./math.js”

동일한 경로로부터 여러 개의 값을 불러오고 있다면 합칠 수도 있다.

 

 

 

 

 

[Node.js 라이브러리 사용]

 

라이브러리란 프로그램을 개발할 때 필요한 다양한 기능을

미리 만들어 모듈화 해놓은 것

 

 

https://www.npmjs.com/

라이브러리 등록 사이트이다.

 

npm i ~ 를 통해 라이브러리를 설치하면

package.json파일에 “dependencies” 항목이 추가되어 있다.

항목 안에는 설치한 라이브러리의 이름과 대략적인 버전이 들어있다.

+ ^(캐럿)은 대략적인 버전을 의미함 

 

 

또한 node_modules 폴더와 package-lock.json 파일이 새로 생긴다.

 

node_modules는 설치한 라이브러리의 코드가 실질적으로 저장되는 공간이다.

package-lock.json은 package.json과 비슷하게 패키지의 정보가 들어있기는 하지만 

정확히 현재 설치된 버전(캐럿(^) 아님ㅎ)이 표기되어 있다. 

 

package.json : 대략적인 버전

package-lock.json : 정확한 버전

정도로 알고 있자

 

 

 

 

 

라이브러리는 공식 홈페이지에서 사용법 확인 후 

그냥 import 해서 사용하면 된다.

 

[randomcolor 라이브러리 사용 예제]

import randomColor from "randomcolor";

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

 

 

 

 

 

node_modules와 package-lock.json은 어디까지나

package.json의 “dependencies” 항목을 기준으로 설치되고 작성되는 것

그렇기에 node_modules와 package-lock.json을 지워도 문제없음.

 

단 이렇게 지웠을 때  package.json의 “dependencies” 안의 정보를 기준으로

모든 라이브러리를 다시 설치할 수 있음

 

그 명령어가 바로 npm install

 

 

npm install을 입력하면 node_modules와 package-lock.json을 지웠어도 “dependencies”을 기준으로 다시 설치됨

 

node_modules와 같이 실질적인 라이브러리를 담은 폴더는 용량이 엄청 크다.

그래서 남에게 공유할 때 보통 node_modules는 제거하고 package.json까지만 포함한다.