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

박지영님의 프로필 이미지

작성한 질문수

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

조회기능 구현

url 주소에 값을 받아오지 못합니다

작성

·

26

0

Request URL:

http://localhost:3000/todo/read/$%7Bprefix%7D/$%7Btno%7D

게시물 번호값인 tno를 int 로 받아오지 못하고 있습니다

어떻게 해야할까요?

 

 

답변 1

0

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

박지영님, URL에서 변수 값을 받아오는데 문제가 있으시군요. 질문에서 제공하신 URL을 보니 ${prefix}${tno}가 템플릿 리터럴/변수로 처리되지 않고 단순 문자열로 인식되고 있는 것 같습니다. 해당 변수를 올바르게 처리하려면 다음과 같은 접근 방법을 시도해보세요:

React에서 컴포넌트 내에서 URL을 생성할 때, 백틱(`)을 사용한 템플릿 리터럴을 활용하세요.

예를 들어:

const prefix = 'examplePrefix';
const tno = 123;
const url = `http://localhost:3000/todo/read/${prefix}/${tno}`;

이렇게 하면 prefixtno 값이 제대로 URL에 포함됩니다.

또한, 스프링부트 API 서버에서 해당 변수를 받을 때는 RESTful 방식으로 URL 경로 변수를 매핑할 수 있도록 컨트롤러 메서드에 이를 명시해야 합니다.

예를 들어:

@RestController
@RequestMapping("/todo")
public class TodoController {

    @GetMapping("/read/{prefix}/{tno}")
    public ResponseEntity<Todo> getTodo(
            @PathVariable String prefix, 
            @PathVariable int tno) {
        // tno 값을 int로 제대로 받을 수 있습니다.
        Todo todo = someService.getTodoByPrefixAndTno(prefix, tno);
        return ResponseEntity.ok(todo);
    }
}

위와 같이 @PathVariable 어노테이션을 사용하여 경로 변수로 받아오면, tnoint로 처리하는 데 문제없을 것입니다.

추가적으로 URL 인코딩도 확인해보시고, 프론트엔드와 백엔드 간의 데이터 전달 방식이 일치하는지 점검해보세요. 도움이 필요하시면 언제든지 질문해 주세요!

아래는 관련된 스프링 부트 문서입니다:
Spring MVC Path Matching and Content Negotiation

감사합니다!