berrycore

짐코딩님 답글과 같이 수정된 코드가 올라와 있습니다만,커리큘럼 순서를 건너뛰지 않고 커뮤니티에서 바로 확인하실 분들을 위해서 수정 코드 남깁니다. 참고하시면 좋겠습니다.&nbsp;<img src="https://cdn.inflearn.com/public/files/posts/67e2291d-90f6-4d82-bd52-4c624e606f7f/image.png"><ul><li>As-Is</li></ul>PostDetailView.vue 파일 defineProps 의 type 에 추가<pre><code class="language-vue">// 생략
<script setup>
import { useRouter } from 'vue-router';
import { getPostById, deletePost } from '@/api/posts';
import { ref } from 'vue';

const props = defineProps({
 id: String,
});

// 생략</code></pre><ul><li>To-Be&nbsp;</li></ul><pre><code class="language-vue"><script setup>
import { useRouter } from 'vue-router';
import { getPostById, deletePost } from '@/api/posts';
import { ref } from 'vue';

const props = defineProps({
 id: [String, Number],
});</code></pre>&nbsp;git 에서 branch -> 10_component_separate 로 변경해서 확인 가능합니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/gymcoding/vue3-posts/blob/10_component_separate/src/views/posts/PostDetailView.vue">https://github.com/gymcoding/vue3-posts/blob/10_component_separate/src/views/posts/PostDetailView.vue</a>

Axios에 posts/${id}에 숫자를 보내서 에러가 발생하는군요

저도 동일한 에러 메시지가 뜨길래 다음과 같이 해결 하였습니다.참고 하시면 좋겠습니다.<blockquote>-> TypeOrmModule.forRoot 보다 ConfigModule.forRoot 를 상단에 위치하도록 import 순서를 변경.</blockquote><pre><code class="language-typescript">imports: [
 ConfigModule.forRoot({
 envFilePath: '.env',
 isGlobal: true,
 }),
 TypeOrmModule.forRoot({
 type: 'postgres',
 host: process.env[ENV_DB_HOST_KEY],
 port: parseInt(process.env[ENV_DB_PORT_KEY]),
 username: process.env[ENV_DB_USERNAME_KEY],
 password: process.env[ENV_DB_PASSWORD_KEY],
 database: process.env[ENV_DB_DATABASE_KEY],
 entities: [PostsModel, UsersModel],
 synchronize: true,
 }),

 PostsModule,
 UsersModule,
 AuthModule,
 CommonModule,
 ],</code></pre>&nbsp;&nbsp;