본문 바로가기

Vue 실습

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

티스토리툴바