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

hun1246

작성한 질문수

코드로 배우는 React 19 with 스프링부트 API서버

REST 방식 컨트롤러 만들기(2)

22. REST 방식 컨트롤러 만들기(2), 29. 등록처리 부분 질문이 있습니다.

작성

수정됨

22. REST 방식 컨트롤러 만들기(2)에서

포스트맨으로 글 등록 테스트 할 때 complete 필드가 없는 경우 Bad Request 400에러가 나는 걸 확인했습니다.

{
    "title": "Test title",
    "writer": "testuser",
    "complete": false,
    "dueDate":  "2026-02-04"
}

위와같이 complete필드를 추가하니 잘 되었는데,

문제는 29강에서처럼 브라우저 화면에서 테스트 해보니 아래와같이 400에러가 발생합니다.

여기도 마찬가지로 입력폼에서 complete필드가 없어서 그런것 같은데 강의에서는 등록이 잘 되는게 이해가 안되네요.

섹션4까지 완성된 코드를 다운받아서 실행해보았지만 위의 사진처럼 브라우저에서 등록 시 400에러가 발생합니다.

react typescript spring-boot jpa jwt

답변 2

구멍가게코딩단

지식공유자

음.. 현재 실습하시는 버전 정보를 제가 모르는 상황이지만.. 혹시 스프링부트의 버전에 따라서 JSON 라이브러리의 버전이 좀 달라지면서 생기는 문제가 아닐까 싶네요(제가 가진 소스코드로는 에러가 발생하지는 않아서 그렇게 생각합니다.).

소스 코드를 제가 확인해 볼 수 있으면 댓글로 남겨주시면 감사하겠습니다.

올려주신 화면에 보이는 메시지로는 정확한 원인을 알기는 좀 어렵네요.

complete관련 해결책을 말씀드리면 등록 하려는 객체에 complete 속성을 추가해 주셔야 할 듯 합니다. 컴포넌트에서 클릭해서 등록할때 사용하는 todo 객체에 todo.complete=false 와 같이 추가하시면 됩니다.

hun1246

질문자

강의 올려주신 소스코드 그대로 다운받아서 실행하였습니다. 스프링부트 4버전으로 작성되어있었습니다.

plugins {
    id 'java'
    id 'org.springframework.boot' version '4.0.0'
    id 'io.spring.dependency-management' version '1.1.7'
}

말씀하신대로 프론트엔드 쪽에서

interface TodoAdd {
  title: string,
  writer: string,
  dueDate: string,
    complete: boolean
}

const initState:TodoAdd = {
  title: '',
  writer: '',
  dueDate:'',
  complete: false   // ✅ 명시적으로 보냄
}

이렇게 complete필드를 추가해서 글 작성을 추가하니 작성 잘 되는 것을 확인했습니다.

@PostMapping("/")
public Map<String, Long> register(@RequestBody TodoDTO todoDTO){
    log.info("TodoDTO: " + todoDTO);
    Long tno = todoService.register(todoDTO);
    return Map.of("TNO", tno);
}

@RequestBody에서 todoDTO 필드를 엄격하게 체크해서 문제가 발생한건지 싶네요..

인프런 AI 인턴

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

hun1246님, 강의 진행 중 만난 Bad Request 400 에러는 주로 데이터 전송 과정에서 서버가 클라이언트의 요청을 이해하지 못하거나, 필수적인 데이터가 누락된 경우 발생합니다.

핵심 문제:

제공된 JSON 데이터에서 complete 필드는 서버에서 요구하는 필수 입력 항목인 것으로 보입니다. 따라서 완전한 데이터를 전송하지 않으면 400 에러가 발생할 수 있습니다.

문제 해결:

데이터 구조 확인: 서버에서 요구하는 모든 필드를 클라이언트가 제공하는지를 확인하세요. 서버 코드에서 해당 필드를 Optional하게 설정하거나, 기본값을 지정할 수 있는지 고려해볼 수도 있습니다.
강의 내용 재확인: 강의에서 해당 필드가 어떻게 다뤄지고 있는지 다시 확인해주세요. 강의에서 특정 필드가 기본값으로 자동 설정되는 부분이 있었다면, 해당 코드를 정확히 구현했는지 확인할 필요가 있습니다.
데이터 전송 방식 검토: 본문의 Postman과 브라우저 테스트에서 사용하는 데이터 포맷이 일치하는지 확인해 보세요. JavaScript로 브라우저 측에서 JSON 데이터를 전송할 때도 Axios나 Fetch API의 설정이 정확한지 확인해야 합니다.

다음은 비슷한 에러에 대한 기존 질문으로, CORS 설정과 관련된 내용이 포함되어 있으니 참고하시기 바랍니다. 또한, 스프링부트 컨트롤러가 JSON 형태의 데이터 입력을 온전히 받을 수 있도록 적절히 어노테이션이 설정되어 있는지도 검토해보세요.

마지막으로, 강의를 따라서 코드 작성 시 작은 오타나 설정 누락이 에러의 원인이 될 수 있으니 차분히 코드를 검토하시기를 추천드립니다.

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

hun1246

작성한 질문수

전체 Q&A

질문하기