🔥 Trouble Shooting - 영화 앱 북마크 기능 삽질기 🎬

😱 발생한 문제

열심히 infinite scroll을 구현을 하고 테스트를 진행하는데...!
개발하면서 이상한 현상을 발견했어요:

1. 북마크 버튼 클릭 → 북마크한 영화들이 잘 보임
2. 북마크 해제 후 메인으로 돌아가기
3. 다시 북마크 버튼 클릭 → 헉! 북마크한 영화들이 보이다가 갑자기 API로 받아온 일반 영화들이 함께 나타남! 😱

👀 처음 작성했던 코드

북마크 버튼 이벤트 처리 (app.js)

$btnBookmark.addEventListener("click", () => {
    isBookmarkChecked = !isBookmarkChecked;
    if (isBookmarkChecked) {
        $btnBookmark.classList.add("active");
        $header.classList.add("collapsed");
        $header.style.display = "none";
        $mainSubTit.style.display = "block";
        const data = getMovieListStore;
        movieList.setMovies(data, "replace");
    } else {
        $btnBookmark.classList.remove("active");
        $header.classList.remove("collapsed");
        $header.style.display = "flex";
        $mainSubTit.style.display = "none";
        movieList.init();
    }
});

MovieList 클래스 (MovieList.js)

export class MovieList {
    constructor(selector) {
        this.$movieList = document.querySelector(selector);
        this.data = [];
        this.loading = false;
        this.currentPage = 1;
    }

    init() {
        this.loadMovie();
        this.setupInfiniteScroll();
    }

    setupInfiniteScroll() {
        window.addEventListener("scroll", () => {
            if (this.isNearBottom() && !this.loading && this.data.length < 101) {
                this.loadMovie();
            }
        });
    }

    setMovies(movies, type = "append") {
        if (type === "replace") {
            this.data = [];
            this.currentPage = 1;
            this.data = movies;
        } else {
            this.data.push(...movies);
        }
        this.render();
    }
}

🔍 문제 원인 분석

코드를 하나하나 살펴보니 여러 가지 문제점이 있었어요:

1. 무한스크롤이 계속 동작 중! 🔄

   • 북마크 모드로 전환해도 스크롤 이벤트가 계속 살아있음
   • 스크롤할 때마다 loadMovie()가 호출되어 일반 영화 목록을 불러옴

2. 모드 구분이 없음 🤔

   • 지금이 북마크 모드인지 일반 모드인지 구분할 수 없음
   • 그래서 북마크 데이터를 보여주다가도 무한스크롤이 동작하면 일반 영화가 추가됨

3. 이벤트 리스너 관리 부재 ⚠️

   • 무한스크롤 이벤트가 중복으로 등록될 수 있는 구조
   • 북마크 모드에서는 필요 없는 스크롤 이벤트가 계속 동작

💡 해결 방법

1. 북마크 모드 플래그 추가

class MovieList {
    constructor(selector) {
        // ... 기존 코드 ...
        this.isBookmarkMode = false; // 👈 북마크 모드 체크 플래그 추가
    }
}

2. 무한스크롤 이벤트 관리 개선

class MovieList {
    removeInfiniteScroll() {
        // 이전에 등록된 스크롤 이벤트 제거
        window.removeEventListener("scroll", this.handleScroll);
    }

    setupInfiniteScroll() {
        this.removeInfiniteScroll(); // 이전 이벤트 정리
        this.handleScroll = () => {
            // 북마크 모드가 아닐 때만 추가 로딩
            if (this.isNearBottom() && !this.loading && !this.isBookmarkMode) {
                this.loadMovie();
            }
        };
        window.addEventListener("scroll", this.handleScroll);
    }
}

3. 모드 전환 메소드 추가

setBookmarkMode(isBookmark) {
    this.isBookmarkMode = isBookmark;
    if (isBookmark) {
        this.removeInfiniteScroll(); // 북마크 모드면 무한스크롤 중지
    } else {
        this.setupInfiniteScroll(); // 일반 모드면 무한스크롤 활성화
    }
}

🎓 배운 점들

1. 이벤트 리스너는 신중하게!

// 잘못된 방법 (이벤트 리스너 중복 등록)
setupInfiniteScroll() {
    window.addEventListener("scroll", () => {
        // ... 
    });
}

// 개선된 방법 (이전 이벤트 제거 후 등록)
setupInfiniteScroll() {
    this.removeInfiniteScroll();
    this.handleScroll = () => {
        // ...
    };
    window.addEventListener("scroll", this.handleScroll);
}

2. 상태(모드) 관리의 중요성

• 북마크 모드인지 아닌지 명확히 구분
• 각 모드에 맞는 동작만 실행되도록 제어

3. 클린업 함수의 필요성

• 모드 전환 시 이전 상태를 깔끔하게 정리
• 불필요한 이벤트나 동작 방지

🎯 마무리

이번 트러블슈팅을 통해서 한 가지 기능(북마크)이 다른 기능(무한스크롤)에 영향을 미칠 수 있다는 걸 배웠어요. 특히 이벤트 리스너 관리와 상태 관리가 얼마나 중요한지 실감했네요!

"잘 돌아가는 것 같은데?" 하고 넘어갔다가 나중에 더 큰 문제가 될 수 있었는데, 이런 경험을 통해 좀 더 꼼꼼하게 코드를 작성하게 된 것 같아요. 😊

💭 다음에 비슷한 기능을 만들 때 체크리스트

1. 현재 동작 중인 이벤트 리스너가 있는가?
2. 모드나 상태 전환이 필요한 기능인가?
3. 전환 시 정리해야 할 것들이 있는가?
4. 다른 기능과 충돌할 가능성은 없는가?