애플리케이션 아키텍처와 프로젝트 생성

12.1.1 작성할 화면들

애플리케이션에서 작성할 주요 화면을 미리 정의하면 기능 개발에 필요한 컴포넌트를 예측할 수 있음. 예를 들어:

• 메인 화면: 사용자에게 첫 화면을 제공하는 메인 페이지.
• 로그인 화면: 사용자 인증을 위한 로그인 및 회원 가입 페이지.
• 대시보드 화면: 데이터 시각화 및 주요 기능 접근을 위한 대시보드.
• 프로필 관리 화면: 사용자 정보와 설정을 관리하는 화면.

이 외에도 검색 화면, 상세 화면 등 주요 기능에 맞는 페이지를 정의해놓고 각 페이지에 필요한 기능과 UI 요소를 준비함.

 

12.1.2 컴포넌트 계층 구조

컴포넌트 계층 구조를 정리하여 컴포넌트를 재사용하기 쉬운 구조로 설계함.

1. App.vue: 최상위 컴포넌트로, 각 페이지를 라우터로 연결하고 전역 상태나 스타일을 관리.
2. 페이지 컴포넌트: 각 화면에 대한 최상위 컴포넌트이며, 주로 View로 명명.
   • 예: HomeView, LoginView, DashboardView
3. UI 컴포넌트: 재사용 가능한 버튼, 입력 필드, 카드 등의 UI 요소들.
   • 예: Button.vue, Input.vue, Card.vue
4. 모듈 컴포넌트: 페이지 컴포넌트 내에서 사용되는 기능별 컴포넌트로, 주로 특정 페이지에서만 사용됨.
   • 예: UserProfile.vue, Chart.vue

 

12.1.3 프로젝트 생성

Vue CLI를 통해 프로젝트를 생성하고 초기 설정을 진행함. 기본적으로 Vue 3을 사용하며, 필요에 따라 Vue Router와 Vuex(혹은 Pinia)를 추가해 상태 관리와 라우팅 기능을 준비함.

# 프로젝트 생성 명령어
vue create my-project

프로젝트 생성 후 디렉토리 구조는 다음과 같이 구성됨:

my-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── store/
│   ├── router/
│   ├── App.vue
│   └── main.js
└── package.json

초기 설정

1. Router 설정: src/router/index.js에서 페이지 라우트를 설정.
2. Vuex 또는 Pinia 설정: src/store/index.js에서 상태 관리를 설정.
3. 컴포넌트 등록: App.vue에서 최상위 컴포넌트로 필요한 UI 및 페이지 컴포넌트들을 불러옴.