상황
모락모락 프로젝트를 진행하면서 프론트팀과 통신작업을 진행 중 이었다.
API를 만들고 있던중 프론트 팀원 중 한분이 나를 불렀다.
??? : 시온님 게시글 좋아요가 안눌리는데요?
다행스럽게도 테스트 코드작성을 확실히 해둔덕에 곧바로 테스트 코드를 실행 시켜보았다.
다행인지 불행인지 테스트 코드가 통과 되었고, 포스트 맨을 이용하여 기능 테스트 또한 진행하였다.
기능 테스트 또한 문제없이 작동이 정상적이었다.
문제
실제로 내눈으로 웹사이트를 통해서 좋아요가 안눌린다는 것을 확인하기 까지는 얼마 걸리지 않았다.
사실 문제를 확인하고 매우 혼돈의 도가니 였다. 분명 로컬에서는 잘되는데 왜 서버에서는 안되는거지?
서버에서 코드가 변경되었는지도 확인해보고 빌드도 다시 해보았다.
하지만, 문제는 해결되지 않았고 머리를 식힐겸 저녁을 먹고 나서 머리를 스치는 생각이 확 지나갔다.
해결
문제는 서버 문제가 아니라 프론트 문제라는것을 느꼈다. 그리고 곧바로 디버깅을 시작했다. 좋아요 서비스 로직에 디버깅포인트를 놓고 컨트롤러에도 디버깅 포인트를 두었다. 하지만, 이상하게 디버깅이 걸리지 않았다. 그이유는 모락모락은 시큐리티가 적용되어있기 때문이었다. 그래서 시큐리티 필터의 doFilter 부분에 디버깅 포인트를 걸어 주었다. (사실 시큐리티 문제일 거라고는 상상도 못했다. 그래서 생각보다 오래걸렸다.)
doFilter에 걸자 디버깅이 걸렸고 결국 프론트가 좋아요 API를 호출할때 jwt토큰을 넘겨주지 않아서 좋아요가 눌리지 않았던 오류였다.
다행스럽게도 문제는 잘 해결되었고, 디버깅 포인트를 잘 찾는것, 오류가 생겼을때 혼자 생각하기보다, 먼저 디버깅을 통해 눈으로 통신 흐름을 확인하는것을 깨닫게 되었다.
프론트가 에러를 발견하지 못한 이유
모락모락 프로젝트를 진행할 때 프론트에서 ssr 방식을 도입했는데, 클라이언트 브라우저에 있는 액세스 토큰에 서버가 접근을 못해서 계속 액세스토큰 없이 전송이 되었다고 한다. 그래서 그부분을
처음에는 CSR 방식으로 바꿔서 해결했다가, 그 뒤에는 그냥 SSR 로 불러온 다음에 클라이언트에서 GET 요청 한 번 더 보내서 좋아요 데이터 불러오는 식으로 고쳤다고 한다.
