동기와 비동기

동기와 비동기

• 동기 (Synchronous)
  • 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행하는 방식
  • 실행 순서가 중요한 경우
• 비동기 (Asynchronous)
  • 요청을 보냈을 때 응답 상태와 관계없이 다음 동작을 수행하는 방식
  • 실행 순서가 상관 없거나 동시에 작업을 수행하는 경우

장/단점

동기

• + 설계가 간단함
• + 직관적임
• - 반환이 늦어지면 계속해서 대기해야함

비동기

• + 요청응답에 상관없이 다른일을 처리할 수 있음
• - 설계가 복잡함

예시

동기

일반적인 요청은 동기 방식이다. 자바에서 method를 호출하는경우를 가정해보자.

public class Main {

    public void caller() {
        System.out.println("1");
        callee();
        System.out.println("3");
    }

    private void callee() {
         System.out.println("2");
    }
}
// 1,2,3

위의 예시는 caller()메서드에서 callee()메서드를 호출한 상황이다.
callee()를 호출하기 전 1을 출력한 다음 callee()메서드를 수행하고 3을 출력한다.
callee()가 처리되는 동안 caller()는 대기하고 있다.

이처럼 우리가 기본적으로 사용하는 메서드는 동기 방식이다.

비동기

자바스크립트의 Ajax는 대표적인 비동기 방식이다.

$.ajax({  
    type: "post",  
    headers: {'Content-Type': 'application/json'},  
    url: "/signin",  
    data: JSON.stringify({  
        email: $("#email").val(),  
        password: $("#password").val(),  
        sex: sex,  
        age: $("#age option:selected").val(),  
    }),  
    dataType: "json",  
    success: function (response) {  
        console.log("success");  
        const msg = '[Success] : ' + response.msg;  
        alert(msg);  
        location.href = "/login";  
    }, error: function (responseData) {  
        const response = JSON.parse(responseData.responseText);  
        const msg = '[Error] : ' + response.msg;  
        alert(msg);  
    }  
});

이전 프로젝트에서 사용했던 회원가입 요청이다. 회원정보를 data로 보내고 응답이 오기 전에도 회원가입 페이지를 그대로 사용할 수 있다. 요청이 성공한다면 success(res) 메서드를 실행한다. (응답 처리)