[Next.js] Handling GET, POST Request

Handling GET Requests

이번에는 새로운 Extension을 사용해 볼 예정입니다. Thunder Client라는 REST API를 요청해 볼 수 있는 확장팩입니다. 예상하기로는 POSTMAN과 비슷한 기능을 하지 않을까 싶습니다.

 

설치되면 보이는 아이콘을 누르고 New Request 버튼을 통해 새로운 API 요청을 만들면 됩니다.

그렇지만! Cursor에서는 사용이 불가능합니다.ㅠㅠ 이럴 수가.. 좌절하지 않고 기존에 사용했던 POSTMAN을 사용해서 요청을 보내보겠습니다.

 

그전에 GET 요청은 지난 시간에 만들었으니 참고 부탁드리겠습니다. 귀찮으시면 POST 코드를 참고하셔도 됩니다.

생각한 요청으로 보냈을 때 원하는 답변을 하는 것을 확인할 수 있습니다.

Handling POST Requests

지난 시간에 지원하지 않는 기능의 경우 405 에러를 응답한다고 했습니다. 확인하고 POST 요청도 만들어보겠습니다.

POST 요청은 데이터를 Body에 담아서 보내오는 요청입니다. 그렇기에 GET과 달리 파라미터가 있어야 합니다.

export async function POST(req: Request) {
  const some = await req.json();
  const newThing = {
    id: things.length + 1,
    text: some.text,
  };
  
  things.push(newThing);
  
  return new Response(JSON.stringify(newThing), {
    headers: {"Content-Type": "application/json",},
    status: 201,
  });
}

해당 예시는 응답에 새롭게 추가된 정보를 반환해 주었지만, 원하는 형태로 반환해 주면 됩니다.

 

Response에 대하여

Response로 GET과 POST의 응답을 만들어서 반환시켜 줍니다. 이때 Response.json()과 new Response()에 대해서 간단히 알고 넘어가겠습니다.

Response.json()의 경우 JSON object를 담아서 보내면 자동으로 JSON.stringify 처리와 함께 headers에 Content-Type: application/json 및 status: 200 설정이 됩니다. 그렇기에 응답 코드가 200이고 간단한 경우에는 json을 사용하면 됩니다.

그와 달리 생성자를 이용하는 경우 수동으로 JSON.stringify 처리를 해주고 기타 옵션을 작성해주어야 합니다. 오히려 그렇기에 원하는 옵션으로 설정할 수 있습니다. 원하는 형태가 json으로 처리하는 것과 다른 경우 사용하면 됩니다.
+ 원하는 옵션을 하나의 변수로 만들어서 코드의 중복도 줄일 수 있을 것 같습니다.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/API/Response

https://nextjs-ko.org/docs/app/building-your-application/routing/route-handlers

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY