1. 개발 상황
React + Node.js 환경에서 express로 서버를 열고 해당 서버로 delete, post를 이용해 위시리스트(찜) 기능을 구현하고 있는 상황이었다.
빈 하트 아이콘을 누르면 post, 하트 내부가 꽉 채워지고
채워진 하트 아이콘을 누르면 delete, 하트 내부가 비워지는
기능을 구현하고 있었다.
2. 오류
위시리스트 기능을 테스트하던 도중 아래와 같은 상황이 발생하였다.
하트를 약 5~6번 정도 눌러 서버에 요청을 보냈을 때, 아래와 같이 구글 크롬 개발자 도구의 (네트워크 탭 - 상태) 부분이 "대기 중"이라는 상태가 되고 위시리스트 기능이 작동을 안 하는 것이었다.
처음 5~6개의 요청은 정상적으로 작동하였기 때문에 당연히 서버 쪽 오류는 아닐 거라 생각했다.
그래서 신나게 React 코드를 3시간 동안 쳐다보며 수정 작업을 하였다.
하지만 3시간이 지나도 삽질은 끝나지 않았고, 포기할까 생각하던 도중,, 서버도 한번 건드려 보자라는 생각을 했다...
막 건드리다가 결국 해결했는데 너무 허무했다....ㅠ
3. 해결
오류가 났던 코드
homeRouter.post(API주소, async (req, res) => {
const { user_id, product_id } = req.body;
// 기타 처리 코드 ...
});
해결한 코드
homeRouter.post(API주소, async (req, res) => {
const { user_id, product_id } = req.body;
const status = 기타 처리 코드 ..
res.send(status);
});위시리스트 기능을 테스트 할 때 post, delete 방식은 결과를 리턴하는 게 없어서 res.send(); 를 사용 안 해줬었는데 이 부분에서 오류가 난 것이었다...
get 방식이 아니더라도 꼭 서버에서 뭐든 반환해주자!!