VUE 공부 5일차

Vue 프로젝트 생성부터 script setup 이해하기

1. Vue 프로젝트 생성
   Vue 프로젝트를 시작하려면 기본 툴이 필요함. -> Vite를 사용하여 빠르게 프로젝트를 생성하는 방법으로 진행할 예정
   Vite : 빠르고 가벼운 프로젝트 설정 도구로 간결하고 모던 웹 프로젝트 개발에 초점을 맞춰 탄생한 빌드 도구임
   1. 프로젝트 생성
      터미널에서 아래 명령어를 입력하여 새로운 Vue 프로젝트를 생성
   2. 템플릿을 선택 후 아래 과정대로 진행

   # 프로젝트 생성
   npm create vite@latest first-vue-project
   # Vue 선택 후 이후 사항
   cd first-vue-project
   npm install
   npm run dev

2. App.vue 이해하기
   1. App. vue란?
      App.vue는 Vue 프로젝트의 메인 컴포넌트임
      vue 앱의 시작점을 담당하며, 다른 컴포넌트를 불러오거나, 기본 레이아웃을 정의하는 역을 함
   2. 기본 App.vue의 구조
      Vite로 생성된 기본 App. vue는 아래와 같음

   <script setup>
   </script>
   
   <template>
     <div>
       <a href="https://vite.dev" target="_blank">
         <img src="/vite.svg" class="logo" alt="Vite logo" />
       </a>
     </div>
   </template>
   
   <style scoped>
   .logo {
     height: 6em;
     padding: 1.5em;
   }
   </style>

   <script setup> : Vue 3에서 사용되는 새로운 방식으로 컴포넌트 로직을 작성함
   <template> : HTML과 비슷하게 작성하며, 화면에 표시될 내용을 정의함
   <style scoped> : 컴포넌트 내에서만 적용되는 CSS를 작성
3. script setup
   1. script setup 이란?
      • script setup은 Vue3에서 컴포넌트의 자바스크립트 로직을 작성하는 가장 간결한 방법
      • 기존의 export default 방식보다 코드가 짧고, 선언한 변수나 함수를 바로 사용할 수 있음
   2. 왜 사용하는가?
      • 가독성 : 불필요한 코드가 줄어들어 읽기 쉬움
      • 간결함 : 변수를 정의하면 바로 템플릿에서 사용할 수 있음
      • 기능성 : Vue 3에서 제공하는 최신 기능과 완벽하게 호환이 됨
   3. 어떻게 사용하는가?
      • script setup 안에 변수를 정의하거나 함수를 작성하면 됨
      • 예제

      <script setup>
      const message = "Hello, Vue!";
      </script>
      
      <template>
        <p>{{ message }}</p>
      </template>

   4. script setup안이 비어있다면
      현재로써는 데이터를 정의할 필요가 없기 때문
      예를 들어 라우터를 설정하고 라우터 링크만 추가하는 작업에서는 추가적인 자바스크립트 로직이 필요하지 않을 수 있음
      추후 필요해지거나 데이터나 함수가 필요해지면 script setup안에 코드를 작성하면됨.
   5. script setup의 장점 요약
      1. 코드 간결화 : 변수나 함수를 작성하면 바로 템플릿에서 사용할 수 있음
      2. Vue 3 호환성 : 최신 Vue 기능과 완벽히 통합됨
      3. 단순한 구조 : 선언과 사용이 직관적임

---

Vue Router 설치

Vue Router는 페이지 간 이동을 관리하는 라이브러리로 아래 명령어로 설치할 수 있음

npm install vue-router

 

기본 설정

1. src/router/index.js 파일 생성 : 프로젝트에 라우터 설정 파일을 추가함

import { createRouter, createWebHistory } from "vue-router";
// 설명
// vue-router에서 createRoute와 createWebHistory를 가져옴
// createRouter : 라우터(페이지 이동규칙)을 만드는 함수
// createWebHistoiry : 브라우저의 히스토리 API를 사용해 URL을 관리하는 모드

const routes = [	// routes는 사용자가 정의한 URL과 컴포넌트 간의 연결 정보를 담는 배열 
// 이 배열에 URL 경로 (path)와 컴포넌트(component)를 지정함
  {
    path: "/", // path : "/" 브라우저의 URL이 /일 때, 즉, "홈페이지"일 때 표시
    name: "Home", // name : "Home" 이 경로의 이름 나중에 라우터를 제어할 때 이름으로 참조할 수 있음
    component: () => import("../views/Home.vue"), // URL이 /일때 렌더링할 컴포넌트를 지정 동적 로딩 (성능 최적화에 좋음)
  },	
  {
    path: "/about", 
    name: "About",
    component: () => import("../views/About.vue"),
  },
];

const router = createRouter({	// createRouter() : 라우터를 생성
  history: createWebHistory(),	// history : createWebHistory() : 브라우저 히스토리 API를 사용해 URL을 관리하도록 설정 (#)을 포함하지 않는 경로가 만들어짐
  routes,	// 사용자가 정의한 URL 컴포넌트 규칙을 전달
});

export default router;

정리

이 코드는 Vue Router 설정을 정의하는 파일

1. URL 경로와 보여줄 컴포넌트를 연결함

