TIL_JavaScript, synchronous와 asynchronous

프로젝트의 frontend에서 vanilla JavaScript를 이용하여 회원가입(signup) 기능을 구현했다.

frontend 단에서 user가 회원가입 정보를 입력하고 '가입하기' 버튼을 눌렀을 때, 기입한 회원 정보가 api를 통해 backend에 전달되고 database에 저장이 되는 과정이다. 보통 api에 요청을 보내고 response를 받는 과정은 시간이 걸릴 수 있기 때문에 해당 response를 받고 다음 코드가 진행 되도록 해줘야 한다. 이때 필요한 것이 async/await와 같은 비동기적인(asynchronous) 코드이다.

 

// api.js

const backend_base_url = "http://127.0.0.1:8000";

// 회원가입
async function handleSignup(userObject) {
    const response = await fetch(`${backend_base_url}/accounts/`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
        },
        body: JSON.stringify(userObject),
    });
    if (response.ok) {
        alert("회원가입 완료!");
        window.location.href = "/login.html";
    } else {
        const data = await response.json();
        return data;
    }
}

JavaScript에서 asynch/await이나 Promise와 같은 비동기적인 코드를 사용하지 않으면 코드는 기본적으로 동기적(synchronous)으로 실행된다. 즉, JavaScript는 single thread 언어이기 때문에 하나의 작업이 끝나기 전까지 다음 작업이 실행되지 않는다. 이렇게 되면 브라우저 환경에서 UI를 차단하고 응답이 멈추게 될 수도 있다.

 

Synchronous(동기식)

하나의 작업이 끝나면 이어서 다른 작업을 시작하는 방식. 작업의 실행 순서가 정해져 있다.

 

Asynchronous(비동기식)

먼저 시작된 작업의 완료 여부와는 상관 없이 새로운 작업을 시작하는 방식. 작업의 순서가 정해져 있지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 있다.

 

JavaScript에는 다음과 같이 3가지의 Asynchronous(비동기) 처리방식이 있다.

1. Callback 함수

2. Promise

3. asynch/await