사내 프로젝트에서 js를 리딩하거나 ui를 수정하면서 항상 궁금했던 url을 이용해 http 요청 전송을 하는 fetch 부분과 fetch함수가 들어가면 무조건 들어가는 async await, 그리고 비동기 함수 객체인 promise를 알아봤습니다 !

fetch

HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 web API 입니다.

웹 사이트 개발에는 비동기 작업을 자주 사용합니다. 서버에서 데이터를 불러올 때 오래 걸릴 수도 있는데, 그동안 다른 코드를 실행하지 않고 가만히 기다리면 웹 사이트를 로딩하는 게 굉장히 오래 걸리기 때문이죠.

비동기 작업

비동기 작업 : 특정 코드의 로직이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것 입니다.

하지만 순서대로 불러야하는 코드가 있으면 어떤 일이 일어날까요? 예를 들어, 연산이 끝나기도 전에 연산 결과를 파라미터로 사용하는 함수를 실행하면 에러가 나겠죠. 그래서 이런 비동기 작업을 순차적으로 하기 위해 js에서는 콜백함수를 사용합니다. 콜백 함수는 특정 로직이 끝났을 때 원하는 코드를 실행할 수 있어요. 하지만 콜백에 또 콜백을 계속 호출하게 되면 코드가 복잡해지고 에러가 처리하기 어려워요.

이러한 단점을 promise를 사용하여 해결할 수 있습니다

promise

비동기 처리에 사용되는 객체입니다.

함수의 성공 또는 실패 상태를 알려줍니다. 콜백을 직접 호출하는 방법 대신, Promise로 콜백을 부를 수 있어요. 이런 특징 때문에 Promise를 사용하면 비동기 처리 시점, 비동기 함수의 결과를 쉽게 확인할 수 있고 에러도 어디서 일어났는지 파악하기 편리해요.

Promise 는 세 개의 상태를 가질 수 있다.

async

함수를 정의할 때 async를 앞에 붙이게 되면 "이 함수는 비동기적인 함수이고 promise를 반환한다"라고 선언하는 것이다.

await

async 함수 안에서만 사용할 수 있는 특별한 문법, Promise의 상태가 바뀔 때까지 코드가 기다린다. promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않는 것이다.

다시 한 번 말하지만 빠른 페이지 로딩을 위해 웹사이트 개발에 비동기 작업을 넣어야 한다!

내 프로젝트의 일부를 예시로 다시 한 번 이해해보자!!

    /**
     * @returns {Promise<AssignedStationDetailsEntry[]>}
     */
    static async fetchAssignedStationDetailsList() {
        const url = '/api/v1/station/list'
        const response = await fetch(url)
        if (!response.ok) throw new Error(`Failed to fetch station list: ${response.statusText}`)

        const json = await response.json()

        return isNil(json?.data) ? json : json.data
    }

• fetchAssignedStationDetailsList() 함수는 "나중에 결과를 줄게"하고 약속(promise)을 만들어서 반환한다.

• 이 함수 안에 fetch(url)을 써서 서버 요청을 보내는데, 서버가 바로 응답을 주지 않기 때문에 기다린다.

• 이 fetch() 자체도 Promise을 반환하고, 그걸 await로 기다리는 것!

• 만약 요청이 성공하면 결과(json.data)넘기고, 실패하면 에러를 던지는 식으로 되어있다.

✅ 핵심 요약 다시 한 줄로!

fetch() 는 HTTP 요청을 보내고 Promise를 반환하는 웹 API다.

async 함수는 Promise를 반환하는 함수를 선언할 때 사용한다.

await 은 Promise가 끝날 때까지 기다리는 키워드다.

예제에서 fetch()는 그 자체로 Promise를 반환하므로, await fetch(...)만으로 비동기 흐름을 깔끔하게 처리한 것이다.