[React 기초] Node.js와 React.js 기본개념

 

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 3. Node.js 기초 / 섹션 4. React.js 기초

 

1. Node.js
2. React.js

3. CommonJS vs ES Modules

 

 

---

1. Node.js

1) Node.js의 개념

(Node.js는 공식 홈페이지) Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.
※ 런타임 = 특정 언어로 만든 프로그램들을 실행할 수 있는 환경

 

- Node.js는 JavaScript 실행 환경

- 기존의 JS는 웹 브라우저를 실행한 상태에서만 사용 가능

- Node.js는 JS를 웹 브라우저 외의 서버 환경에서도 사용할 수 있게 도와주는 역할

 

 

2) Node.js의 특징

Node.js = Single Thread + Non-Blocking

 

 : 하나의 Thread에서 작업을 처리하며, 여러 작업이 병렬적으로 수행된다.

하나의 Thread 내에서, 이전 작업이 완료될 때까지 기다리지 않고, 다음 작업이 바로 실행된다.

 

① I/O 요청을 빠르게 처리

- 일반 서버에선 I/O 요청이 많거나 시간이 많이 소요되는 요청이 있으면 서버 대기 시간이 길어지지만,

- Node.js로 구현한 서버는 요청이 많거나 시간이 많이 소요되어도 대기 시간이 발생하지 않는다.

 

② CPU 적은 작접에 적합

- 하나의 Thread만 사용하기 때문에 CPU 연산이 많이 요구되는 작업을 수행하기엔 적합하지 않다.

 

==> I/O 요청 개수는 많지만, 데이터 크기가 작은 경우 Node.js를 사용하는 것이 적합

       ex) SNS와 같은 실시간 채팅 서비스, 실시간 주식 차트 

 

 

 

 

2. React.js

1) React.js의 개념

(위키백과) 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

 

- JS를 이용해 웹을 구현하는 프론트엔드 라이브러리

 

2) React.js의 특징

① Component 기반의 UI 라이브러리

- UI를 여러 컴포넌트로 구분하고 (컴포넌트화), 각 컴포넌트를 개별적으로 구현하는 방식으로 UI를 구성한다.

- 코드의 가독성이 높고, 수정과 보완이 쉽다.

 

② virtual DOM

- 브라우저 변경사항(이벤트)이 발생할 때, 화면을 새로 띄우지 않고 필요한 곳만 업데이트 하는 방식

- DOM을 바로 실행하지 않고 여러 변경사항을 가상 DOM에 먼저 저장한 후

- 실제 DOM과 비교하여 변경이 필요한 최소한의 부분만 실제 DOM에 반영한다.

- 브라우저의 연산량을 줄여 앱의 효율성과 속도를 향상시켜주는 역

 

 

 

 

3. CommonJS vs ES Modules

- JS 모듈을 내보내고 불러오는 2가지 방식 ( 모듈 시스템)

- JS를 모듈화함으로서 JS가 브라우저에서뿐만 아니라, 서버사이드나 데스크톱 애플리케이션에서도 사용 가능

- 모듈 = 각각의 분리된 파일

 

1) CommonJS (CJS)

- module.exports로 모듈을 내보내고, require로 모듈을 불러온다.

- Node.js는 기본적으로 JS 패키지를 내보내고 불러올 때 CommonJS 모듈 시스템을 따른다.

const add = (a,b)=> a+b;
const sub = (a,b)=> a-b;

//모듈 내보내기
module.exports = {
    moduleName : "calculator.js",
    add : add,
    sub : sub,
};

const calculator = require("./calculator");
console.log(calculator.add(1,2));

 

 

2) ES Modules (ESM)

- export로 모듈을 내보내고, import로 모듈을 불러온다.

① export default

: export한 이름과 상관없이 원하는 이름으로 import 가능

  export할 모듈이 하나만 있을 때 사용 가능

// calcuator.js 파일
export default const sum = (x, y) => x + y;

// 다른 파일에서 불러올 때, 이름 변경 가능
import sum from "./calculator.js";
import Sum from "./calculator.js";

 

 

② named export

: 반드시 export한 이름으로만 import 가능, import 시 중괄호 표현 사용

  export할 모듈이 여러개 있는 경우에도 사용 가

// calcuator.js 파일
export const sum = (x, y) => x + y;

// export한 이름으로만 불러오기, 중괄호 사용
import { sum } from "./calculator.js";

 

 

 

 

 

 

Reference

[Node.js]
https://velog.io/@remon/%EA%B0%9C%EB%B0%9C-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%8B%9D-Node.js%EB%9E%80
https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/
https://dodo000.tistory.com/32

[React.js]
https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

[CommonJS]
https://d2.naver.com/helloworld/12864
https://yceffort.kr/2023/05/what-is-commonjs

https://velog.io/@navyjeongs/%EB%A6%AC%EC%95%A1%ED%8A%B8-export-default%EC%99%80-export%EC%9D%98-%EC%B0%A8%EC%9D%B4