JS 3

React - CRA와 eject, 그리고 craco

CRA에서 eject란? craco로 대체하는 이유1. CRA(Create React App)란? 리액트 앱을 빠르게 시작할 수 있도록 Webpack, Babel 등의 설정을 숨긴 템플릿. ✔ 장점: 설정 없이 바로 개발 가능 ❌ 단점: 내부 설정(Webpack, Babel 등)을 수정하려면 제약 존재2. npm run eject란? CRA 내부의 숨겨진 설정(Webpack, Babel 등)을 프로젝트 디렉토리로 꺼내오는 명령어. $ npm run eject eject 후에는 config/와 scripts/ 디렉토리가 생성되어 전체 설정 파일을 직접 수정 가능.3. eject의 단점 ❌ 되돌릴 수 없음: 한 번 eject하면 undo 불가 ❌ 설정 책임 100%: CRA의 유지보..

web 2025.05.11

Javascript - 자바스크립트의 모듈 시스템

자바스크립트의 모듈 시스템 정리1. 모듈 시스템이란? 코드를 기능별로 파일 단위로 나누고, 필요한 모듈만 import하여 사용하는 구조. ✔ 목적: 유지보수성 향상, 재사용성 증가, 의존성 명확화.2. 주요 모듈 시스템 종류 ✔ ESM (ECMAScript Module): import/export 사용, 공식 표준. ✔ CommonJS: require/module.exports, Node.js 구버전에서 사용. ✔ AMD: define/require, 비동기 로딩 지원, 브라우저 전용(require.js). ✔ UMD: ESM + CommonJS + 전역 스코프 호환, 라이브러리 배포용.3. 예제 비교 📦 ESM // utils.js export const add = (a, b) => ..

web 2025.05.11

Node.js - Node.js를 직접 만들어보자

Node.js를 직접 만든다면? 런타임 구성 요소와 구현 예제Node.js는 V8 JavaScript 엔진과 libuv 비동기 I/O 라이브러리를 기반으로 동작하는 JavaScript 런타임.Node.js를 직접 만든다면 어떤 요소들이 필요한지, 그리고 실제로 C++로 구현해볼 수 있는 예제들을 통해 구조를 이해 ㄱㄱ1. Node.js의 기본 구성 요소Node.js는 아래와 같은 구성 요소로 이루어져 있음.JavaScript 엔진: V8 (또는 SpiderMonkey, JavaScriptCore)비동기 I/O: libuv 또는 직접 구현한 이벤트 루프C++ 네이티브 모듈: 파일 시스템, 네트워크 API 등바인딩 시스템: C++ API를 JS에서 호출할 수 있도록 연결2. V8을 사용한 간단한 JavaSc..

web 2025.05.07