Vue 3를 활용한 간단한 블로그 애플리케이션

프로젝트 설정

Vue 3를 사용하기 위해 Vue CLI를 이용하여 프로젝트를 초기화합니다.

vue create vue3-blog
cd vue3-blog

 

필수 패키지 설치

프로젝트 디렉토리로 이동한 후, 필요한 패키지를 설치합니다.

npm install vue-router axios

 

기본 구조 설정

1. 폴더 구조

vue3-blog
|-- src
|   |-- components
|       |-- PostList.vue
|       |-- PostDetail.vue
|   |-- views
|       |-- Home.vue
|       |-- Post.vue
|   |-- App.vue
|   |-- main.js
|-- public
|-- package.json

2. 기본 코드 작성

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

router/index.js

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/post/:id',
    name: 'Post',
    component: Post
  }
]

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

export default router

views/Home.vue

<template>
  <div>
    <h1>Welcome to My Blog</h1>
    <PostList />
  </div>
</template>

<script>
import PostList from '../components/PostList.vue'

export default {
  components: {
    PostList
  }
}
</script>

components/PostList.vue

<template>
  <div>
    <div v-for="post in posts" :key="post.id" @click="goToPost(post.id)">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    // 여기에 실제 서버에서 데이터를 가져오는 코드를 추가합니다.
    // 예를 들어 axios를 사용하여 API 호출 등이 가능합니다.
    // 데이터 형식은 { id, title, body }와 같이 구성될 것입니다.
  },
  methods: {
    goToPost(id) {
      this.$router.push(`/post/${id}`)
    }
  }
}
</script>

views/Post.vue

<template>
  <div>
    <h2>{{ post.title }}</h2>
    <p>{{ post.body }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: {}
    }
  },
  mounted() {
    // 여기에 실제 서버에서 특정 ID에 해당하는 포스트 데이터를 가져오는 코드를 추가합니다.
    // 예를 들어 axios를 사용하여 API 호출 등이 가능합니다.
    // 데이터 형식은 { id, title, body }와 같이 구성될 것입니다.
  }
}
</script>

마무리

간단한 블로그 애플리케이션의 기본 구조와 코드를 작성해 보았습니다. 이제 서버와의 통신, 실제 데이터 로딩, 스타일링 등을 추가로 개발하여 완성된 블로그를 만들어 나갈 수 있습니다. Vue 3의 리액티브 프로그래밍과 컴포넌트 기반의 아키텍처를 적극 활용하여 보다 유연하고 효율적인 개발을 경험해보세요!