2. Vue Router를 생성하고 내보냄

3. main.js에서 이 라우터를 등록해 앱에서 사용할 수 있게 함

 

 

2. 라우터를 메인 앱에 연결

import { createApp } from "vue"; // Vue에서 제공하는 createApp 함수를 가져옴 -> Vue 애플리케이션을 만드는데 사용함
import App from "./App.vue"; // App.vue 파일을 가져옴 -> App.vue는 메인 컴포넌트 -> Vue 애플리케이션의 시작점
import router from "./router"; // router는 우리가 설정한 라우터를 가져오는 것 -> 라우터는 페이지간 이동을 관리함

const app = createApp(App); 
// createApp(App)을 이용해 Vue 애플리케이션을 만듬 여기서 App은 앞서 작성한 메인 컴포넌트 App.vue임
// app은 Vue 앱의 인스턴스가 됨.

app.use(router); 
// Vue 애플리케이션에 라우터를 연결
// 이 코드가 없으면 라우터가 동작하지 않아서 페이지간 이동이 불가능

app.mount("#app");
// Vue 애플리케이션을 HTML 페이지에 연결
// index.html의 <div id="app"></div> 부분에 우리가 만든 Vue 애플리케이션이 랜더링 됨

 

3. 페이지 컴포넌트 생성 : view 폴더를 만들고 Home.vue와 About.vue 파일을 생성함

• Home.vue

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

• About.vue

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

---

Pinia 설치

Pinia는 Vue의 상태 관리 라이브러리로, 전역 상태를 쉽게 관리할 수 있게 해줌

npm install pinia

 

기본설정

1. Pinia 인스턴스 생성 : src/stores/index.js 파일을 생성

import { createPinia } from "pinia";

const pinia = createPinia();
export default pinia;

 

2. Pinia를 메인 앱에 연결 : main.js에서 Pinia를 앱에 추가함

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import pinia from "./stores"; // Pinia 가져오기
const app = createApp(App);
// createApp(App)
// Vue 애플리케이션을 시작하겠다는 의미
// 이 함수는 Vue에서 앱을 만드는 함수
// 이 함수는 우리가 만든 메인 컴포넌트인 App.vue를 기반으로 새로운 Vue 앱을 만들어줌
app.use(router);
app.use(pinia);
app.mount("#app");

 

3. 간단한 Store 생성 : src/stores/counter.js 파일을 생성하고 기본 Store를 정의함

import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0, // 중앙에서 관리할 초기 데이터
  }),
  // state에 정의된 데이터는 모든 컴포넌트에서 접근할 수 있음
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

설명

definStore
Pinia에서 Store를 정의하는 함수로 이 함수를 통해  새로운 Store를 만들고, 상태와 동작을 정의할 수 있음

useCounterStore = defineStore("counter",{ .... });

사용자가  만든 Store를 가져오는데 사용하는 이름

컴포넌트에서 useCounterStore()를 호출하면 여러 Store를 관리할 수 있으므로, 각 Store를 구분하기 위해 이름 (counter)을 지정함

ex) 쇼핑몰에서 상품을 관리하는 productStore, 사용자 로그인 상태를 관리하는 userStore처럼 여러 Store를 구분할 수 있음

 

4. Store의 사용

src/coponents/Counter.vue 파일 작성

<script setup>
import { useCounterStore } from "../stores/counter"; // Store 가져오기

const counter = useCounterStore(); // Store 인스턴스 생성
</script>

<template>
  <section>
    <h1>Counter: {{ counter.count }}</h1>
    <!-- Store의 state 사용 -->
    <button @click="counter.increment">Increment</button>
    <!-- Store의 action 호출 -->
    <button @click="counter.decrement">Decrement</button>
    <!-- Store의 action 호출 -->
  </section>
</template>

<style scoped>
section {
  margin-top: 2rem;
}
button {
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid #646cff;
  background-color: white;
  color: #646cff;
  border-radius: 5px;
}
button:hover {
  background-color: #646cff;
  color: white;
}
</style>

Home.vue와 About.vue 파일 수정

// Home.vue
<script setup>
import Counter from "../components/Counter.vue"; // Counter 컴포넌트 가져오기
</script>

<template>
  <div>
    <h1>Home Page</h1>
    <Counter />
    <!-- Counter 컴포넌트 사용 -->
  </div>
</template>

<style scoped>
h1 {
  color: #646cff;
}
</style>

// About.vue
<script setup>
import Counter from "../components/Counter.vue"; // Counter 컴포넌트 가져오기
</script>

<template>
  <div>
    <h1>About Page</h1>
    <Counter />
    <!-- Counter 컴포넌트 사용 -->
  </div>
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>

설명

앞서 언급한 것 처럼 Vue에서 함수를 정의하거나 사용할 시 script setup을 바탕으로 함수를 호출하거나 정의해서 사용할 수 있음.

 

5. 테스트

npm run dev

홈 화면

About 화면

페이지가 전환되어도 Counter가 잘 전달 되는 것을 확인할 수 있음.

 

이제 지금까지 기본기를 익히는 시간이었고, 다음 주 목요일까지 간단한 부동산 홈 페이지를 script setup 방식으로 작성할 예정