Vue + Vite 멀티 모듈 프로젝트 구조 완벽 가이드

들어가며현대 웹 개발에서는 하나의 저장소(monorepo)에서 여러 애플리케이션을 효율적으로 관리해야 하는 상황이 자주 발생합니다. Vue와 Vite를 사용하여 멀티 모듈(Multi-Module) 구조를 구성하면 독립적인 여러 앱을 하나의 프로젝트에서 효과적으로 운영할 수 있습니다.이 글에서는 Vue 3와 Vite를 활용한 멀티 모듈 아키텍처의 구조, 설정 방법, 장점 및 주의사항에 대해 상세히 알아보겠습니다.멀티 모듈 아키텍처란?멀티 모듈 아키텍처는 하나의 저장소(monorepo) 내에서 여러 개의 독립적인 애플리케이션을 운영하는 방식입니다. 각 애플리케이션은 자체적인 진입점, 구성 파일, 빌드 설정을 가지지만, 공통 컴포넌트나 유틸리티 코드는 공유할 수 있습니다.프로젝트 구조 살펴보기일반적인 Vue ..

• format_list_bulleted 프로그래밍/Js
• · 2025. 5. 20.
• textsms

Vue 3 vite 다중 앱 구성 가이드: 단일 프로젝트에서 여러 애플리케이션 관리하기

📌 개요Vue 프로젝트에서 여러 개의 독립적인 애플리케이션을 관리해야 하는 상황이 있습니다. 예를 들어, 관리자용 앱과 고객용 앱을 하나의 코드베이스에서 관리하면서도 별도로 빌드해야 한다면 어떻게 해야 할까요? 이 글에서는 Vite를 사용하여 Vue 3 프로젝트에서 다중 앱을 구성하고 빌드하는 방법을 소개합니다.🎯 목표App1.vue → 빌드 시 dist/gtc/index.html로 출력App2.vue → 빌드 시 dist/customer/index.html로 출력공통 컴포넌트와 유틸리티는 재사용각 앱마다 독립적인 진입점(entry point) 설정🗂️ 프로젝트 구조다중 앱 구성을 위한 권장 프로젝트 구조는 다음과 같습니다: my-vue-app/├── index.html ← ..

• format_list_bulleted 프로그래밍/Js
• · 2025. 5. 19.
• textsms

Vue의 계산된 속성(computed) 내 get()과 set() 메서드 설명

이 코드에서 orderAmount는 Vue의 계산된 속성(computed property)으로, get()과 set() 메서드를 가진 객체를 사용해 정의되었습니다. 이 설계는 사용자 입력값과 표시값을 다르게 처리하기 위한 중요한 패턴입니다.get() 메서드 — 값을 읽을 때 호출됩니다.get() { return orderAmountRaw.value ? orderAmountRaw.value.toLocaleString() : '';}역할: 화면에 값을 '표시'할 때 사용됩니다.동작 방식:orderAmountRaw.value가 존재하면 숫자에 콤마를 추가하여 가독성 있게 표시(toLocaleString())값이 없으면 빈 문자열('')을 반환사용 시점: 템플릿에서 {{ orderAmount }}나 v-mod..

• format_list_bulleted 프로그래밍/Js
• · 2025. 5. 15.
• textsms

TODO 관리 시스템

이 코드는 할 일(Task) 관리 시스템을 구현한 것입니다.Task 클래스: 개별 할 일 객체TaskList 클래스: 여러 개의 할 일 목록을 관리하는 리스트정렬 기능: 할 일 목록을 제목(title), 생성 날짜(date), 등록 순서(register) 기준으로 정렬https://www.youtube.com/watch?v=yMyDUpTjwCw&list=PLBA53uNlbf-ud8ttaC5QoC3XwJ04eOWbU&index=5 const Task = class { constructor(title) { this._title = title; this._date = Date.now(); this._isComplate = false; ..

• format_list_bulleted 프로그래밍/Js
• · 2025. 3. 18.
• textsms

console.log 출력 내용을 <div>에 표시하는 방법

웹 개발을 하다 보면 console.log()를 사용하여 디버깅해야 합니다.하지만 모바일에서는 확인할 수 없어 불편할 때가 있습니다.이 글에서는 console.log의 출력을 웹 페이지의 특정 영역에 표시하는 방법을 소개합니다.기본적으로 console.log()는 브라우저의 개발자 도구에 출력됩니다.하지만 이를 가로채서 웹 페이지 내의 에 출력하도록 만들면, 개발자 도구 없이도 디버깅 정보를 쉽게 확인할 수 있습니다.주요 기능:console.log()의 기본 기능 유지div 안에 로그 출력객체(Object)와 배열(Array) 변환하여 가독성 높이기Promise 처리하여 해결된 값 출력 Console Output

• format_list_bulleted 프로그래밍/Js
• · 2025. 2. 28.
• textsms

Promise.all 모든 비동기 작업이 끝난후 작업 실행

Promise.all은 JavaScript에서 여러 개의 비동기 작업을 병렬로 처리하기 위한 메서드입니다.주요 특징병렬 실행: 여러 프로미스를 동시에 실행합니다배열 입력: 프로미스 배열을 인자로 받습니다단일 프로미스 반환: 모든 프로미스의 결과를 담은 배열을 반환하는 새로운 프로미스를 생성합니다전체 완료 대기: 모든 프로미스가 이행(fulfilled)될 때까지 기다립니다순서 보장: 결과 배열은 입력된 프로미스 순서를 유지합니다빠른 실패: 하나라도 거부(rejected)되면 전체가 즉시 거부됩니다성능 향상: 독립적인 비동기 작업들을 동시에 처리하여 전체 실행 시간을 단축합니다Promise.all은 여러 API 호출 결과를 한 번에 처리하거나, 독립적인 데이터 fetching을 병렬화하는 등의 상황에서 유용..

• format_list_bulleted 프로그래밍/Js
• · 2024. 10. 25.
• textsms