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

작성한 질문수

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

(4.6) 데이터 수정 요청 관리하기 (useMutation)

4.6 id를 string으로 변경시 오류

작성

id를 전부 string으로 변경했음에도 계속 오류가 발생해서 ai한테 도움을 요청했더니 create-todo.ts에 header값을 붙이라고 하더라고요!

그래서 해당 파일 코드에

headers: { 'Content-Type': 'application/json',}

를 붙여줬더니 정삭작동하는 걸 확인할 수 있엇습니다. 왜 이 헤더를 붙여줘야 하는 건가요?

import { API_URL } from '@/lib/constants';
import type { Todo } from '@/types';

export async function createTodo(content: string) {
  const response = await fetch(`${API_URL}/todos`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ content, isDone: false }),
  });
  if (!response.ok) throw new Error('Create Todo Failed');

  const data: Todo = await response.json();
  return data;
}

react typescript react-query supabase zustand

답변 2

이정환 Winterlood

지식공유자

안녕하세요 으악님 이정환입니다.

아마 json-server의 버전 차이때문에 발생하는 문제로 보입니다. 보통 json-server로 실행된 백엔드 서버는 클라이언트측에서 굳이 Content-Type을 설정하지 않아도 자동으로 처리해주는게 일반적인데, 현재 사용하고 계신 json-server의 버전에서는 이런 기능이 제공되지 않는것으로 보입니다.

혹시 강의와 동일하게 npx json-server server/db.json으로 json-server를 실행하고 계신 상황인지 체크가 필요할 것 같습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 으악님.

TypeScript와 API 연동을 진행하시면서 encountered 오류에 대한 해결 과정에서 Content-Type 헤더가 가지는 역할에 대해 질문해주셔서 감사드립니다. 이 헤더를 추가하면 중요한 이유를 설명드리겠습니다.

`Content-Type` 헤더의 역할

Content-Type 헤더는 서버에 전송되는 데이터의 유형(type)을 나타냅니다. 주로 클라이언트가 서버로 데이터를 전송할 때, 전송되는 데이터가 어떤 형식을 가지고 있는지 서버에게 명확히 알리기 위해 사용됩니다. 이를 통해 서버는 데이터를 올바르게 해석하고 처리할 수 있게 됩니다.

왜 `application/json`인가요?

데이터 형식 명시:
- JSON 형식으로 데이터를 보내려면 Content-Type을 "application/json"으로 설정해야 합니다. 이는 서버에게 본문(body)에 포함된 데이터가 JSON 형식임을 알려주기 위해서입니다.
서버의 기대치와 일치:
- 많은 RESTful API 서버는 POST, PUT, PATCH 요청에서 데이터가 JSON 형식으로 전송되는 것을 기대하며, 이러한 경우 해당 형식으로 설정되지 않으면 서버가 데이터를 어떻게 처리해야 할지 몰라 잘못된 처리를 하게 될 수 있습니다.
오류 방지:
- Content-Type 헤더가 없으면 서버는 요청의 본문(body)을 예상된 형식으로 변환하려고 시도하다가 실패할 수 있으며, 이에 따라 오류가 발생합니다. 귀하의 상황에서 이로 인해 발생한 오류도 해결된 것으로 보입니다.

따라서, API 호출 시 데이터가 json인 경우에는 항상 Content-Type: application/json 헤더를 추가하여 서버에게 명확히 데이터 형식을 알려주는 것이 베스트 프랙티스입니다.

관련하여 비슷한 이슈를 다룬 유사한 질문을 참고하실 수 있는 링크는 다음과 같습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

으악

작성한 질문수

전체 Q&A

질문하기

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

4.6 id를 string으로 변경시 오류

Content-Type 헤더의 역할

왜 application/json인가요?

`Content-Type` 헤더의 역할

왜 `application/json`인가요?