분류 전체보기 (353) 썸네일형 리스트형 [Git] 깃 저장소에서 여러 디렉토리 관리하려고 하고 하는데 어떤 디렉토리에 -> 표시가 생기고 해당 디렉토리가 들어가지 않는 문제 🚨 문제 요약GitHub 리포지토리에서 폴더 옆에 화살표(→) 아이콘이 표시됨→ 이건 **해당 폴더가 서브모듈(submodule)**로 잘못 추가되어 있기 때문에 발생한 문제입니다.git rm --cached 명령어로 서브모듈을 삭제하고 나서 푸시(push)하려 했을 때 에러 발생→ error: failed to push some refs 에러가 발생한 이유는 원격 리포지토리와 로컬 리포지토리의 기록이 일치하지 않기 때문입니다.🔎 왜 화살표(→) 표시가 발생했나요?화살표(→) 아이콘은 **Git 서브모듈(submodule)**을 나타냅니다.💡 서브모듈이란?서브모듈은 Git 리포지토리 안에 또 다른 Git 리포지토리를 포함할 때 사용됩니다.서브모듈은 **바로가기(링크)**처럼 동작합니다. 실제 폴더가.. Webpack Deep Dive Part 1: The Hook 🔎 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를 연결하여 모듈 페더레이션 by vue.cofig.js 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(host) + webpack(remote)로 모둘 페더레이션 구성 - 1 아래는 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 │ .. [쿠버네티스] pod 심화 과정 - 멀티 컨테이너 생성, 사이드카 파드 생성 문제 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 명령어로 생성된 .. 윈도우 환경 - 시스템 환경 변수 편집을 해도 path을 알아먹지 못할 때, 일단 원하는 패키지로 강제 적용 시키고 싶을 때 admin@DESKTOP-J2C566C MINGW64 ~/Desktop/experiment$ yarn --version1.22.22admin@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 모노레포 구성 정리 아래는 **host-maestro-monorepo**를 루트로 하는 pnpm 모노레포 구성부터,Host와 remoteMaestro 두 패키지를 만들고,Host에서 Remote 컴포넌트를 가져와서 사용하는 과정을 순서대로 정리한 내용입니다.1. 폴더 구조 & 초기 설정1) 모노레포 루트 폴더 만들기 mkdir host-maestro-monorepocd host-maestro-monorepo2) pnpm init루트에서 pnpm init을 통해 **루트의 package.json**을 생성합니다. pnpm init루트 package.json 예시 { "name": "host-maestro-monorepo", "private": true, "version": "1.0.0", "scripts": { .. 이전 1 2 3 4 5 ··· 45 다음
