Vue 실습 (8) 썸네일형 리스트형 [모듈 페더레이션]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 │ .. 모노레포 구성 정리 아래는 **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": { .. [vue.js] components을 이용한 동적 렌더링 - 1 최근 프로젝트에서 다음과 같은 두 가지 요구사항이 있었습니다:항목 조건에 따라 다른 형태의 폼이 생성'신청 항목 추가+' 버튼 클릭 시 새로운 폼 항목 추가 이 요구사항을 단순히 v-if나 v-show로 구현하면 코드가 복잡해질 가능성이 높습니다. 이를 해결하기 위해 Vue.js의 태그를 활용하여 동적 렌더링을 구현했습니다. 동작 원리는 다음과 같습니다 태그란? 태그: Vue.js의 내장 컴포넌트로, 조건에 따라 동적으로 컴포넌트를 렌더링할 수 있습니다.:is 속성: 렌더링할 컴포넌트를 지정합니다. 이 속성에 전달된 값에 따라 해당 컴포넌트를 화면에 표시합니다.활용 방식: activeComponent라는 변수의 값이 컴포넌트 이름이라면 는 그 컴포넌트를 렌더링합니다. 예를 들어 activeComponen.. [vue.js] vue 개념 라이프 사이클 관련 개념 정리 최근 프론트 관련 랜덤 문제를 푼적이 있는데. "Vue.js 컴포넌트의 라이프사이클 훅 중에서 DOM에 마운트된 후에 호출되는 훅은 무엇인가요?" 라는 질문에서 라이프 사이클이 정확히 기억나지 않아서 이참에 한 번 정리하려 합니다.크게 라이프 사이클 훅은 아래와 같이 있습니다. mounted: 컴포넌트의 템플릿이 렌더링되고 DOM에 마운트된 후 호출됩니다.created: 컴포넌트가 생성된 직후 호출됩니다.beforeMount: DOM에 마운트되기 전에 호출됩니다.updated: 데이터 변경 후 렌더링된 후 호출됩니다.destroyed: 컴포넌트가 파괴될 때 호출됩니다. `흐름도에 따라 하나 하나 각각의 매서드들이 무엇을 하는지 설명하겠습니다.`beforeCreate호출 시점: Vue 인스턴스가 초기화되.. vue 에서 yup을 사용하여 유효성 검사하는 방법 정리 1. yup 스키마 정의 yup은 스키마를 정의하므로써 규칙을 정의 합니다.const schema = yup.object().shape({ title: yup.string().required('title is required').min(1, 'title is required'), category: yup .string() .required('category is required') .min(1, 'category is required'), data: yup.string().required('data is required').min(1, 'data is required'),}); title: 문자열이어야 하며, 필수 값입니다. 최소 한 글자 이상이 입력되어야 합니다.category: .. 웹 개발 관련 - 알아두면 유용한 명령어 및 오류 해결 윈도우에서는 깃파일 이름 길이 관련해서 길어지면 오류가 납니다. 그리고 길이에 관련한 명령이 기본적으로 false로 설정 되있는 듯 합니다. 그렇기 때문에 정삭적으로 깃을 클론 도는 풀을 받았음에도 불구하고 관련한 오류가 나온다면 아래의 명령어를 치시길 바랍니다. git config --system core.longpaths true 또 어떨때는 아직 쿠키나 로컬저장소에 값을 저장해서 써야하는데 해당 관련 api가 나오지 않아서 수동으로 저장해야할 때 가 있습니다 이럴때 개발자창에가서 일일이 치기는 번거로운데 콘솔창에 관련한 명령어가 존재합니다. // key, value 형식으로 값 넣기 document.cookie="key=value" Today I Learned : Vue.js 랜더링시 해결 과정 중 배운 것 정리 어제 Do it! 프런트엔드 UI 개발 with Vue.js의 구현을 모두 끝냈다. 해당 책을 기획이자 디자인, 와이어프레임이라고 생각하고 했던 사이드 프로젝트가 끝이 났다. 그리고 오늘부터 좀 더 프런트엔드답게 고정 데이터인 부분을 => axios 호출해서 가져오는 형태 또는 모듈화 및 추상화를 넣어주는 리팩토링을 시작하고자 했다. 과정에서 몇 가지의 문제점이 생겼습니다. 또 해결해 가면서 배운 것들을 정리하는 과정을 가져볼까 합니다. 0. 이전에 구현 중 localhost:5147/ 로 이동시 index.vue로 이동하게 라우팅이 되어 있었습니다. 하지만 index.vue는 아래와 같이 구현되어 있었습니다. 웹사이트 제목 이렇기 때문에 path: "/"으로 갈 경우 content가 비어있는 페이지가 .. 이전 1 다음
