[블로그 만들기 #2] - vue3로 Front 구축하기

2025. 12. 14. 23:33ㆍ📚 Vue3

[블로그 만들기 #2] Vue3 + Pinia로 프론트엔드 구축하기

🎨 [Front] Vue3 + Pinia 프론트엔드 구축

Vue.js와 Pinia를 활용한 개인 블로그 메인 페이지 만들기

Vue3 Pinia Vue Router Frontend

🎯 이번 목표

Vue.js와 Pinia를 활용하여 개인 블로그의 프론트엔드 프로젝트를 구축합니다. 메인 페이지와 Navigation Bar를 작성하여 블로그의 기본 구조를 만들어봅니다.

🚀 Vue 프로젝트 생성

1 프로젝트 생성 (Router, Pinia 포함)

터미널

# Vue 프로젝트 생성
npm create vue@latest

# 프로젝트 설정 (아래와 같이 선택)
✔ Project name: blog-api-front-project
✔ Add TypeScript? No
✔ Add JSX Support? No
✔ Add Vue Router? Yes  # ✅
✔ Add Pinia? Yes  # ✅
✔ Add Vitest? No
✔ Add ESLint? No

터미널

# 프로젝트 디렉토리로 이동
cd blog-api-front-project

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

💡 Router와 Pinia 선택 필수

프로젝트 생성 시 Vue Router와 Pinia를 반드시 선택해야 합니다. 이 두 가지는 블로그 프로젝트에서 페이지 라우팅과 상태 관리를 위해 필요합니다.

🗑️ 불필요한 파일 삭제

2 사용하지 않을 컴포넌트와 assets 삭제

Vue CLI가 자동으로 생성한 예제 파일들을 삭제합니다.

📁 삭제할 파일 목록

src/components/HelloWorld.vue
src/components/TheWelcome.vue
src/components/WelcomeItem.vue
src/components/icons/ (전체 폴더)
src/views/AboutView.vue
src/assets/ 폴더 내 불필요한 이미지/CSS

📄 MainView 컴포넌트 작성

3 MainView.vue 생성

src/views/MainView.vue

<!-- 메인 페이지 컴포넌트 -->
<template>
  <div class="main-container">
    <h1 class="blog-title">Jayden의 블로그</h1>
    <p class="welcome-text">Welcome to my personal blog!</p>
  </div>
</template>

<script setup>
// 스크립트 영역 (현재는 비어있음)
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80vh;
  text-align: center;
}

.blog-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #2c3e50;
}

.welcome-text {
  font-size: 1.2rem;
  color: #7f8c8d;
}
</style>

💡 화면 구성

중앙 정렬된 레이아웃
블로그 제목: "Jayden의 블로그"
환영 문구: "Welcome to my personal blog!"

🧭 Navigation Bar 구성

4 App.vue 수정

메인 App 컴포넌트에 Navigation Bar를 추가합니다.

src/App.vue

<template>
  <div id="app">
    <!-- Navigation Bar -->
    <nav class="navbar">
      <RouterLink :to="{name: 'main'}" class="nav-link">Home</RouterLink>
    </nav>

    <!-- 라우터 뷰 -->
    <RouterView />
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar {
  background-color: #2c3e50;
  padding: 20px;
  text-align: center;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 10px 20px;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #42b983;
}

.nav-link.router-link-active {
  color: #42b983;
}
</style>

🔍 중요 코드 설명

1. RouterLink

RouterLink는 Vue Router의 컴포넌트로, 페이지 새로고침 없이 SPA 방식으로 라우팅합니다.

2. RouterView

RouterView는 현재 라우트에 해당하는 컴포넌트를 렌더링하는 영역입니다.

🛣️ 라우터 설정

5 router/index.js 수정

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../views/MainView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'main',
      component: MainView
    }
    // 추후 추가될 라우트들
  ]
})

export default router

💡 라우트 구조

path: '/' - URL 경로
name: 'main' - 라우트 이름 (프로그래밍 방식 네비게이션에 사용)
component: MainView - 렌더링할 컴포넌트

📁 현재 프로젝트 구조

프로젝트 구조

blog-api-front-project/
│
├── src/
│   ├── assets/           # 정리된 에셋
│   ├── components/       # 컴포넌트 (정리됨)
│   ├── router/
│   │   └── index.js      # ✅ 라우터 설정
│   ├── stores/           # Pinia 스토어
│   ├── views/
│   │   └── MainView.vue  # ✅ 메인 페이지
│   ├── App.vue           # ✅ 네비게이션 추가
│   └── main.js
│
├── package.json
└── vite.config.js

🎨 완성된 화면 구성

✅ 화면 구성 요소

1. Navigation Bar (상단)

다크 그레이 배경 (#2c3e50)
"Home" 링크 (흰색 텍스트)
호버 시 (마우스 커서를 올렸을 때) 초록색으로 변경 (#42b983)

2. 메인 콘텐츠 (중앙)

중앙 정렬된 레이아웃
큰 제목: "Jayden의 블로그"
환영 메시지: "Welcome to my personal blog!"

터미널

# 개발 서버 실행
npm run dev

# http://localhost:5173 접속

Road To Developer