TIL- API에서 받아온 데이터 효율적으로 사용하기

오늘은 메인 페이지에서 상세 페이지로 이동했을 때 페이지의 로딩 시간이 생각보다 길어서 이것을 해결하려고 했습니다. 

맨 처음에 API를 받아올 때는 객체 안에 3개의 주제를 가진 배열이 40개의 항목 안에 8개 정도의 속성이 있었는데 이 데이터를 전부 합친 다음 하나의 배열로 만들어서 find 메서드를 이용해서 id값을 찾아서 해당 id에 속한 내용을 html에 전달하는 방식을 사용했는데 시간 복잡도는 O(N) + O (N) = O(N)이지만 주제별로 처음에 40개씩 나눠서 40개의 항목에 있는 속성의 id만 찾으면 똑같이 시간 복잡도가 O(N)지만 데이터의 수가 꽤 크게 차이 날 거라고 예상해서 코드를 바꿔봤습니다.

 

기존 API 처리 방식
// 모든 영화 데이터를 하나의 배열로 병합     
        const allMovies = Object.values(movieData).reduce((acc, curr) => acc.concat(curr), []);
        // 영화 ID 찾기
        const foundMovie = allMovies.find(movie => movie.id === movieId);

 

 

//  영화 데이터 가져오기
        const movieData = await fetchData();
        const getData = movieData[`${type}`]
        console.log(typeof(movieId));
        

        getData.forEach(foundMovie => {
            if (foundMovie.id === movieId) {
                console.log(foundMovie);
                renderMovieData(foundMovie);
            }
        })

 

나중에 보니 크롬 브라우저로 두 방법을 시간을 측정 해보니 랜더링의 시간에 크게 차이가 없었습니다.페이지가 느리게 로딩되던 이유는 처음에 페이지에 이미지를 저장해오는 시간이 길었던 것이고 제가 계속 캐시를 초기화 했기 때문이었습니다. 하지만 코드가 더 효율적으로 작성한 것 같아서 만족하기로 했고 시간 또한 당시에 인터넷이 느렸던 것인지 현재는 빠르게 로딩되었습니다.