발생한 문제
간단한 댓글 기능을 구현 중 좋아요 기능을 추가하고 있었다.
그러던 중 갑자기 난생 처음보는 에러를 만났다.
대충 느낌을 보아하니 콜백함수를 그만 부르라는 말 같다.......
call 스택이 넘친거 같다..
현재 내 코드의 구조는
function getReviews() {
...
deleteReview();
editReview();
likeReview();
}
이런 식이고 저 내부함수에서는 클릭이벤트가 발생할 때마다 이 getReviews 를 호출한다.
해당 오류를 검색해보니 무한루프에 빠지면 그렇다는 것 같다.
그래서 무한루프인 구간을 찾아보기로 했다.
.
.
.
.
찾고나니 너무 황당한 실수였다...
function likeReview() {
const $like_icon = document.querySelectorAll(".like_icon");
$like_icon.forEach((icon) => {
icon.addEventListener("click", (e) => {
selectId = e.currentTarget.dataset.id;
const data = JSON.parse(localStorage.getItem(selectId));
data.likeCount++;
localStorage.setItem(selectId, JSON.stringify(data));
});
});
getReviews(); // 요기있는게 문제
}저 함수를 이벤트 리스너 내부가 아니라 바깥으로 빼면서 무한루프에 빠진 것이었다.....
재빨리 옮기고 실행하니 정상동작 한다.
그나마 빨리 해결해서 다행이다.
처음에는 내가 무한루프를 만들었다고??? 라는 생각에 일단 부정하고 있었는데
혹시라는 마음에 찾아봤더니 진짜 무한루프였다....
결론, 나 자신을 너무 믿지 말자.
