먼저 기존 웹팩 방식으로 뷰를 생성하는 것이 아닌 Vite을 통해 프로젝트를 생성하고자 한다.
장점으로는 기존 방식은 노드 모듈에 필요한 라이브러리 소스 코드를 전부 넣어서 프로젝트를 생성한다.
그 과정에서 프로젝트 생성하는데 있어 오래 걸리고 추후에 있을 배포에서도 전부 포함시키기에 큰 용량을 차지하게 된다.
+ 번들링에 있어서 차이점이 있는데 웹팩은 모든 번들링이 끝나야 실행, Vite는 즉시 실행이 됨
+ 번들링은 JS,CSS 등의 파일을 묶어서 로드하게 하는 것
아직 배포까진 진행하지 않아 차이를 못 느낄 수 있지만 프로젝트 생성 시에 웹팩과 Vite의 시간 차는 정말 크다.
현재 추세 또한 Vite를 이용하는 추세이기에 Vite를 사용하고자 한다.
1. 프로젝트를 생성하고자 하는 경로로 이동
먼저 경로로 이동 후 인텔리제이 터미널 혹 맥 터미널에
다음과 같이 실행시키고 해당 경로 이동 후 생성 시 나오는 설명대로 실행하면 5173 포트로 프로젝트가 실행되는 것을 볼 수 있다.
+ 기존 3000 포트에서 변경된 듯 하다. 추후 백엔드와 통신할 때 필요 시 변경 및 CORS 정책 문제 해결
+ 바닐라 사용
npm create vite@latest 프로젝트이름 -- --template vanillacd 프로젝트명
npm install
npm run dev
2. 프로젝트 생성 후 프로젝트 구조 이해하기
Vue의 흐름은 main.js -> app.vue -> app.vue의 라우터 뷰를 통한 경로에 따른 페이지
처음 뭔가를 시작하면 이 부분에서 좀 어려움을 느낄 수 있다.
프로젝트 구조를 먼저 이해해야 어떻게 동작하는 지 이해할 수 있기에 시간을 투자하는 것이 좋다고 생각한다.
public : 정적 파일, 번들링 하지 않는 파일, 뷰에서 접근할 수 없는 파일들을 담아 놓는다.
src : 실제 코드 작성하는 곳
소스에는 기능에 따라서 패키지를 나누었다.
assets : 뷰에서 접근 가능한 정적 파일들을 담아놓는다. home.vue에서 home.png라는 로고를 사용한다면 여기에 넣는다.
components : 버튼이나 카드 등 UI 요소를 담아 둘 수 있다. SLOT 태그를 이용하면 동적으로 안에 들어갈 값을 변경할 수 있고 재사용성을 높일 수 있다. 쉽게 말해 한 번만 css 써놓으면 여러 곳에서 돌려 쓸 수 있다.
layout : 여기서 footer, header 파일을 작성했다.
pages : 실제로 보여줄 웹 페이지 파일을 작성했다.
router : js파일을 만들어 다음과 같이 경로에 따른 페이지 매핑을 해주엇다.
const routes = [
{ path: "/", component: Home },
{ path: "/setting", component: Setting },
{ path: "/write", component: Write },
{ path: "/post/:id", component: Post },
{ path: "/:pathMatch(.*)*", component: NotFound },
];store : 서버와 통신을 하기 위한 js파일을 작성한다. 다음과 같은 axios를 작성하여 return 하여 각 페이지에서 사용할 수 있다.
const fetchCategories = async () => {
isLoading.value = true;
try {
console.log("api 요청함")
const response = await fetch("http://localhost:8080/api/categories")
console.log("test");
categories.value = await response.json();
}
catch (error) {
console.log(error);
}
finally {
isLoading.value = false;
}
}
그 외
App.vue
<script setup>
import Header from "./layout/Header.vue";
import Footer from "./layout/Footer.vue";
</script>
<template>
<div>
<Header />
<router-view />
<Footer />
</div>
</template>
<style scoped>
</style>
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // ✅ Vue Router 가져오기
import "@/assets/public/public.css";
import { createPinia } from "pinia";
const app = createApp(App);
app.use(router); // ✅ Vue Router 등록
app.use(createPinia());
app.mount("#app");
추가적으로 axios.js를 사용하면
import axios from 'axios';
export default axios.create({
baseURL: 'http://localhost:8080/api',
headers: { 'Content-Type': 'application/json' },
timeout: 5000,
});
store에서 다음과 같이 사용할 수 있다. 확실히 편하기 때문에 스토어는 이 방식으로 구현하는 것이 좋다.
const response = await axios.get("/products");
products.value = await response.data;