[멋쟁이 사자처럼 프론트엔드 스쿨] 59일차 TIL - CommonJS VS ES modules, esm.sh, Virtual DOM, Reactivity(Proxy)

🍰 겁나 빠르다.

🍴 module

: SW 개발에서 코드의 조직과 재사용성을 높이기 위해 사용하는 개념.

• 독립적인 코드 조각
• 특정 기능을 수행하는 단위
• ex. 클래스 하나, 특정 목적을 가진 복수의 함수로 구성된 라이브러리 하나

🍫 특징

• 캡슐화 - 자체적인 scope를 가지며, 외부와의 상호작용 최소화
• 재사용성 - 한 번 정의한 모듈을 다른 코드에서 가져다 사용 가능
• 분리와 조직화 - 코드 기능 논리적으로 분리 가능 
• 복잡한 프로그램 -> 작고 관리하기 쉬운 조각으로 나누어 개발

🍴 ES(ECMAScript) module(표준) vs CommonJS module

1. server.mjs (ES 모듈)

import liveServer from "live-server";

const params = {
  host: "localhost",
  port: 3000,
  root: ".",
  open: false,
  mount: [["/", "./public"]],
};

liveServer.start(params);

🍫 import와 export 사용

• import 구문을 사용하여 모듈 가져옴
• export 구문을 사용하여 모듈 내보냄

🍫 파일 확장자

• .mjs 파일 확장자
• 가장 가까운 상위 package.json의 "type" 필드를 "module"로 설정

🍫 비동기 로딩

• ES 모듈은 기본적으로 비동기적으로 로드됨
• 따라서 top level await이 가능해짐
• 결과적으로 전체 파일 로드에 대한 성능 향상

🍫 정적 분석

• 정적으로 분석됨
• 코드 실행 전 import와 export가 체크 되기 때문에 tree-shaking같은 최적화 기법 가능

2. server.cjs (CommonJS 모듈)

const liveServer = require("live-server");
// live-server 패키지를 import
// live-server 모듈 가져와서 사용할 준비
// 로컬 개발 서버를 실행, 파일 변경 시 자동으로 브라우저 새로 고침해주는 기능 제공

const params = { // 서버의 동작 방식을 설정하는 여러 옵션 포함하고 있는 설정 객체
  host: "localhost", // 서버가 localhost에서만 접근 가능하도록
  port: 3000, // 서버가 이 포트에서 요청 수신
  root: ".", // 현재 작업 디렉토리에서 파일 제공하도록 설정
  open: false, // 서버 시작 시 브라우저 자동 열림 X
  mount: [["/", "./public"]], // '/'경로에 대해 ./public 디렉토리를 마운트
  // 요청이 '/'로 들어오면 서버는 ./public 디렉토리의 파일 제공
};

liveServer.start(params);
// 위 설정을 바탕으로 서버 시작

🍫 require와 module.exports 사용

• require 구문을 사용하여 모듈 가져옴
• module.exports를 사용하여 모듈 내보냄

🍫 파일 확장자

• .cjs 파일 확장자
• .js 확장자 사용 시 가장 가까운 상위 package.json의 "type" 필드를 "commonjs"로 설정
• .mjs, .cjs, .json, .node, .js가 아니거나, package.json 파일이 없거나 "type" 필드가 없으면 기본적으로 CommonJS 모듈로 간주

🍫 동기 로딩

• 동기적으로 로드됨

🍫 동적 분석

• 동적으로 분석되며, require 호출 시에 모듈이 로드됨

🍴 esm.sh

: CDN(Content Delivery Network) 서비스. 주로 JavaScript 모듈 제공.

import React from '<https://esm.sh/react>';

• ES 모듈 지원 - ECMAScript 모듈 형식으로 패키지 제공
• npm 패키지 접근 - npm에 있는 거의 모든 패키지를 ESM 형식으로 변환하여 제공
• 번들링 없이 사용 - 브라우저에서 직접 import 문을 사용하여 모듈을 로드 할 수 있음

🍫 사용 목적

• 복잡한 빌드 과정 없이도 최신 JavaScript 모듈을 쉽게 사용할 수 있음
• 프로토타이핑, 작은 프로젝트에서 유용

🍴 Virtual DOM

: 실제 DOM의 가벼운 복사본, React의 성능 최적화 전략의 중요한 부분.

• 실제 DOM 요소와 속성을 가진 객체의 트리 구조

🍫 작동 방식

• 상태 변경 시 React는 새로운 Virtual DOM 트리 생성
• 이전 Virtual DOM과 새로운 Virtual DOM 비교
• 차이점만 실제 DOM에 적용

🍴 Reactivity