[React] Node.js 기초

Node.js란 무엇인가?

웹 브라우저가 아닌 환경에서도 자바스크립트 코드를 실행시켜주는 자바스크립트의 런타임, 즉 자바스크립트의 실행환경(RunTime)이다.

 

실행환경이란 무엇일까?

구동기이다. 구동기는 기본적으로 무언가를 동작시키는 기계라던가 프로그램을 의미하는 것

 

🤔 Node가 필요한 이유는 무엇일까?

자바스크립트는 웹페이지 안에서 일어나는 단순한 기능만을 개발하기 위해 만들은 언어이다. 

개발자들은 최대한 빠르게 개발할 수 있도록 생산성에만 중심을 두고 언어를 설계했었다.  

웹 브라우저 밖에서도 자바스크립트가 실행되게 하고 싶었는데 2009 Node.js가 만들어졌다.

 

Node.js는 자바스크립트를 범용적으로 사용할 수 있도록 도와주는 JavaScript의 실행환경, 즉 런타임이다. 

 

패키지

Node.js에서 사용하는 프로그램의 단위

 

패키지를 이해해보자!

npm init - 새로운 패키지를 초기화해 달라 또는 생성해 달라는 의미

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

package.json 파일안에

"start"를 입력한뒤 "node src/index.js"를 입력해주면 터미널에 경로를 다 명시해 줄 필요x

 

 

 

 

 

그리고 npm run start를 입력해주면 된다. 

그러면 파일안에 있는 console.log가 실행 된다. 

 

Node.js 모듈 시스템 이해하기

모듈 시스템이란?

모듈을 다루는 시스템이다. 

 

그렇다면 모듈이란?

쇼핑몰로 예시를 들어보겠다.

쇼핑몰에는 다양한 기능(회원 관리 기능, 장바구니 기능, 결제 기능 등)이 있다. 이러한 기능들은 function.js 즉, 한 파일에만 작성하면 어떻게 될까? 🤔

 

그렇다면 파일안의 코드 양이 너무 많아질 것이다 . 즉, 생산성 bad!

 

그래서 각각의 기능들에 맞춰 .js파일을 만들어서 작업한다. 

 

기능별로 나눠진 자바스크립트 파일들을 모듈이라고 부른다. 

 

회원 관리 기능 -> user.js -> user 모듈

장바구니 기능 -> cart.js -> cart모듈

결제 기능 -> payment.js -> payment모듈

 

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

 

math 모듈로 부터 add함수와 sub 함수 불러왔다. 

// math 모듈
function add(a, b) {
  return a + b;
}

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

// CommonJs 모듈 시스템에 의해 이 두개의 값이 Math 모듈로부터 내보내진다.
module.exports = {
  add: add,
  sub: sub,
};

// math모듈을 불러옴
const moduleData = require('./math');
console.log(moduleData);

 

module 데이터에는 { }안에 있는 객체가 저장되어 있다.

 

 

math 모듈로 부터 add함수와 sub 함수 불러온걸 사용해보기

// math모듈을 불러옴옴
const moduleData = require('./math');

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

// 구조분해 할당 이용하는 방법
const { add, sub } = require('./math');

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

 

각각 출력이 되었다. 

 

ES모듈 시스템 이용 방법

ES모듈 시스템을 사용하려면 먼저 이 패키지 내에서 앞으로는 모듈 시스템을 사용하겠다라는 설정을 패키지 설정 파일인 package.json을 설정해둬야한다. 

  "type": "module"

 

※ ES모듈시스템과 Commend모듈 시스템은 동시 사용 불가

// math 모듈
function add(a, b) {
  return a + b;
}

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

//ES모듈 시스템
// 객체를 리터럴로 생성하면 된다.
export { add, sub };

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

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

 

⚠️ ES모듈 시스템을 사용할때의 주의사항

import문에서 파일의 확장자까지 명시해야한다. 

 

ES모듈 시스템에서 다양한 방법으로 모듈로부터 값을 내보내고 또 가져올 수 있는 몇가지 기능

// 1. 함수 앞에 export써주는 방법
export function add(a, b) {
  return a + b;
}

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

// 2. 하나의 default값 내보내는 방법
export default function multiply(a, b) {
  return a * b;
}

 

export default로 내보낸 함수는 기본 값으로써 html을 통해 중괄호 없이 호출해야된다. 

import mul from './math.js';
// multiply말고 mul이런식으로 마음대로 불러오는거 가능

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

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

// 만약 동일한 경로로 값을 불러오는 임포트문이 여러개라면 합쳐서 불러오는거 가능

 

라이브러리란 뭘까?

프로그램을 개발할 때 필요한 다양한 기능을 미리 만들어 모듈화 해 놓은 것

npm | Home

npm | Home

 

입력하면

 

 

 

추가로 파일이 더 생겼다. 

node_modules - 설치한 라이브러리가 저장되는 곳

package-lock.json - 이 패키지가 사용하고 있는 라이브러리들의 버전이나 정보를 package.json보다 더 정확하고 엄밀하게 저장하는 파일

 

 

 

package.json에서 randomColor보면

^ 이런 표시가 있다.이 이거는 version range(버전 범위)라고 하는 것이다 .

즉, 정확한 버전이 아니라 대략적인 버전이 표기되어 있는 것

 

 

 

 

 

 

실행할때마다 랜덤값 출력된다.