ID값을 넘겨받고 싶은데 null값으로 나온다면?

function goOpinionWrite() {
    location.href = '/event/opinion/write?Id='+'[[ ${id} ]]';
}

이 창은 의견 쓰는 창으로 넘어가는 코드!

 

@GetMapping("/write")
public String openOpinionWrite(@RequestParam(required = false) final Long eventId, Model model) {
    model.addAttribute("eventId", eventId);
    return "thymeleaf/event/opinion/write";
}

OpinionController 부분에서 윗 부분에서 id를 받아서 model 안의 attribute에 담아줘요

그리고 나서 opinion\write.html에 연결된 의견 등록 부분에서

const id = /*[[ ${eventId} ]]*/;
console.log("Id :",id);

요렇게 eventId 값을 담아서 콘솔창에 출력해봤어요

 

등록 버튼을 누르면 해당 코드가 작동하면서 분명 view-source:http://localhost:8080/event/opinion/write?Id=5 이 주소에서 Id 값인 5가 잘 출력될거라고 생각했는데 

 

제게 돌아온건... null 값을 담고 있는 아이디였을뿐 

@PostMapping("/v1/opinions/{eventId}")
public Long save(@RequestBody final OpinionRequestDto params, @AuthenticationPrincipal PrincipalDetail principalDetail, @PathVariable Long eventId) throws Exception {

    return opinionService.save(params,principalDetail.getUser(), eventId);
}

현재 의견을 생성하는 PostMapping 부분은 이렇게 만들어져있어요

 

의견 등록 페이지를 가져오는 GetMapping을 API Tester로 테스트해봤어요

 

임의의 eventId값인 1을 넣어서 테스트해보니까 잘 작동하더라구요

엇.. .그런데 생각해보니 제가 봤던 주소값이랑 다른 부분 발견!

 

해당 창에서 프레임 소스를 보면 api 주소를 확인할 수 있는데 

view-source:http://localhost:8080/event/opinion/write?Id=5

제가 갖고있는 주소는 Id로 변수 네이밍을 줬네요! 이론이론..

그래서 eventId 값을 넣어줄때 불러올수가 없었던거였어요

 

function goOpinionWrite() {
    location.href = '/event/opinion/write?eventId='+'[[ ${id} ]]';
}

api 주소를 넘겨주는 부분에서 id를 eventId로 변경해주고 다시 실행해봤습니다.

 

드디어 완벽하게 의견 생성 완료!

진짜 잘 생성이 됐는지 확인해보기 위해 DB쪽 데이터도 살펴봤습니다

 

제가 만들었던 의견이 맨 밑줄에 잘 들어간걸 볼 수 있습니다. 

이벤트 ID 부분에도 5가 잘 들어가있네요!

 

불러주는 곳의 주소를 파라미터 이름과 같이 맞춰줘야 된다는 거 꼭 기억해야겠어요