동기식(Synchronous) vs 비동기식(Asynchronous)
·
FrontEnd/web
"네트워크 요청 하나 보냈을 뿐인데, 브라우저가 멈춘 느낌이 들었다면 여기서부터 다시 정리."자바스크립트로 프론트 개발하다 보면 동기 / 비동기 이야기는 계속 나온다.API 호출, 파일 읽기, 애니메이션처럼 대기 시간이 긴 작업 처리할 때화면이 멈추지 않게 UX를 지키고 싶을 때async/await, Promise, 콜백 지옥 같은 것들이 왜 필요한지 이해하고 싶을 때결국 이 모든 이야기의 바닥에는 동기(Sync)와 비동기(Async)가 깔려 있다.동기/비동기를 감으로만 아는 상태 → 말로 설명할 수 있는 상태까지 끌어올리기 위한 정리다.결론 먼저짧게 정리하면 이렇게 볼 수 있다.동기(Synchronous)앞 작업이 끝나야 다음 작업이 시작된다.흐름이 단순해서 이해하기 쉽지만, 대기 시간이 길면 전체가 ..