728x90
728x90
🎯 들어가며React로 Micro-Frontend architecture(MFA)를 구성할 때 Webpack 기반의 Module Federation은 꽤 강력한 옵션이다. 그런데 최근 등장한 Rspack은 Webpack과 API가 유사하면서도 훨씬 빠른 빌드 성능을 자랑한다.이번 글에서는 Rspack 환경에서 Module Federation과 Hot Module Replacement(HMR) 를 적용하여 MFE 구조를 만드는 방법을 간단하게 기록해봤다.Rspack으로 Module Federation 구성하기React 앱 간 모듈 공유 (Remote ↔ Host)HMR이 잘 적용되는 구조로 설정하기공식 문서와 module-federation-examples/rspack_hmr 예제를 바탕으로 예제를 만들..
## 파트2 - chapter 1🍋 부록 B는 연습문제주어진 구문에서 접근 가능한 변수를 JS 엔진이 어떻게 결정하나?이름이 같은 두 변수의 경우 어떻게 처리되나?위의 두 질문에 대답하기 위해서 스코프를 잘 알아야 한다 👍JS는 일반적으로 스코프 언어, 따라서 실행 전 파싱 및 컴파일이 일어남 (위에서 아래로 실행되지만)스코프 규칙은 컴파일 단계에서 결정되고, 런타임에서는 잘 변경되지 않는다 🍣JS에서 함수는 일급값 (함수는 어디서 호출되던 정의할 때 결정된 스코프를 따름 -> 클로저)모듈은 코드 정리를 위한 디자인 패턴. 스코프를 통해 제한된 변순나 함수를 설정할 수 있고 접근할 수도 있다. 고전 컴파일러 이론1단계 토크나이징/렉싱 -> 2단계 파싱 -> 3단계 코드 생성 (AST to Code)..
### 부록 AJS는 값 할당 과정에서 값/참조 어떤 것을 넣게 할지 선택할 수 없다.값의 타입에서 값/참조 할당이 정해진다원시타입 -> 값 복사 할당객체값 -> 참조 할당JS의 이런 작동방식은 변경 불가능하다. 익명 함수를 변수에 선언했을 때 JS는 해당 익명 함수의 이름을 추론한다.따라서 익명 함수도 이름이 있을 수 있다다만, 추론으로 이름을 가져도 익명함수는 익명함수이고 익명함수로 재귀 함수를 구현하면 문제가 발생할 여지가 있다.다만, 함수에는 역할이 있고 해당 역할을 표현하는 이름을 지어주는 것이 더 효과적이다.화살표 함수는 사실 특수한 목적을 지닌 함수 (this 키워드가 참조하는 렉시컬 환경을 핸들링하기 위함)클래스/객체 리터럴을 정의할 때 생성된 함수를 매서드라고 부르는데, JS에서 매서드와..
라이브러리를 만드는 과정에서 타입스크립트 빌드를 하게 되었는데, 이상한 상황을 겪었다.src 폴더 안에 .d.ts 타입 선언 파일을 직접 만들어뒀는데, 빌드 후 dist 폴더에는 이 파일이 나타나지 않았다.분명히 타입 선언 파일인데, 왜 결과물에 안 들어가는 걸까? 해당 문제가 발생하니, 빌드 결과물의 d.ts에서 import한 타입이 없어 깨지는 문제가 발생하여 곤란했다 💧 문제 상황 재현 예제 ⁉️폴더 구조my-lib/├── src/│ ├── index.ts ← .d.ts의 type을 import 하여 사용함│ └── index.d.ts ← 여기에 타입 선언이 있다├── package.json└── tsconfig.jsonsrc/index.d.tsexport type GreetingPro..