소규모 Project 제작 -1

Project 개요

간단한 부동산 페이지를 만들기 위해 시작

백엔드도 DB도 서버도 없기 때문에 localStorage를 적극적으로 활용

부돟산 페이지를 제작한 모습

페이지는 총 3개

홈페이지, 즐겨찾기, 문의사항 이지만 총 6개의 view 파일이 필요 (상세보기 페이지가 2개 문의사항 작성파일이 1개 필요)

폴더 구조

 

DB가 따로 없기 때문에 properties.js라는 파일을 따로 생성하여서 사용하였고, 화면에 랜더링되서 나타나는 이미지 파일들은 assets 이미지 파일을 사용하였음

 

data : 만약 서버가 있었다면 필요하지 않은 폴더

 

utils/format.js 가격이 나타나는 부분은 세 자리마다 콤마로 나타내고, 거기에 필요한 함수를 format.js로 작성함

 

router는 페이지의 이동처리를 위해 파일을 생성하였고, 여러군데

사용되기 때문에 router폴더에 index.js로 통합으로 묶어서 관리함

 

 

 

 

 

 

 

일단 가장 먼저 Page간 연결이 이루어지는 router/index.js 파일을 보면 다음과 같음

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/property/:id",
    name: "PropertyDetail",
    component: () => import("../views/PropertyDetail.vue"),
  },
  {
    path: "/inquiries",
    name: "InquiryBoard",
    component: () => import("../views/InquiryBoard.vue"),
  },
  {
    path: "/inquiries/new",
    name: "InquiryForm",
    component: () => import("../views/InquiryForm.vue"),
  },
  {
    path: "/inquiries/:id",
    name: "InquiryDetail",
    component: () => import("../views/InquiryDetail.vue"),
  },
  {
    path: "/inquiries/edit/:id",
    name: "InquiryEdit",
    component: () => import("../views/InquiryForm.vue"), // InquiryForm.vue를 수정용으로 재사용
  },
  {
    path: "/favorites",
    name: "Favorites",
    component: () => import("../views/Favorites.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

import { createRouter, createWebHistory } from "vue-router"

• 설명
  vue Router 패키지에서 createRouter와 createWebHistory를 가져와서 사용
• 역할
  • createRouter : 라우터 인스턴스를 생성
  • createWebHistory : 브라우저의 히스토리 API를 활용해 URL 상태를 관리함 
• 사용되는 곳
  • 아래에서 router를 생성할 때 사용됨.

const  routes = [ { path: "/", name: "Home", component: () => import("../views/Home.vue"), }]

• 설명
  앱에서 사용되는 모든 라우트를 정의하는 배열로 각 라우트는 객체로 정의됨.
• 역할
  
  • URL경로와 그에 대응하는 컴포넌트를 연결
  • path : URL 경로 ("/" 는 루트 경로로, 기본 페이지를 나타냄)
  • name : 라우트의 이름으로 코드에서 라우트를 참조할 때 사용됨
  • component : 해당 경로에서 렌더링할 Vue 컴포넌트를 지정함
    • import() : 동적 임포트를 사용하여 필요할 때만 컴포넌트를 로드
• 사용되는 곳
  • createRouter로 라우터를 생성할 때 전달 됨

const router = createRouter({ history: createWebHistory(), routes })

• 설명
  라우터 인스턴스를 생성
  
  • history : URL 상태관리 방식 createWebHistory는 히스토리 API를 사용
  • routes : 위에서 정의한 라우트 배열을 전달
• 역할 : 라우터 설정을 Vue 앱에 적용할 준비를 함
• 사용되는 곳
  • main.js에서 Vue앱에 등록됨

---

main.js

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

const app = createApp(App);
app.use(router);
app.mount("#app");

main.js는 Vue 애플리케이션의 진입파일로 애플리케이션을 초기화하고 설정하며,

최종적으로 DOM에 Vue 인스턴스를 마운트함

import { createApp } from "vue"

• 설명
  Vue3에서 애플리케이션 인스턴스를 생성하는 함수인 createApp을 불러옴
  • Vue2에서는 new Vue()로 애플리케이션을 생성했지만, Vue3에서는 createApp을 사용
• 역할
  • Vue 애플리케이션의 시작점을 정의하고, 이를 통해 전역 설정, 플러그인, 상태 관리 등을 추가함

import router from "./router"

• 설명
  Vue Router 설정을 담고 있는 router 객체를 불러옴
  • ./router는 위에서 작성한 index.js를 참조
• 역할
  • 라우터를 Vue 애플리케이션에 연결하여 SPA (Single Page Application) 에서 URL에 따라 컴포넌트를 렌더링할 수 있게 함 
    
    • SPA : 브라우저에서 페이지 전체를 새로 고치지 않고, JavaScript로 페이지를 전환하는 웹 애플리케이션 구조
      Vue Router를 통해 URL에 따라 동적으로 컴포넌트를 렌더링하는 방식으로 빠른 사용자 경험 (UX) 제공, 서버로의 요청을 줄이고, 클라이언트에서 렌더링 처리, Vue와 같은 프레임워크가 관리하는 반응형 데이터 흐름 활용에 용이함

import App from "./App.vue"

• 최상위 루트 컴포넌트인 App.vue를 불러옴
  • App.vue는 애플리케이션 진입점 역할을 하며 router-view를 통해 페이지 컨포넌트를 렌더링함
• 역할
  • Vue 애플리케이션의 구조와 레이아웃을 정의하며, 자식 컨포넌트를 포함할 수 있는 컨테이너

const app = createApp(App)

• createApp을 사용하여 App.vue를 기반으로 하는 Vue 애플맄이션 인스턴스를 생성
  • app 객체는 Vue 애플리케이션의 모든 설정, 컴포넌트 등록, 플러그인 등을 관리함
• 역할
  • 애플리케이션의 모든 로직과 설정의 중심 역할을 하는 인스턴스를 생성함

app.use(router)

• Vue Router 플러그인을 애플리케이션에 등록함
  • Vue3에서는 플러그인(Router, Vuex 등)을 사용하려면 app.use()를 호출해야함
  • router는 ./router에서 불러온 index.js
• 역할
  • 라우터를 통해 URL과 컴포넌트를 연결하여 SPA에서 페이지 전환을 관리함

app.mount("#app")

• Vue 애플리케이션을 DOM에 마운트함
  • HTML 파일의 <div id = "app"></div> 요소를 기준으로 Vue 컴포넌트를 렌더링함
• 역할
  • Vue 애플리케이션이 실제 DOM에 연결되어 렌더링 될 수 있도록 함
  • 마운트 시점부터 Vue 반응형 시스템과 Vue Router가 동작하기 시작함

코드의 전체 역할
이 코드는 Vue 애플리케이션의 초기화 및 구성을 처리하며, 아래와 같은 작업을 수행함

1. Vue 애플리케이션을 생성하고 라우터를 포함한 플러그인을 등록
2. 루트 컴포넌트를 기준으로 애플리케이션의 구조를 정의
3. DOM의 특정 요소에 애플리케이션을 마운트하여 사용자에게 화면을 출력함

- 이 파일은 Vue 애플리케이션의 진입점으로 개발자가 직접 수정할 일이 많이 않음

 

Vue Router와의 관계

- app.use(router)를 통해 라우터가 등록

- 라우터가 등록되면 App.vue의 <router-view> 태그를 기준으로 URL에 따라 해당 컴포넌트가 렌더링됨.

---

용어 정리

SPA (Single Page Application)

•  브라우저에서 페이지 전체를 새로 고치지 않고, JavaScript로 페이지 전환을 관리하는 웹 애플리케이션 구조
• Vue Router를 통해 URL에 따라 동적으로 컴포넌트를 전환하고 렌더링하는 방식

컴포넌트 기반 개발 (Component-Based Development)

• UI를 독립적이고 재사용 가능한 컴포넌트 단위로 나누어 개발하는 방식
  • Home.vue, PropertyDetail.vue, InquiryForm.vue... 등 이 각각 하나의 컴포넌트임
  • 각 컴포넌트는 HTML, CSS, JavaScript를 한 파일에서 관리하는 SFC (Single File Component) 형식을 따름

MVVM (Model-View-ViewModel) 패턴

• Vue.js가 사용하는 아키텍처 패턴으로 데이터 (Model)와 화면 (View)를 연결하는 ViewModel (컴포넌트)가 중심
• 데이터는 ref 또는 reactive로 관리되고, Vue의 반응형 시스템을 통해 UI와 동기화됨.
  • 데이터의 흐름
    • Model : 데이터 소스 및 상태 관리 (ref, reactive, props 등)
    • ViewModel : 컴포넌트 내 비즈니스 로직 및 반응형 데이터 관리
    • View : 템플릿 (HTML)으로 사용자가 보는 UI

Vue.js 프로젝트의 구조

• 모듈화된 파일 구조
  • src/views : 페이지별 뷰 파일들이 위치
    • Home.vue, InqueryBoard.vue 등
  • src/router : 라우터 설정이 위치
    • URL에 따라 어떤 컴포넌트를 보여줄 지 설정 
      • index.js
  • src/assets : 이미지, CSS 파일 등 정적 파일이 위치
  • src/utils : 공통으로 사용하는 유틸리티 함수가 위치
    • format.js에서 가격 포맷 함수를 정의
  • src/main.js : 애플리케이션 초기화와 설정
    • Vue 애플리케이션 인스턴스를 생성하고 라우터를 등록한 뒤 DOM에 마운트

CSR (Client-Side-Rendering)

• 브라우저에서 모든 렌더링을 처리하며, 서버는 기본 HTML과 JS를 제공
• Vue Router를 통해 URL을 관리하고, JavaScript로 동적으로 필요한 컴포넌트를 렌더링함
• 데이터는 localStorage에서 관리되어 간단한 클라이언트 기반 상태 관리를 수행함

선언적 렌더링 및 반응형 시스템

• 선언적 렌더링
  • Vue 템플릿 문법 (v-for, v-if, v-model)을 사용하여 데이터의 상태에 따라 UI를 업데이트 함
• 반응형 시스템
  • ref, reactive를 사용하여 상태를 정의하고, 상태가 변경되면 UI가 자동으로 업데이트 됨

위 개발 방식들의 장점

• 재사용성 : 컴포넌트를 독립적으로 설계하여 유지보수성과 재사용성을 높임
• 반응형 데이터 처리 : 데이터 변경 시 UI가 자동으로 업데이트되므로 동적인 사용자 경험 제공
• 확장성 : 파일 구조와 Vue Router를 통해 페이지가 많아져도 관리가 용이
• 빠른 개발 : 선언적 문법과 Vue의 유연성 덕분에 효율적인 UI  개발 가능

---

App.vue

<script setup>
import { useRouter } from "vue-router";

// Vue Router 인스턴스 가져오기
const router = useRouter();

// 로고 클릭 핸들러
const goToHome = () => {
  router.push("/"); // "/" 경로로 이동 (홈)
};
</script>

<template>
  <header>
    <!-- 로고 이미지 클릭 시 홈으로 이동 -->
    <img
      class="logo"
      src="./assets/images/vue.svg"
      alt="Vue Logo"
      @click="goToHome"
    />
    <h1>부동산</h1>
    <nav>
      <!-- Home 링크 -->
      <router-link to="/">Home</router-link>
      <!-- 즐겨찾기 링크 -->
      <router-link to="/favorites">즐겨찾기</router-link>
      <!-- 문의사항 링크 -->
      <router-link to="/inquiries">문의사항</router-link>
    </nav>
  </header>
  <router-view />
</template>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #69e073;
}

/* 로고 스타일 */
.logo {
  width: 50px; /* 로고 크기 */
  height: auto;
  cursor: pointer; /* 클릭 가능하도록 포인터 표시 */
  transition: transform 0.2s; /* 애니메이션 */
}

.logo:hover {
  transform: scale(1.1); /* 마우스 오버 시 약간 확대 */
}

/* 네비게이션 링크 스타일 */
nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: #333333;
}

