공부/React & Next.js

[Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이)

bumcrush 2023. 12. 19. 13:41
반응형
Next.js Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이)

 

 

 

1. Fetch POST body에 JSON 형태로 데이터 전송
- JSON.stringify() 사용

- headers 를 입력/생략 하느냐에 따라 서버에서 값 받을 때 처리하는 방식이 다름 (3번 참고)

fetch('/api/comment/new', {method:'POST' 
				, headers: {"Content-Type": "application/json",}    //이거 안쓰니깐 서버에서 json으로 인식을 못함
				, body : JSON.stringify({comment: comment, _id: props._id}) 
})




2.  json형 / object형 차이점

// json형태 
// 필드명?에 큰 따옴표가 있음
{"comment" : "test",   "_id" : "03258923zz" }


// object형
// 필드명?에 큰 따옴표 없음 
{comment : "test",   _id : "03258923zz" }

 

 

 

3. 서버에서 request body 데이터 가져오기 

- 1번 fetch 할 때 headers 값 입력해준 경우

// 바로 object형태로 컨트롤 가능 
요청.body.author = session.user.email;

 

 

- 1번 fetch 할 때 headers 값 생략한 경우

//object형으로 변경 후 데이터 추출
요청.body = JSON.parse(요청.body);

//데이터 가져오기 
요청.body.comment 
요청.body._id

 

 

반응형