TIL - 비동기 데이터 처리 및 렌더링

오늘은 페이지를 데이터 베이스에서 동적으로 받아와서 렌더링 하는 과정을 학습했습니다.

 

제가 맡은 역할이 영화내용 상세 페이지여서 다른 페이지에서 영화를 클릭하면 해당 영화 ID값을 가지고 영화 상세 페이지에 해당 영화에 관한 내용으로 렌더링 작업을 하기로 했습니다.

 

처음에 생각한 방법은

 

window.onload = async () => {
    // URL에서 영화 ID 추출
    const urlParams = new URLSearchParams(window.location.search);
    const movieId = urlParams.get('Id');
 }

페이지가 로딩될 때 URL이 파일명.html?Id=아이디값 형식으로 오기 때문에 URLSearchParam Web API를 이용해서 클릭된 카드의 ID를 할당하고 그 할당한 ID를  API에서 받아온 영화 데이터의 ID 값과 일치하는 것을 찾아서 해당 영화의 속성에 맞게 html에 값을 변경시키는 것을 목표로 생각했습니다.

petchData

API에서 받아온 데이터는 주제별로 각 40개의 항목이 있었는데 

// 모든 영화 데이터를 하나의 배열로 병합
    const allMovies = Object.values(movieData).reduce((acc, curr) => acc.concat(curr), []);

    // 영화 ID 찾기
    const foundMovie = allMovies.find(movie => movie.id === movieId);

데이터들을 배열로 변환한 뒤 find 메서드를 활용해서 페이지에 클릭된 ID를 찾았습니다.

 

이제 오늘 제일 고민한 부분인데 JS파일을 랜더링 동작하는 것을 하나의 파일에서 하는 것이 아닌 파일을 모듈화 하는 것으로 계획을 잡았습니다.

 

처음 생각한 방법

처음에는 조금 비효율적으로 생각했습니다.

movieDetail.js(메인)이 fetchMovieData.js에서 데이터를 받아오고 renderMovieDetail.js에 일치하는 ID값을  전송한 다음 renderMovieDetail.js는 그 ID값과 fetchMovieData.js에서 받아온 데이터를 가공해서 렌더링 값을 movieDetail.js한테 전공해서 movieDetail이 결국에 페이지의 로딩이 끝나면 렌더링이 완료될 것이라고 예상했는데 생각해 보니 API.JS에서 메인. JS에 굳이 값을 전송할 필요가 없다는 것을 깨닫고 두 번째로 생각한 방법입니다.

 

 

두 번째 방법

하지만 두 번째 방법과 첫 번째 방법엔 문제가 있었습니다. 
무엇이냐 하면 

import { fetchData } from "./fetchMovieData.js";
import { initializeTabs } from "./utility.js"
import { rendering } from "./renderMovieDetail.js"

window.onload = async () => {
    // URL에서 영화 ID 추출
    // const urlParams = new URLSearchParams(window.location.search);
    // const movieId = urlParams.get('Id');
    const movieId = 424;

    // 영화 데이터 가져오기
    const movieData = await fetchData();    
    // 영화 데이터를 페이지에 표시하는 함수 호출        
    console.log(movieData);
    console.log("1", movieData["now_playing"]);
    console.log("2", movieData["top_rated"]);
    console.log("3", movieData["upcoming"]);

    // 모든 영화 데이터를 하나의 배열로 병합
    const allMovies = Object.values(movieData).reduce((acc, curr) => acc.concat(curr), []);

    // 영화 ID 찾기
    const foundMovie = allMovies.find(movie => movie.id === movieId);

    if (foundMovie) {
        console.log("Found movie:", foundMovie);
    } else {
        console.log("Movie with ID", targetId, "not found.");
    }
    // 렌더링 하는 함수
    rendering(movieId);
}
export movieId

window.onload안에 있는 movieId가 밖으로 export 될 일이 변수 스코프 때문에 없다는 것이였습니다. 

뿐만 아니라 페이지가 로딩이 되고 나면 바로 렌더링 되어야 하는데 movieId를 로딩이 끝난 후에 렌더링JS한테 주는 것은  멍청한 생각이라는 것을 깨달았고 export movieId를 지우고 window.onload 중에 렌더링 함수가 포함되면 어차피 실행되었던 것을 깨달았습니다.

 

최종 방법

결국 렌더링 함수의 매개변수에 movieId만 입력하게 함수를 만들면 API.js에서 렌더링.js한테 한 번 렌더링. js에서 메인. js로 한 번만 데이터를 주고받으면 되는 간단한 과정이었던 것 같습니다.

 

 

 

결론

오늘 비동기로 데이터를 받아와서 처리 및 렌더링하는 과정을 배웠는데 처음엔 어렵고 퍼즐을 푸는 느낌이었는데 다시 한번 생각해 보니 간단히 풀리는 것을 보고 하기 전부터 너무 어렵게 생각하지 말아야겠다고 생각했고 공책에 위와 같이 그림을 그려가면서 해결하다 보니 꽤 즐거웠던 경험이었습니다.