nav a:hover {
  text-decoration: underline;
}
</style>

import { useRouter } from "vue-router"

const router = useRouter

• 설명 : useRouter를 호출하여 현재 라우터 인스턴스를 router 변수에 할당
• 역할 : 동적 라우팅 제어 (ex : 페이지 이동)
• 위치 : 컴포넌트에서 라우터를 직접 사용하는 경우

const goToHome = () => { router.push("/") : / 경로로 이동 (홈)

• 설명 : router.push를 사용하여 사용자를 / (Home페이지)로 이동시키는 함수
• 역할 : 로고 클릭 시 홈으로 이동하도록 함
• 사용 위치 : 로고 이미지를 클릭 이벤트 핸들러로 연결함

---

<template> 섹션

<img class="logo" src = "./assets/images/vue.svg alt="Vue Logo", @click="goToHome" />

• class = "logo" : 로고 이미지에 스타일을 적용하기 위해 class를 사용함
• src = "./assets/images/vue.svg" : 로고 이미지 파일의 경로 (기본으로 설치되는 vue.svg 파일을 이용)
• alt = "Vue Logo" 이미지가 로드 되지 않을 경우의 대체 텍스트로 Vue Logo 메세지를 표기함
• @click = "goToHome" : 로고 클릭 시 실행되는 메서드 (goToHome) 위에서 설명한 메서드가 실행

---

<nav>
  <router-link to="/">Home</router-link>
  <router-link to="/favorites">즐겨찾기</router-link>
  <router-link to="/inquiries">문의사항</router-link>
</nav>

• 설명 : 네비게이션 링크를 정의함 router-link는 Vue Router의 내장 컴포넌트
• 역할
  • <router-link to="/"> : Home 페이지로 이동하는 링크.
  • <router-link to="/favorites"> : 즐겨찾기 페이지로 이동하는 링크.
  • <router-link to="/inquiries"> : 문의사항 페이지로 이동하는 링크.

<router-view />

• 설명 : Vue Router에서 제공하는 컴포넌트로, 현재 URL에 매칭되는 컴포넌트를 렌더링함
• 역할 : 동적 라우팅을 통해 페이지 내용을 업데이트 (URL에 따라 다른 컴포넌트를 동적으로 렌더링) 
• 위치 : template안에서 사용
• 원리 : 라우터 파일 (router/index.js)에서 path와 연결된 컴포넌트를 라우터가 URL을 감지하고 URL에 매핑된 컴포넌트를 roter-view안에 랜더링함