게시판을 만들어보자.
일단 ChatGPT에게 부탁한다.
1. ChatGPT에게 부탁
Vue.js로 게시판 코드를 짜달라니까 뭔가 막 뱉어냈다.
몇가지 에러만 따라가면서 해결하니 바로 게시판이 만들어졌다.
에러는 아주 간단했다. 파일명 좀 변경하고, 디렉토리 위치만 고려하니 해결되었다.
그리고 현재 버전에서 제공하는 기본 양식과 조금 다르길래 현재 버전에 맞도록 약간의 수정을 했다.
2. 디렉토리 구성
3. 코드
3-1. main.js 수정
import { createApp } from 'vue'
import App from './components/TestBoard.vue'
createApp(App).mount('#app')
3-2. TestBoard.vue 추가
<template>
<div class="hello">
<h1>Vue.js Board</h1>
<input type="text" v-model="newPost" placeholder="Add a new post">
<button @click="addPost">Add Post</button>
<ul>
<li v-for="(post, index) in posts" :key="index">{{ post }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newPost: '',
posts: []
};
},
methods: {
addPost() {
if (this.newPost.trim() !== '') {
this.posts.push(this.newPost);
this.newPost = '';
}
}
}
};
</script>
<style scoped>
/* Scoped CSS for this component */
</style>
3-3. index.html 수정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Board</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
4. 결과 확인
> npm run servce
허허 초간단 게시판 완성
다음엔 레이아웃도 좀 적용하고, 좀 더 멋진 게시판으로 업그레이드 해줘야겠다.
'Frontend' 카테고리의 다른 글
| Vue 프로젝트 빌드 환경 구분/포트 변경/도커 빌드/원격지 도커 실행까지! (0) | 2024.07.02 |
|---|---|
| [Vue.js] 게시판 만들기 - 디자인 개선(ChatGPT와 함께하는..) (0) | 2024.05.20 |
| [Vue.js] 게시판 만들기 - 세팅 (0) | 2024.05.20 |
| NVM(Node Version Manager) 설치 및 Node 설치 (0) | 2024.05.20 |
| Node, NPM 버전 업데이트 오류 해결 (0) | 2024.05.20 |