프리티어를 하나의 파일에만 수동으로 적용하고 싶을 때

admin@DESKTOP-J2C566C MINGW64 ~/Desktop/user/remote-maestro-user (refactor-k8s-card-관련-로직-리팩토링)$ yarn prettier --write "src/views/workspace/serviceCatalog/service/resource-request/components/AWS/ui/SecurityGroupSelect.vue"src\views\workspace\serviceCatalog\service\resource-request\components\AWS\ui\SecurityGroupSelect.vue 274ms$ yarn prettier --write "src/views/workspace/serviceCatalog/service/r..

전체 코드 개요CommentItem.vue단일 댓글(또는 대댓글)을 렌더링합니다.자신의 자식 댓글이 있을 경우 재귀적으로 자기 자신을 호출하여 트리 구조를 만듭니다.활성화된 답글 또는 수정 대상에 따라 인라인 폼 슬롯(답글 폼, 수정 폼)을 표시합니다.버튼 클릭 시 reply, edit, delete 이벤트를 상위 컴포넌트로 전달합니다.CommentSection.vue전체 댓글 목록을 관리하며, 댓글 작성, 대댓글 작성, 삭제, 수정 기능을 처리합니다.상태 변수(comments, replyTarget, editTarget, form, editForm)를 관리하고, API 호출 함수를 통해 서버와 데이터를 동기화합니다.대댓글 추가 시, addReplyToList() 함수를 호출하여 댓글 트리 내에서 올바른..

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 │ ..

아래는 **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": { ..

최근 프로젝트에서 다음과 같은 두 가지 요구사항이 있었습니다:항목 조건에 따라 다른 형태의 폼이 생성'신청 항목 추가+' 버튼 클릭 시 새로운 폼 항목 추가 이 요구사항을 단순히 v-if나 v-show로 구현하면 코드가 복잡해질 가능성이 높습니다. 이를 해결하기 위해 Vue.js의 태그를 활용하여 동적 렌더링을 구현했습니다. 동작 원리는 다음과 같습니다 태그란? 태그: Vue.js의 내장 컴포넌트로, 조건에 따라 동적으로 컴포넌트를 렌더링할 수 있습니다.:is 속성: 렌더링할 컴포넌트를 지정합니다. 이 속성에 전달된 값에 따라 해당 컴포넌트를 화면에 표시합니다.활용 방식: activeComponent라는 변수의 값이 컴포넌트 이름이라면 는 그 컴포넌트를 렌더링합니다. 예를 들어 activeComponen..