🔎 Webpack Deep Dive Part 1: The Hook (요약)이 글은 Webpack의 소스 코드 이해를 어렵게 만드는 주요 원인으로 Hook 시스템을 꼽고 있으며, Webpack이 Tapable 라이브러리를 통해 Hook을 활용하는 방식과 그로 인해 발생하는 문제점 두 가지를 다룹니다.📌 1. Hook이란?Hook은 특정 이벤트나 함수 호출 시, 미리 정의된 다른 함수들을 실행하는 코드 조각을 의미합니다.쉽게 말해, 하나의 함수가 호출될 때 다른 함수들도 연결되어 실행되도록 만드는 기법입니다.Webpack은 자체적으로 Tapable이라는 Hook 라이브러리를 사용하여 플러그인 시스템을 구축했습니다.📌 2. Webpack의 Hook 사용 방식과 문제점🔴 문제점 1: 불명확한 의존성 (D..

✅ Webpack Module Federation 흐름 재설명요청하신 Module Federation의 동작 과정을 Webpack Compiler의 실행 단계에 따라 vue.config.js 환경에 맞춰 설명ㄱ  📋 Module Federation 동작 과정 요약아래는 Webpack의 Module Federation이 동작하는 전체 흐름입니다 1️⃣ [Webpack Compiler 시작]2️⃣ [ModuleFederationPlugin.apply()]3️⃣ [compiler.hooks.make]4️⃣ [ContainerEntryModule 생성]5️⃣ [remoteEntry.js 생성]6️⃣ [Webpack 런타임에서 remoteEntry.js 로드]7️⃣ [호스트 앱이 리모트 모듈 사용] 각 단계에서..

mhome과 remote2를 연결하여 모듈 페더레이션(Module Federation)을 설정하는 과정을 처음부터 차근차근 설명합니다.1. vue-cli 자동 구성remote2를 vue-cli로 새로 구성합니다.vue create remote22. remote2 설정remote2는 Webpack 기반으로 동작하며 vue.config.js에서 Module Federation을 설정합니다.vue.config.jsconst { ModuleFederationPlugin } = require('webpack').container;module.exports = { publicPath: 'auto', configureWebpack: { plugins: [ new ModuleFederationPlug..

아래는 Vite(호스트, home) + Webpack(리모트, remote) 조합으로 Vue 모듈 페더레이션을 구성하는 “완전체” 예시입니다.이전까지 나왔던 오류들(Cannot find module .vue, css-loader missing, Library name must be a string, Shared module not available 등)을 모두 피하도록 각 항목을 최종 정리했습니다.목표remote(Webpack)에서 remoteEntry.js를 생성해 Exposed.vue를 노출home(Vite)이 그것을 가져와 로 사용오류 없이 빌드 및 실행폴더 구조my-mf-project/ ├── remote/ # Webpack (리모트) │ ├── package.json │ ..

문제 4: 멀티 컨테이너 Pod 생성하기문제 설명작업 클러스터: k8s목표:4개의 컨테이너(nginx, redis, memcached, consul)를 포함하는 Pod를 생성합니다.Pod 이름은 eshop-frontend입니다.풀이 전략Pod YAML 템플릿 생성:kubectl run 명령어를 사용하여 기본 YAML 템플릿을 생성합니다.--dry-run 옵션으로 실제 리소스는 생성하지 않고 YAML 형식으로 출력합니다.출력된 YAML 파일을 저장합니다.YAML 수정:YAML 파일을 열고 추가 컨테이너들을 정의합니다.각 컨테이너는 이름(name)과 이미지(image)를 지정합니다.Pod 생성:수정된 YAML 파일을 적용하여 Pod를 생성합니다.Pod 상태 확인:kubectl get pod 명령어로 생성된 ..

admin@DESKTOP-J2C566C MINGW64 ~/Desktop/experiment$ yarn --version1.22.22​admin@DESKTOP-J2C566C MINGW64 ~/Desktop/experiment$ export PATH=$PATH:/c/Users/node_modules/.pnpm/yarn@1.22.22/node_modules/yarn/bin 임시적으로 먹게 할수 있다.   vue create --packageManager=pnpm host-app legacy opensslexport NODE_OPTIONS=--openssl-legacy-providerpnpm start