vue3 pina 크린아키텍쳐 적용 샘플 플젝

react 처음 사용할때 뷰와 유사하다는 말을 많이 들었지만 막상 프로그램을 만들어본적이 없어 샘플 프로젝트를 진행해 보았다.

 

기본폴더구조

src/
├── assets/             # 이미지, 폰트, CSS 등 정적 파일
├── components/         # 재사용 가능한 UI 컴포넌트
├── views/              # 페이지 단위 컴포넌트 (라우팅 대상)
├── router/             # Vue Router 설정
├── store/              # 상태관리 (Vuex or Pinia)
├── usecases/           # 유스케이스: 기능 단위의 비즈니스 로직
├── domain/             # 엔터티와 인터페이스 정의 (도메인 모델)
│   └── models/         # 도메인 모델
├── infrastructure/     # 외부 API, DB, 로컬스토리지 등 의존성 구현
├── services/           # 외부 서비스와의 통신, axios 등
├── composables/        # Composition API용 훅 (Vue 3 기준)
├── utils/              # 공통 유틸 함수
├── App.vue             # 루트 컴포넌트
└── main.js             # 앱 진입점

프로젝트 생성

리액트를 이미 사용중이지만 버전을 최신화도 할겸 vue 프로그램 관련된것을 설치하면서 npm도 버전업 했다. (2025.4.24)

> npm install -g @vue/cli

...

> npm install -g npm@11.3.0

> vue create my-vue-app

[Vue 3] babel, eslint

pnpm

initializing

> cd my-vue-app

> pnpm run serve

[...기본 화면이 나옴 http://localhost:8080]

기본 화면 연결 페이지

1. vue-cli documentation : vue 에 대한 설명

2. 플러그인 : 리액트와 비슷한 명칭이 나오네요

babel : 최신 자바스크립트 문법(ES6+, ES2020 등) 을 오래된 부라우저에서도 동작하도록 변환

eslint : 자바스크립트 코드 검사기

3. 주요 링크

Core Docs

Forum

Community Chat

Twitter

News

4. Ecosystem 

vue-router

vuex : 상태관리 플러그인 ( 참고로 예제 프로젝트는 pina를 사용 )

vue-devtools

vue-loader

awesome-vue

로그인 구현

src/
├── domain/
│   └── interfaces/UserRepository.js
├── usecases/LoginUser.js
├── services/UserApiService.js
├── store/member.js
├── composables/useAuth.js
├── views/LoginView.vue