오늘은 자바스크립트에서 정말 많이 쓰이고, 또 헷갈리기 쉬운 개념인 비동기 처리에 대해 정리해보려고 한다. 수업 들으면서도 그렇고, 직접 정리하면서 느낀 거지만, 이 개념이 정확히 잡히지 않으면 이후에 나오는 API 호출이나 서버 통신 같은 부분에서 계속 막히게 될 것 같아서 한 번 정리해 두면 좋을 것 같았다.
비동기란 무엇일까?
비동기 처리는 한 줄로 정리하면 기다리지 않고 다른 일을 먼저 하면서, 끝나면 다시 처리하는 방식이다.
작업 중에 시간이 오래 걸리는 일이 있으면 그 자리에서 멈춰서 계속 기다리는 것이 아니라, 그동안 다른 코드부터 실행하고 있다가, 나중에 결과가 준비되면 그때 다시 처리한다.
웹에서는 서버 요청, 데이터 불러오기, API 통신 같은 작업들이 시간이 걸리기 때문에 비동기 처리가 정말 중요하다. 만약 이런 것들이 전부 동기로 동작한다면, 화면이 멈춘 것처럼 보이고 사용자 경험이 크게 나빠질 것이다.
동기와 비동기의 차이
비동기를 이해할 때 가장 도움이 된 건 동기 방식과 비교하는 것이었다.
동기 방식은 모든 작업이 순서대로 진행된다.
앞에 있는 작업이 끝나야 다음 작업이 실행된다.
그래서 앞의 작업이 오래 걸리면 뒤에 있는 작업들도 전부 기다려야 한다.
반면 비동기 방식은 오래 걸리는 작업을 따로 맡겨두고, 그 사이에 실행 가능한 다른 작업을 먼저 처리한다. 그리고 기다리던 작업이 끝나면, 그 결과를 나중에 처리한다.
그래서 실행 순서와 결과 순서가 다를 수 있다는 점이 특징이다. 처음엔 이 부분이 헷갈리지만, 구조를 이해하면 충분히 납득되는 부분이다.
자바스크립트가 비동기를 처리하는 방식
자바스크립트는 기본적으로 한 번에 하나의 작업만 처리하는 언어인데, 그럼에도 불구하고 비동기가 가능한 이유는 내부 구조 때문이다.
현재 실행 중인 코드를 처리하는 영역이 따로 있고, 시간이 오래 걸리는 작업은 별도로 맡겨 두었다가, 작업이 끝나면 다시 실행 가능한 상태로 옮겨 처리한다.
이 덕분에 코드가 위에서 아래로 실행되는데도, 실제 결과는 다른 순서로 나오는 상황이 만들어진다.
이 구조를 이해하고 나니 “왜 분명 위에 쓴 코드가 나중에 실행되지?”라는 의문이 조금씩 풀렸다.
콜백과 콜백 지옥
처음 비동기를 처리할 때 많이 사용하는 방식이 콜백 함수이다.
작업이 끝난 뒤에 실행할 코드를 미리 함수로 넘겨주고, 완료되었을 때 그 함수를 실행하는 방식이다.
문제는 비동기 작업이 많아질 때 생긴다.
콜백 안에 콜백, 그 안에 또 콜백… 이런 구조가 반복되면서 코드가 점점 안쪽으로 파고들고, 이 상황을 콜백 지옥이라고 부른다.
이렇게 되면 가독성도 떨어지고, 유지보수도 어려워진다.
Promise와 async / await
콜백 지옥 문제를 해결하기 위해 등장한 것이 Promise이다.
Promise는 “작업이 성공하면 이렇게, 실패하면 이렇게 처리하겠다” 라는 흐름을 깔끔하게 표현해 주는 방식이다.
이 덕분에 비동기 코드 구조가 훨씬 정리되고 이해하기 쉬워졌다.
여기서 한 단계 더 발전한 방식이 async / await이다.
이 문법을 사용하면 비동기 코드를 마치 일반 코드처럼 자연스럽게 읽히도록 작성할 수 있다.
실제로도 많이 쓰이고, 가독성도 좋아서 앞으로 비동기 처리를 할 때 가장 많이 사용할 것 같다는 생각이 들었다.
정리하면서 느낀 점
비동기는 처음엔 단순히 “순서가 이상한 코드” 정도로만 느껴졌는데,
오늘 정리하면서 왜 이런 방식이 필요한지, 그리고 웹에서 비동기가 얼마나 중요한 개념인지 제대로 이해하게 된 것 같다.
지금은 개념적으로 이해한 단계지만, 나중에 실제 프로젝트에서 API 연결, 데이터 통신, 서버 연동 같은 걸 하게 되면
오늘 정리한 내용이 많이 도움이 될 것 같다.
특히 기억하고 싶은 문장은 이거 하나다.
“비동기는 멈추지 않고, 기다리지 않으며, 나중에 다시 처리한다.”