💻 Today I Learned

백엔드와 프론트가 분리된 프로젝트의 기본적인 백엔드 CRUD 기능을 구현한 후 request 요청 시 응답 데이터를 JavaScript의 fetch 요청을 통해 프론트에서 전달받는 방법에 대해 알아보았다.

우선 포스트맨으로 request를 보냈을 때 응답하는 response를 확인해보면 아래와 같다.

다음은 프론트에서 JavaScript로 백엔드 서버에 fetch 요청을 통해 응답받는 데이터를 확인해본다.

// 백엔드 서버 url을 전역 변수로 설정
const backend_base_url = "http://127.0.0.1:8000"

async function get_articles() {
    const response = await fetch(`${backend_base_url}/articles/`, {
        method: "GET",
    })
    const response_json = await reponse.json()
    
    console.log(response_json)
}

여기서 백엔드 서버에 fetch 요청을 보낼 때 비동기 처리 패턴 중 가장 최신의 방법인 async와 await을 사용하여 javascript의 비동기 처리를 할 수 있다.

간단히 설명하자면 JavaScript의 특성상 비동기 함수는 실행 시 순서대로 동작하지 않고 동작 할 수 있는 것 부터 실행을 하기 때문에 내가 원하는 순서대로 동작할 수 있도록 비동기 처리를 해주어야 한다.

비동기 처리를 하기 위해 async function을 선언하고 실행하면 promise 객체를 반환받게 되는데 promise 객체를 반환 받기 전 await을 걸어주면 promise 객체가 성공적으로 반환 받을 때 까지 기다렸다가 반환이 완료되고 난 후 이어서 다음으로 수행할 동작을 하게 된다.

만약 수행할 동작이 있을 때 await을 걸어주지 않고 promise 객체를 받게 될 경우 promise 객체가 pending 상태로 반환되는데 이 때 promise 객체가 성공적으로 반환 받고 다음 동작을 수행할 수 있도록 await을 걸어 기다려준다.

다음으로 fetch 요청을 보낼 때 현재 나는 GET 메서드로 응답 데이터를 받아올 것이기 때문에 method를 GET으로 입력하였고, 만약 POST나 PUT or PATCH 메서드를 사용할 경우 header에 content-type을 입력하여 어떤 형식으로 데이터를 보낼 지 정하고 body에 데이터를 넣어 fetch 요청을 보낸다.

이 후 반환된 reponse를 json 형식으로 변환하여 데이터를 확인해보면 아래와 같고 위에서 포스트맨으로 테스트한 결과와 동일한 결과를 볼 수 있다.