비동기 데이터 통신....
진짜 이건 이름부터 거부감(?)이 들었던 목차지만,
서버랑 데이터를 주고 받으면서 직접 해보니까 흥미로운 파트 ! :)
그러니 재밌게 공부해보자구요 💭 !!
이름부터 거부감이 든다면, 이름부터 쉽게 이해해보기 !
비동기 데이터 통신을 쉽게 설명하자면, 친구에게 편지를 보내는 것과 비슷해요.
만약 편지를 보내면, 그 친구는 즉시 답장하지 않고, 자신의 편한 시간에 답을 줄 수 있어요.
즉, 편지를 보낸 사람이 기다리면서 다른 일을 할 수 있고, 답장이 올 때까지 기다리지 않아도 되죠.
영어로는 "asynchronous communication"이라고 해요.
Asynchronous communication means that the sender doesn't have to wait for an immediate response from the receiver. The receiver can respond at their own time, and the sender can continue with other tasks while waiting.
"비동기"라는 개념을 좀 더 풀어서 설명해볼게요.
"동기"라는 건 두 사람이 동시에 뭔가를 한다는 의미예요. 예를 들어, 두 사람이 전화로 대화를 할 때, 서로 말을 주고받으면서 동시에 반응하죠. 이런 식으로 "동기"는 "같이, 동시에" 일어나는 일이에요.
그럼 "비동기"는 무엇일까요? "비동기"는 "같이 일어나는 것이 아니고, 시간이 맞지 않아도 되는" 거예요. 즉, 한 사람이 어떤 일을 시작하고, 다른 사람이 그에 대한 반응을 나중에 할 수 있는 거죠. 우리가 이메일을 보내면, 상대방은 바로 답을 하지 않아도 되잖아요. 그리고 우리는 그 답장을 기다리면서 다른 일을 할 수 있죠. 이게 바로 비동기적인 상황이에요. 한쪽은 먼저 시작하고, 다른 쪽은 나중에 반응하는 거예요.
예를 들어, 비동기 통신에서는 데이터를 주고받을 때, 보내는 쪽과 받는 쪽이 "동시에" 작업을 하지 않아도 되니까, 받는 쪽은 자기 시간에 데이터를 처리할 수 있어요. 이렇게 하면, 시스템이나 사용자도 더 유연하게 작업을 할 수 있게 되죠.
쉽게 말해, "비동기"는 시간에 구애받지 않고 서로 다른 시간에 일이 진행될 수 있는 방식이에요.
뜻은 어느정도 파악했으니, 실무에선 어떻게 쓰이는지와,
개념을 본격적으로 알아보자 !
Q : 이게 자바스크립트에서 왜 중요하고 실무에선 어떻게 쓰여 ?
A : 자바스크립트에서 비동기가 중요한 이유는, 웹 애플리케이션이나 서버에서 여러 작업을 동시에 처리해야 하기 때문이에요. 예를 들어, 사용자가 웹페이지에서 버튼을 클릭했을 때 서버에 요청을 보내고, 그에 대한 응답을 받는 과정에서 서버의 반응이 늦을 수 있어요. 만약 이 과정이 "동기"로 처리된다면, 서버의 응답을 기다리는 동안 웹 페이지는 멈춰버리거나 다른 작업을 할 수 없게 될 거예요. 그래서 비동기 처리 방식이 필요하죠.
비동기 처리가 중요한 이유:
- 웹 페이지의 반응성 유지
사용자가 웹페이지에서 다른 작업을 계속할 수 있도록 도와줘요. 예를 들어, 서버에서 데이터를 가져오는 동안 웹페이지의 다른 부분을 여전히 사용할 수 있게 해줘요. - 빠른 응답 시간
서버와의 통신에서 기다리는 동안 다른 작업을 처리할 수 있기 때문에, 웹 애플리케이션은 더 빠르게 반응할 수 있어요. 사용자 경험을 향상시키는 데 중요해요.
실무에서 비동기 처리는 어떻게 사용되나요?
1. API 호출
웹 애플리케이션에서 자주 사용하는 방식은 API를 호출하는 거예요. 예를 들어, 사용자가 검색을 할 때 서버로 검색 요청을 보내고, 결과가 돌아올 때까지 기다리지 않고 다른 UI 업데이트나 작업을 계속할 수 있게 해줘요.
2. 시간이 오래 걸리는 작업 처리
비동기를 사용하면, 예를 들어 이미지 업로드, 비디오 렌더링, 대용량 파일 다운로드와 같은 시간이 오래 걸리는 작업을 처리하면서도 다른 작업을 동시에 진행할 수 있어요.
3. 콜백, 프로미스, async/await
자바스크립트에서는 비동기 처리를 콜백(callback) 함수, 프로미스(promise), 그리고 최신 async/await 문법으로 관리할 수 있어요. 이들은 비동기 작업을 더 쉽게 처리할 수 있게 도와주죠.
- 콜백 함수: 비동기 함수가 완료된 후 호출되는 함수
- 프로미스(Promise): 비동기 작업의 완료를 처리할 수 있는 객체
- async/await: 프로미스를 더 직관적으로 사용할 수 있게 도와주는 문법
코드는 이렇게 씁니다 !
서버에 요청을 보낼 때는 XMLHttpRequest 객체의 open 메소드로
요청을 초기화하고, 이후 send 메소드로 보내주는 순서로 작업한다.
//open 메소드 사용시 기본 형태
const request = new XMLHttpRequest ()
request.open(“HTTP메소드”, “서버URL”)
//초기화 했고, 이제 요청 보내자.
request.send()