2023-06-06 TIL

1. 오류 발생

 

아래 코드를 먼저 보자.

const param = new URLSearchParams(location.search);
const id = param.get('id');
getMovie(id);

const getMovie = async(id)=>{
    const movie = await fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}&language=ko`,{method:'GET'})
                        .then(response=>response.json())
                        .catch(console.log);
    showContent(movie)
}

 

위 코드를 보면 '스코프 오류' 에 대해서 알 수가 있다. getMovie 를 함수로 선언해주기 이전에 먼저 호출을 했기때문에 초기화 이전에 호출했다는 문제로 오류가 발생한다.

 

위치 이동만으로 해결이 가능한 문제

( 스코프의 개념을 잊지말아야 한다 )

 

const getMovie = async(id)=>{
    const movie = await fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}&language=ko`,{method:'GET'})
                        .then(response=>response.json())
                        .catch(console.log);
    showContent(movie)
}

const param = new URLSearchParams(location.search);
const id = param.get('id');
getMovie(id);

 

2. 버그 발견

 

영화 상세 페이지 내부에서 리뷰 구현하는 도중, 삭제 및 수정에 관련한 버그가 발생했다.

 

예를 들어 'A' 라는 사용자가 존재한다 가정을 해보자. 'A'는 범죄도시 3 에도 리뷰를 달았고, 아바타 2 에도 리뷰를 달았다고 가정했을때

갑자기 작성한 리뷰가 부끄러워져서 삭제를 하려한다. 근데 막상 시도를 해보니 삭제가 제대로 되지 않았다.

 

//리뷰 삭제
function deleteReview(tag){
    const deleteItem = findItem(tag,'D');
    const validation = passwordVerify(deleteItem);
    if(validation){
        localStorage.removeItem(deleteItem);
        window.location.reload();
    }else if(validation==null){
        return;
    }else{
        alert('비밀번호가 일치하지않습니다. 다시 시도해주세요.');
    }
}
// < Before > 
function findItem(t=null,word='R'){
    const reviewArray = Object.keys(localStorage);
    if(word=='R'){
        return reviewArray;
    }else{
        const userId = t.parentNode.getElementsByTagName('h4')[0].innerHTML;
        const item = reviewArray.filter(v=>{
            const jsonObj = JSON.parse(localStorage.getItem(v));
            if(jsonObj.ID==userId)return v;
        });
        return item;
    }
}

// < After > 
function findItem(t=null,word='R'){
    const reviewArray = Object.keys(localStorage);
    if(word=='R'){
        return reviewArray;
    }else{
        const movieIdOfReview=t.parentNode.getAttribute('id');
        const userId = t.parentNode.getElementsByTagName('h4')[0].innerHTML;
        const item = reviewArray.filter(v=>{
            const jsonObj = JSON.parse(localStorage.getItem(v));
            if(jsonObj.ID==userId && jsonObj.movieNumber==movieIdOfReview)return v;
        });
        return item;
    }
}

 

로직을 살펴보자면, deleteReview 라는 함수가 실행되었을때, findItem을 통해 먼저 해당 값을 받아오게 하는데, 이 과정에서 설정 오류가 존재했다. 'A'라는 작성자의 ID 값만을 비교했기 때문에 '첫번째 영화, 두번째 영화에서 작성한 리뷰의 구분점이 존재하지 않았던 것' 이다.

제일 쉬운 구분점으로는 각각 영화의 ID 값이었기에, 해당 상위 부모 태그에 id 값으로 영화 고유 id 값을 부여해주었으며, findItem 함수 내부에서 그 값을 활용해 각각 리뷰마다 저장되던 movie ID 값을 비교해 해당 리뷰를 반환해주게끔 로직을 변경해주니 정상 작동되었다.