Vue 프로젝트 전체적인 구조 및 config 수정

[Supergrammer]

---

💣 이슈 (Issue) :

Vue 프로젝트 전체적인 구조 및 config 수정

📋 업무 체크리스트 (Task Checklist) :

여기에 업무 체크리스트를 작성하세요.

• [x] Vite config 파일 수정
• [x] store state 가 localStorage 내에서 persist 하도록 코드 수정
• [x] npm, conda env package 등 관리
• [x] 새 디자인을 위한 컴포넌트 및 모듈 초기화 작업

📜 상세 설명 (Description) :

Vue 프로젝트에서 적용할 속성 및 전체적인 구조를 수정하고, 이에 대한 내용을 문서로 정리 Vue 로 개발되는 프로젝트의 상세 디자인을 위한 프로젝트 초기화 작업

🔗 관련 이슈 (Related Issues) :

2, #7

📚 참고 (Reference) :

Vite config 수정으로 logger, debugger 비활성화하기 pinia-plugin-persistedstate 로 localstorage state 저장

---

✏️ 처리 내용

해당 이슈 처리 후, 처리 내용에 대해 기술하는 부분입니다. 이슈 처리 후 작성해 주세요

Vite config

vite.config.js

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],

    esbuild: {
        drop: ["console", "debugger"],
    },

    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
        alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
    },
});

• vite config 에 esbuild.drop 을 추가해 console 및 debugger 가 production 환경에서 실행되지 않도록 조치

Pinia store config

stores/index.js

import { createPinia } from "pinia";
import { createPersistedState } from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(createPersistedState({ auto: true }));

export default pinia;

• main 의 pinia 관련 로직을 store/index.js 로 이동
• pinia-plugin-persistedstate 추가 및 persistedstate 관련 로직을 삽입

---