22/11/09_TIL 모듈화

모듈화와 데이터 저장

OMDB API를 활용하여 영화검색이 가능한 사이트 만들기 과제를 하면서 js파일을 모듈화해서 사용해보려고 시도해 보았지만 page나 title같이 여러 함수에서 할당하고 사용해야하는 전역변수가 모듈화 이후 제대로 작동하지 않았고, 이 부분을 해결하지 못해 결국 하나의 파일로 제출을 했는데 바로 다음 시간에 박영웅 강사님께서 store의 개념을 알려주셔서 도입하여 해결할 수 있었습니다.

// store
export const store = {
  title: '',
  page: 1,
};

// moreList.js
// 더보기 버튼이나 무한스크롤 적용을 위해 검색한 타이틀의 이후 목록을 더 불러오는 함수
// store에 저장된 title과 page를 불러와 모듈화 할 수 있었다.
import { store } from './store.js';
import { getMovies, renderMovies } from './getMovies.js';

const moreLoadingSpin = document.querySelector('.spinner-grow');

// 목록 더 불러오기
export async function moreList() {
  // 초기화면 무한스크롤 적용시 그냥 리턴되게
  if (store.title === '') return;

  moreLoadingSpin.classList.remove('hidden');
  store.page++;
  const year = document.querySelector('.year').value;
  console.log(store.page, store.title, year);
  const movies = await getMovies(store.title, store.page, year);
  moreLoadingSpin.classList.add('hidden');
  if (!movies) {
    // 더이상 목록, 페이지가 없을 때
    console.log(store.title, store.page, year, movies);
    alert('더 이상 불러올 목록이 없습니다.');
  } else {
    console.log(movies);
    renderMovies(movies);
  }
}

모듈화를 하면서 겪었던 이외 여러가지 오류들

• 경로설정시 .js 누락

import { store } from './store';

이름 가져오기를 하면 자동으로 from 뒤에 경로를 완성시켜줘서 그대로 놔뒀는데 .js를 안 붙여줘서 제대로 불러오지 못하는 문제가 생겼었습니다.

• main.js를 가져올 때 타입 미설정

<script type="module" defer src="./main.js"></script>

처음에 무턱대로 파일을 나누고 진입점의 타입을 지정해주지 않아 오류가 발생했었습니다.

• for문 내 let 키워드 누락

// 개봉연도 선택지 만들기
for (let i = 2022; i > 1984; i--) {
  const selectYear = document.querySelector('.year');
  const yearOpt = document.createElement('option');
  yearOpt.value = i;
  yearOpt.textContent = i;
  selectYear.append(yearOpt);
}

하나의 파일로 작성할 때 for문에 쓰이는 변수 i에 let키워드 없이 작성해도 문제가 없었는데 모듈로 나누고 난 후에는 에러가 발생했습니다. 각 모듈에서 가져와서 작동하다보니 변수에 대해 더 엄격해지는? 것인지.. 사실 쓰는게 맞는데 이전엔 왜 에러가 발생하지 않았는지가 더 의문이 듭니다..😅