개발자
nextjs 초보 fetch & DELETE 동작이 안되요.
app/api/list/[id]/route.js export async function DELETE(request, {params}) { const id = params.id; const {searchParams} = request.nextUrl; const sort = searchParams.get('sort'); return NextResponse.json({message: 'test', id, sort}); } 위처럼 되어있고, app/list/ListItem.js <button className="blue"> <span onClick={() => { fetch('/api/list/' + post._id, { method: 'DELETE' }).then(() => { console.log('call delete'); }); }}>삭제</span> </button> 위 처럼 코드를 작성했는데, DELETE route가 실행이 되지 않습니다. 어떻게 해야 하나요?... POST의 경우에는 아래와 같은데 동작이 잘 되서요.. app/write/route.js export async function POST(request) { const data = await request.formData(); let body = Object.fromEntries(data); const db = (await connectDB).db('exam'); await db.collection('post').insertOne(body); return new Response('POST'); } app/write/page.js <form action="/api/write" method="POST"> <input type="text" name="title" placeholder="제목"/> <br/> <input type="text" name="content" placeholder="내용"/> <button type="submit">NEW</button> </form>
답변 1
오.. 뭔가 사용법이 햇갈리는데요. 함수 이름을 POST로 지었다고 해서 POST요청을 하는게 아니고 아마 기본적으로 app/write/route.js 파일에 저 함수가 하나밖에 없어서 post는 동작하는게 아닌가 싶네요 공식문서의 코드는 아래 첨부한 코드처럼 각 method별로 분리되어서 사용하도록 되어있거든요. (공식문서: https://nextjs.org/docs/pages/building-your-application/routing/api-routes) 일단 그걸 떠나서 DELETE route가 실행이 되지 않는다고 하셨는데 DELETE함수가 실행 자체가 안되는건가요? 아니면 data 삭제가 안된다고 말씀하시는건가요? 전자의 경우라면 해당함수가 실행되는지 확인해 보고 같은 파일에 다른 함수가 정의되어 있는지 확인해 봐야할것 같아요... 정확한 원인 모르겠음... 후자의 경우는 1. id를 가져오는 것은 req.query에서 가져오고, 2. post함수를 보니 mongoDB를 사용하시는 것 같은데(?) deleteOne을 사용해 주셔야 하지 않을까 싶습니다. // 공식문서 For example, the API route pages/api/post/[pid].js has the following code: export default function handler(req, res) { const { pid } = req.query res.end(`Post: ${pid}`) }
1 2 3 4 5 6if (req.method === 'POST') { // Process a POST request } else { // Handle any other HTTP method } }
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!