한국에서 SW 개발자로 산다는것: 코딩 - Vue 3 + Typescript + Vite + Vuetify 3.x 로 시작하는 웹 프로그램 : 로그인

2023년 2월 6일

코딩 - Vue 3 + Typescript + Vite + Vuetify 3.x 로 시작하는 웹 프로그램 : 로그인

개발을 조금 쉽게 해보려고 무료로 이용이 가능한 Vuetify 3 - Vite Theme FREE 을 다운로드 하여 사용하였다. (기본적인 환경만 미리 세팅이 되어 있어 사용할 필요성을 없을 것 같다. 타입스크립트라던지 개발 편의를 위한 설정이라든지 등의 여러 설정을 추가하느라 결과적으로는 더 힘들게 되어 버렸다.)

◼︎ 개발환경

Model : MacBook Pro (14-inch, 2021)
CPU : Apple M1 Pro
MENORY : 16GB
DISK : 512 GB SSD
OS : macOS 13.2 (22D49)

사전 준비

기본 프로젝트는 Vite Theme Free 를 일부 수정 사용하였다.

필요없는 부분은 삭제를 하고 (src/plugins/vuetify.js) 전역으로 버튼 등의 UI 을 변경한 부분은 삭제하여 원래의 Vuetify 3 UI 을 사용할 수 있도록 변경.
타입스크립트를 사용하기 위하여 js 파일을 ts 로 변경하고 관련 설정을 추가.
개발 편의를 목적으로 vite-plugin-checker 플러그인을 추가.

사용 주요 기술

① Pinia

Pinia 는 Vuejs 코어 팀이 구축한 새로운 상태 관리 라이브러리로 Vuex의 후속 제품이며 Vuex 보다 훨씬 적은 코드로 상태 관리가 가능하며 Vue 3에서 공식 권장되는 라이브러리이다.

Pinia 에서 State(데이터를 의미) 와 비즈니스 로직은 스토어(Store) 을 사용하여 정의되고, 각 스토어(Store) 에는 state, getters, actions 등이 포함한다.

State - Store 에서 관리되는 데이터를 의미. 기존 Vue 구성요소 data 와 동일.
Getters - State 및/또는 다른 Getter 에서 파생(계산)된 값을 반환. 기존 Vue 구성요소 computed 와 동일.
Actions - 비즈니스 논리 또는 API 호출과 같은 비동기 작업을 실행하는 데 사용. 기존 Vue 구성요소 methods 와 동일.

Pinia 스토어는 원하는 만큼 정의하여 사용할 수 있고 Vue 애플리케이션 어디에서나 전역적으로 접근할 수 있다. (상세 내용은 https://pinia.vuejs.org/core-concepts 참조.)

② Vue Composition API

Vue 3과 함께 제공되는 새로운 Vue Composition API <script setup> 를 사용하여 컴포넌트들이 빌드되도록 하였다. 일단 필요한 부분만 기술하면 되기 때문에 코드가 아주 간격해지는 이점이 있다. (Vue Composition API에 대한 자세한 내용은 https://vuejs.org/guide/extras/composition-api-faq.html 을 참조.)

③ Vuelidate

입력값에 대한 검사는 Vutify 3 가이드 문서를 참조하여 Vuelidate 을 사용하여 구현하였다.

npm install @vuelidate/core @vuelidate/validators --save

Vuelidate 을 사용하면 비교적 간단하게 입력값 검사 기능을 구현할 수 있다.

④ dotenv

Path: /.env

VITE(이하 비트) 개발 도구 환경에서 dotenv 파일은 서버 호출 API URL 과 같은 다양한 변수 값들을 포함할 수 있다. dotenv 에 정의되는 변수들은 반드시 VITE_ 로 시작하며 Vue 프로그램에서는 import.meta.env.<variable name> 형태로 사용할 수 있다. ( 자세한 것은 Env Variables and Modes | Vite (vitejs.dev) 참고)

VITE_API_URL=http://localhost:4000

로그인 주요 구성 요소및 구현

src/views/Login.vue : 로그인 UI
src/components/Alert.vue : 오류 처리 콤포넌트
src/store/auth.store.ts : 인증을 처리하는 스토어
src/store/alert.store.ts : 오류 정보를 처리하기 위한 스토어
src/router/index.ts : 라우터 메인
src/router/accounts.router.ts : 로그인 라우터 정보
src/App.vue : 메인 UI
src/main.ts : 메인 스크립트

로그인은 아래와 같은 로직으로 기반으로 구현된다.

전체 소스(Git) : donghyuck/studio-vuetify at v0.0.2 (github.com)

로그인 시 성공하면 Jwt 토큰과 사용자 정보를 같이 응답 받아 사용하도록 되어 있는데 이부분은 분리하는 것이 보안상 더 나은 선택인 것 같다.

한국에서 SW 개발자로 산다는것