디버깅
이 문제를 해결하기 위해 디버깅부터 진행했다.
alert(변수), console(변수) 로그로 변수 값을 그때그때 확인한다.
또는 디버그 모드로 실행해도 된다. 디버깅을 생활화하자..!
alert로 변수를 확인하는게 편하긴 했다.
에러
Required request parameter 'fromUserNickname' for method parameter type String is not present
프론트에서는 Interner Server Error(500에러), 서버에서는 위의 오류가 났다. 파라미터가 없다(not present) 라고 한다.
파라미터 전달이 제대로 되지 않는 거 같아서 컨트롤러에서 @PathVariable 어노테이션 뒤에 ("nickname")을 추가해서, url "/user/{nickname}/followlist" 와 파라미터 변수 String fromUserNickname 을 연결해주었다.
@GetMapping("/user/{nickname}/followlist")
public List<FriendRequestDto> FriendsList
(@PathVariable("nickname") String fromUserNickname) {
..
}
이렇게 하고 디버깅하여 alert 값을 확인해보니 nickname이 undifined (값 없음) 로 들어와서 프론트엔드를 확인해보았다. 맨 처음 파라미터를 받아 전달해주는 곳은 onclick 함수이므로 자바스크립트가 아닌 html으로 가보았다.
아니나 다를까 openclose 라는 함수의 파라미터 안에 아무것도 안 들어가 있었다. 파라미터 안에 변수를 넣기 위해서 타임리프를 사용했다.
<a id="posting-box-btn" th:myName="${userInfo.nickname}"
th:onclick="openclose(this.getAttribute('myName'))"
class="btn btn-primary btn-lg" href="#"
role="button">친구목록 열기</a>이렇게 하고 나니 api가 정상적으로 작동되었고, 아직 친구목록이 없기 때문에 아무것도 조회가 되지 않았다.
이제 친구 추가, 친구 삭제 프론트엔드를 구현하러 가야겠다... 산넘어 산...
