개인 프로젝트 : 영화 검색 사이트 만들기 - (5) 모듈화 및 async/await로 API 호출 리팩토링

verdantgreeny·2025년 1월 15일

TIL 본캠프 프로젝트

본캠프

목록 보기

25/56

1. 모듈화(ES Module)

1-1. ES Module이란?

ES6에 도입된 모듈 시스템으로 import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있다.
이러한 모듈 시스템을 이용하면 API 요청과 관련된 코드와 DOM 조작 코드를 별도의 모듈로 분리하여, 코드의 재사용성과 유지보수성을 높일 수 있다.
나의 경우 api.js와 각각 상세페이지, 메인 및 검색 등과 같이 기능별로 모듈을 분리하려고 했다.

1-2. 간단한 사용방법

export : 내보내고자 하는 변수와 함수 앞에 export를 붙인다. default export는 모듈 당 하나만 가능하다.

export const key = "어쩌구저쩌구";
export const indexDiv = document.querySelector("#index-div");
export let printCard = function (a, i) { ~~생략~~ }

import : 받고자 하는 변수가 있으면 import {변수} from '변수가 export된 파일.js'의 방식으로 코드를 작성하면 된다.

import {a} from 'a.js'
import {fn} from 'fn.js'
import {Class} from 'class.js'

2. async/await로 API 호출 리팩토링

2-1. async/await란?

promise

js는 동기적인 언어이지만, 서버에 데이터를 요청하는 등 대기시간 긴 작업의 경우 비동기 작업을 한다.
자바스크립트에서 비동기 처리를 다루는 방법에 주로 쓰이는 것은 promise와 async/await이다.
promise는 내용은 실행 되었지만 결과를 아직 반환하지 않은 "객체"이다. promise에는 pending(대기), fulfiiled(이행), rejected(실패)라는 3가지 상태가 존재한다.
값이 참이면 resolve를 호출하고, 아닐시에는 reject를 호출한다. resolve한 반환 값에 대해서는 then()을 통해 결과 값을 반환 받을 수 있고 reject 의 반환 값에 대해서는 catch()를 통해 반환 받는다.

 //fetch는 프로미스객체 
 const response = fetch("url",options)
 .then((res) => res.json())
 .then((res) => console.log(res))
 .catch((err) => console.error(err));

async/await를 쓰는 이유

코드의 가독성 및 간결성 : async/await는 promise에 비해 가독성이 좋고, 문법이 간결하다. promise는 then()을 통해 많은 들여쓰기를 하여 콜백지옥같은 일이 벌어질 수 있다. 하지만 async/await과 같은 경우는 응답 값을 명시적인 변수에 담아 사용하므로 직관적인 변수를 인식할 수 있다.

//Promise chaining 방식
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });
  
//async/await 방식
  async function getPost() {
	const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
	const data = await response.json();
	console.log(data)
}

에러 핸들링 : promise에서 사용하는 try/catch는 코드가 직관적이지 않고 catch문의 중복이 많이 일어난다. 반면 async/await의 경우 하나의 catch문만 사용하면 되고 해당 catch문에서 try 내부에서 발생하는 모든 에러에 접근이 가능하다

async function getPost() {
	const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
	const data = await response.json();
	console.log(data)
}

getPost();

async function getPost() {
	try {
		const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
		const data = await response.json();
		console.log(data)
	} catch (error) {
		// 에러 발생 시 실행시킬 코드 작성
	}
}

getPost();