한화시스템 BEYOND SW 부트캠프 16기 37일차 (2025-07-09 | 수)

---

오늘은 아침부터 기침이 너무 심해져 부득이하게 부트캠프 수업에 직접 참여하지 못하고 집에서 강의 자료를 보며 학습을 진행했다. 병석에 누워있을 정도는 아니었지만, 외출하기에는 무리가 있다고 판단했다. 다행히 강사님께서 매일 수업을 녹화하여 구글 드라이브에 업로드해주시기 때문에, 오전 수업까지의 영상과 세진이 형이 공유해준 실습 자료를 바탕으로 노트에 따로 정리해두었던 내용을 복습하며 학습 흐름을 이어갈 수 있었다.

 

대학교 학기 중에도 axios와 ajax를 배운 적은 있었지만, 특히 ajax는 수업 중 아주 간단히 짚고 넘어간 수준이었기에 구체적인 메커니즘은 기억에서 희미해져 있었다. 반면 axios는 부트캠프에 들어오기 전까지 진행했던 토이 프로젝트에서 매일같이 써왔던 친숙한 도구였는데, 최근 한 달 넘게 코딩테스트에 집중하느라 웹 요청 관련 로직을 거의 다루지 않아 어느새 감이 다소 무뎌졌음을 느꼈다. 오늘 수업을 통해 이들 비동기 처리 방식의 구조를 다시 되짚으며 빠르게 복기할 수 있었고, 앞으로도 간단한 예제부터 다시 구현해보며 익숙함을 되찾을 필요성을 절실히 느꼈다.

 

자바스크립트는 기본적으로 동기적으로 실행되는 언어이며, 이는 코드가 작성된 순서대로 실행됨을 의미한다. 또한 단일 스레드로 동작하기 때문에 동시에 여러 작업을 병렬적으로 처리할 수 없다. 반면 자바(Java)는 멀티스레드를 직접 구현할 수 있는 언어이기에, 동시성 이슈를 관리하는 방식에서도 차이를 보인다. 자바스크립트에서 여러 작업을 효율적으로 처리하기 위해서는 비동기 함수를 적극적으로 활용해야 하며, 대표적으로 콜백(callback), setTimeout, ajax, axios, async/await 등이 있다.

 

대표적인 비동기 함수 중 하나인 setTimeout은 콜백 함수의 대표적인 예시로 자주 언급되지만, 실제 실무에서는 자주 사용되지 않는다. 실무에서는 주로 ajax나 axios처럼 서버와 통신하며 데이터를 주고받는 비동기 요청 라이브러리를 많이 사용하게 된다. 이들 함수는 공통적으로 백그라운드에서 작업이 완료될 때까지 기다렸다가, 완료 시점에 콜백 함수를 실행하는 구조를 취한다. 예를 들어 서버에 요청을 보내고 다음 코드를 계속 실행하다가, 서버로부터 응답이 오면 그 순간에 콜백 함수가 호출되어 응답을 처리하게 된다.

 

자바스크립트의 이벤트 루프(event loop) 메커니즘도 수업 중 중요한 내용 중 하나였다. 자바스크립트는 단일 스레드 기반이므로, 하나의 작업이 실행 중일 때는 다른 작업은 대기해야 한다. 이때 axios나 fetch 등의 비동기 요청은 브라우저의 Web API 영역에서 처리되며, 응답이 도착하면 해당 콜백이 이벤트 큐(Task Queue)에 등록된다. 하지만 자바스크립트는 현재 실행 중인 동기 작업이 모두 끝나야만 이벤트 큐의 콜백을 실행할 수 있다. 예컨대 A라는 요청의 응답이 도착해도, 현재 B라는 동기 작업이 진행 중이라면, B가 끝난 후에야 A의 응답 처리를 시작할 수 있다.

 

이러한 구조 덕분에 사용자 인터페이스가 멈추지 않고 부드럽게 유지될 수 있으며, 이것이 자바스크립트가 비동기 환경을 효율적으로 다루는 방식이기도 하다. 응답이 도착한 순서가 아니라 현재 실행 중인 작업의 완료 시점이 우선순위에 영향을 준다는 것이 핵심이다.

 

또한 jQuery에서 사용하는 $.ajax()의 success 콜백 함수는 서버로부터 응답이 성공적으로 도착했을 때 자동으로 호출되는 함수로, 첫 번째 인자에는 응답 데이터가 전달된다. 예제 코드에서 function(a)와 같이 a는 단순히 응답 값을 담기 위한 변수일 뿐이며, 이는 data, response 등으로 자유롭게 이름 지정이 가능하다. 공식 문서에도 function(data, textStatus, jqXHR) 형식으로 명시되어 있으며, 첫 번째 인자는 항상 서버 응답 본문이 담기게 된다.

 

수업에서는 콜백 지옥(callback hell)에 대해서도 집중적으로 다뤘다. 여러 개의 비동기 작업을 순차적으로 실행할 경우, 각 작업이 완료된 후에 다음 작업을 실행해야 하기에 콜백 안에 또 다른 콜백을 중첩하게 되고, 이로 인해 코드가 지저분하고 유지보수가 어려워진다. 이를 해결하기 위해 등장한 것이 async와 await이다. async는 해당 함수가 비동기적으로 동작함을 명시하며, await는 그 함수 내부에서 특정 비동기 작업의 완료를 기다리도록 흐름을 제어해준다. 결과적으로 async/await를 활용하면, 마치 동기 코드처럼 깔끔하고 읽기 쉬운 구조로 비동기 로직을 작성할 수 있어 콜백 지옥을 효과적으로 해소할 수 있다.

 

또한 axios는 비동기 함수이며, JSON 형태의 응답 데이터를 객체로 자동 파싱해주는 기능을 내장하고 있다. 응답 객체 구조는 result.data와 같이, data 프로퍼티 안에 실질적인 응답 내용이 포함되어 있으므로 해당 구조에 익숙해지는 것이 중요하다.

 

수업 중 사용된 다양한 예제 코드들도 다시 실행해보며 코드 흐름을 따라갔다. DOM 로딩 이후에 ajax 요청을 보내는 jQuery 기반의 예제부터, 버튼 클릭 시 axios로 특정 게시글을 조회하거나 목록을 렌더링하는 게시판 예제까지 실습 코드를 분석해보며 전체적인 요청 흐름, 비동기 처리 방식, await의 동작 타이밍, 그리고 HTML DOM 요소와의 연결 방식을 복습할 수 있었다.

 

아직 오후 수업 영상은 시청하지 못했지만, 오전에 배운 내용을 바탕으로 실습을 진행하는 시간이었다고 하니 큰 문제는 없을 것으로 생각된다. 내일부터는 정말 빠지지 않고 수업에 성실히 참여해야겠다는 다짐을 다시 한 번 하게 된다. (이번 주 금요일은 병원 예약으로 인해 오후 수업 일부분은 못 듣고 가겠지만, 그 외에는 최대한 열심히 빠지지 않고 들어야겠다!!)