4.6 id를 string으로 변경시 오류
53
3 asked
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;
}
Answer 2
0
안녕하세요 으악님 이정환입니다.
아마 json-server의 버전 차이때문에 발생하는 문제로 보입니다. 보통 json-server로 실행된 백엔드 서버는 클라이언트측에서 굳이 Content-Type을 설정하지 않아도 자동으로 처리해주는게 일반적인데, 현재 사용하고 계신 json-server의 버전에서는 이런 기능이 제공되지 않는것으로 보입니다.
혹시 강의와 동일하게 npx json-server server/db.json으로 json-server를 실행하고 계신 상황인지 체크가 필요할 것 같습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 으악님.
TypeScript와 API 연동을 진행하시면서 encountered 오류에 대한 해결 과정에서 Content-Type 헤더가 가지는 역할에 대해 질문해주셔서 감사드립니다. 이 헤더를 추가하면 중요한 이유를 설명드리겠습니다.
Content-Type 헤더의 역할
Content-Type 헤더는 서버에 전송되는 데이터의 유형(type)을 나타냅니다. 주로 클라이언트가 서버로 데이터를 전송할 때, 전송되는 데이터가 어떤 형식을 가지고 있는지 서버에게 명확히 알리기 위해 사용됩니다. 이를 통해 서버는 데이터를 올바르게 해석하고 처리할 수 있게 됩니다.
왜 application/json인가요?
데이터 형식 명시:
- JSON 형식으로 데이터를 보내려면
Content-Type을"application/json"으로 설정해야 합니다. 이는 서버에게 본문(body)에 포함된 데이터가 JSON 형식임을 알려주기 위해서입니다.
- JSON 형식으로 데이터를 보내려면
서버의 기대치와 일치:
- 많은 RESTful API 서버는 POST, PUT, PATCH 요청에서 데이터가 JSON 형식으로 전송되는 것을 기대하며, 이러한 경우 해당 형식으로 설정되지 않으면 서버가 데이터를 어떻게 처리해야 할지 몰라 잘못된 처리를 하게 될 수 있습니다.
- 많은 RESTful API 서버는 POST, PUT, PATCH 요청에서 데이터가 JSON 형식으로 전송되는 것을 기대하며, 이러한 경우 해당 형식으로 설정되지 않으면 서버가 데이터를 어떻게 처리해야 할지 몰라 잘못된 처리를 하게 될 수 있습니다.
오류 방지:
Content-Type헤더가 없으면 서버는 요청의 본문(body)을 예상된 형식으로 변환하려고 시도하다가 실패할 수 있으며, 이에 따라 오류가 발생합니다. 귀하의 상황에서 이로 인해 발생한 오류도 해결된 것으로 보입니다.
따라서, API 호출 시 데이터가 json인 경우에는 항상 Content-Type: application/json 헤더를 추가하여 서버에게 명확히 데이터 형식을 알려주는 것이 베스트 프랙티스입니다.
관련하여 비슷한 이슈를 다룬 유사한 질문을 참고하실 수 있는 링크는 다음과 같습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
20
2
6.8 zustand 세션 질문입니다.
0
66
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
56
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
0
198
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
61
2
4.11 바로 투두 삭제가 안됨 질문
0
73
3
매개변수 updatedTodo 관련 질문
0
55
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
69
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
58
2
리액트 타입스크립트 관련 질문있습니다.
0
52
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
86
2
ui 파일 질문드립니다.
0
62
1
tanstack query devtools에서 질문있습니다!
0
56
2
댓글 삭제 시 isPending 질문
0
54
2
두번째 예외상황에 대해 질문있습니다!
0
53
1
리액트 쿼리 질문입니다
0
56
2
개발자도구에서 components 가 안보입니다.
0
75
3
state 관리에 대한 정리
0
68
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
146
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
66
1
삭제가 바로 안되네요ㅠ
0
54
2
access 토큰은 꼭 소셜서버로부터 받아서 사용해야만하나요?!
0
71
2
전역 모달이 여러 개일 경우 모달 프로바이더는 몇 개가 필요한가요?
0
52
1
프로필 수정 후 post item 의 글들에서 수정된 프로필 업데이트 반영
0
69
2