인프런 커뮤니티 질문&답변

문의 : CRUD 구현 강의 중 게시글 목록에 작성한 새글이 등록되지 않습니다.
수정한 코드는 PostListView , PostCreateView 입니다.

// PostListView

<template>
	<div>
		<h2>게시글 목록</h2>
		<hr class="my-4" />
		<div class="row g-3">
			<div v-for="post in posts" :key="post.id" class="col-4">
				<PostItem
					:title="post.title"
					:content="post.content"
					:created-at="post.createdAt"
					@click="goPage(post.id)"
				></PostItem>
			</div>
		</div>
		<hr class="my-4" />
		<AppCard>
			<PostDetailView :id="2"> </PostDetailView>
		</AppCard>
	</div>
</template>

<script setup>
import PostItem from '@/components/posts/PostItem.vue';
import PostDetailView from '@/views/posts/PostDetailView.vue';
import AppCard from '@/components/AppCard.vue';

import { getPosts } from '@/api/posts';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const posts = ref({});

const fetchPosts = async () => {
	try {
		const { data } = await getPosts();
		posts.value = data;
	} catch (error) {
		console.error(error);
	}
};
fetchPosts();
const goPage = id => {
	//router.push('/posts/${id}');
	router.push({
		name: 'PostDetail',
		params: {
			id,
		},
		// query: { serchText: 'hello' },
		// hash: '@world!',
	});
};
</script>

<style lang="scss" scoped></style>

// PostCreateView

<template>
	<div>
		<h2>게시글 등록</h2>
		<hr class="my-4" />
		<from @submit.prevent="save">
			<div class="mb-3">
				<label for="title" class="form-label">제목</label>
				<input
					v-model="form.title"
					type="text"
					class="form-control"
					id="title"
				/>
			</div>
			<div class="mb-3">
				<label for="content" class="form-label">내용 </label>
				<textarea
					v-model="form.content"
					class="form-control"
					id="content"
					rows="3"
				></textarea>
			</div>
			<div class="pt-4">
				<button
					type="button"
					class="btn btn-outline-dark me-2"
					@click="goListPage"
				>
					목록
				</button>
				<button class="btn btn-primary">저장</button>
			</div>
		</from>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { createPost } from '@/api/posts';

const router = useRouter();
const form = ref({
	title: null,
	content: null,
});
const save = () => {
	try {
		createPost({
			...form.value,
			createdAt: Date.now(),
		});
		router.push({ name: 'PostList' });
	} catch (error) {
		console.error(error);
	}
};
const goListPage = () => router.push({ name: 'PostList' });
</script>

<style lang="scss" scoped></style>

헤더 레이아웃의 글쓰기 버튼을 누른 후 글을 작성하면 목록의 카드에 떠야하는데 뜨지 않고 있습니다. 강사님 코드와 동일한데 이유를 몰라 문의 드려요.

안녕하세요 :)

체크리스트

1. createPost() 할 때 await으로 비동기 함수실행을 기다려 주시겠어요?

2. 혹시 콘솔에 에러가 발생했는지 확인 할 수 있을까요?

3. db.json 파일에 데이터가 저장 되었나요? 글쓰기 실패인지 조회를 못한건지 확인하기 위함입니다.

4. 만약 위 두개를 체크 했음에도 해결이 잘 안된다면 bruce.lean17@gmail.com 메일로 소스를 압축하여 보내주시면 확인 후 도움드릴 수 있도록 하겠습니다. (소스 보내주실 때 node_modules 디렉토리는 제거 후 보내주세요)

// 1번 체크리스트 예시
const save = async () => {
    try {
	await createPost({
		...form.value,
		createdAt: Date.now(),
	});
	router.push({ name: 'PostList' });
    } catch (error) {
	console.error(error);
    }
};