선생님 서버 URL이 이상하게 요청됩니다 (404에러)

[이채정]

안녕하세요 선생님 리액트, 타입 그리고 넥스트까지 강의 정말 잘 듣고있습니다.

현재 제 파일 구조는 이렇습니다. 


제 코드는 이렇습니다.
```
</pre>
<pre>"use client";
import { useParams } from "next/navigation";
import React from "react";</pre>
<pre>const Comment = ({ user }) => {
const [comment, setComment] = React.useState("");
const { id } = useParams();
const [commentArr, setCommentArr] = React.useState([]);</pre>
const fethData = () => {
fetch(`/api/post/getComment?id=${id}`)
 .then((result) => result.json())
 .then((result) => setCommentArr(result));
 };
<pre> 
React.useEffect(() => {
fethData();
//html보여준 다음에 useEffect실행
 }, []);</pre>
<pre>return (
<div>
 <input
onChange={(e) => {
setComment(e.target.value);
 }}
/>
 <button
onClick={() => {
fetch("/api/post/addComment", { method: "POST", body: JSON.stringify({ comment: comment, _id: id }) }).then(
 () => {
fethData();
 }
 );
 }}
>
 댓글전송
 </button>
 <div>
 <h3>댓글 목록</h3>
{commentArr.length > 0 ? (
commentArr.map((e) => (
<div key={`comment${e._id}`} className="comment">
 <p>{e.comment}</p>
 <p>{e.author.slice(0, 5) + "*".repeat(e.author.split("@")[0].length - 5)}</p>
{e.author === user && (
<button
className="comment_delete_button"
onClick={() => {
<strong>fetch("api/post/deleteComment", { method: "POST", body: { _id: e._id } });</strong>
 }}
>
 삭제
 </button>
 )}
 </div>
 ))
 ) : (
<p>댓글이 아직 없습니다.</p>
 )}
 </div>
 </div>
 );
};</pre>
<pre>export default Comment;
```

문제는 제가 댓글 추가 addComment로 서버요청을 하는 경우와, 댓글삭제 deleteComment로 서버요청을 하는 경우 addComment는 정상적으로 "http://localhost:3000/api/post/addComment"로 요청이 가는데

deleteComment는 "http://localhost:3000/detail/api/post/deleteComment"로 요청을 해서 계속 404 Not Found 에러가 납니다

저 중간에 detail이 왜 따라붙는걸까요.

답변기다리겠습니다.

감사합니다.

[이채정]

"use client";
import { useParams } from "next/navigation";
import React from "react";

const Comment = ({ user }) => {
const [comment, setComment] = React.useState("");
const { id } = useParams();
const [commentArr, setCommentArr] = React.useState([]);

const fethData = () => {
fetch(`/api/post/getComment?id=${id}`)
 .then((result) => result.json())
 .then((result) => setCommentArr(result));
 };

 
React.useEffect(() => {
fethData();
//html보여준 다음에 useEffect실행
 }, []);

return (
<div>
 <input
onChange={(e) => {
setComment(e.target.value);
 }}
/>
 <button
onClick={() => {
fetch("/api/post/addComment", { method: "POST", body: JSON.stringify({ comment: comment, _id: id }) }).then(
 () => {
fethData();
 }
 );
 }}
>
 댓글전송
 </button>
 <div>
 <h3>댓글 목록</h3>
{commentArr.length > 0 ? (
commentArr.map((e) => (
<div key={`comment${e._id}`} className="comment">
 <p>{e.comment}</p>
 <p>{e.author.slice(0, 5) + "*".repeat(e.author.split("@")[0].length - 5)}</p>
{e.author === user && (
<button
className="comment_delete_button"
onClick={() => {
fetch("api/post/deleteComment", { method: "POST", body: { _id: e._id } });
 }}
>
 삭제
 </button>
 )}
 </div>
 ))
 ) : (
<p>댓글이 아직 없습니다.</p>
 )}
 </div>
 </div>
 );
};

export default Comment;

제 코드 전체입니다

[codingapple]

/api/post/deleteComment 로 요청해봅시다

[이채정]

{e.author === user && (
<button
className="comment_delete_button"
onClick={() => {
fetch("api/post/deleteComment", { method: "POST", body: { _id: e._id } });
 }}
>
 삭제
 </button>
 )}

위 삭제버튼을 보시면 .... /api/post/deleteComment로 요청을하고있는데요 선생님!!

[codingapple]

앞에 / 가 빠진듯요

[글쓴이]

글