오늘로 코드캠프 4일차이다.
오늘은 동기와 비동기 통신에 대해 배워보았다😀
잊기전에 얼른 정리해보자!
우리가 사용하는 웹 브라우저는 사용자가 요청한 정보를 얻기위해
서버와 통신을 한다.
통상적으로 아래의 사진처럼 통신을 하게 되는데
프론트단에서 요청하는 정보를 백단에서 얻어오는것이다.
그럼! 서버와 데이터를 주고받는 방식에서는 동기와 비동기가 있다는데,
이 둘은 어떤 방식이며 차이점이 무엇인지 알아보자!
1. 동기와 비동기
동기방식은 통상적으로 한가지 요청을 마치고 다음 요청을 처리하는 방식이라고 생각하면 쉽겠다.
그림으로 표현하면 위와 같은 모습으로 표현할수 있는데
앞의 요청이 끝나기 전까지 다음 요청으로 넘어가지 않는것을 확인할수 있다.
그렇다면 비동기 방식은 무엇일까?
비동기방식은 앞의 요청이 완료되지 않아도 다른 요청을 동시에 처리하는 방식이다.
예를 들자면 우리가 게임을 다운받으면서 카톡을 하는것과 같은것이다.
그림으로 보자면 이렇게 동시다발적으로 요청을 처리하는것을 볼수있다.
그래서 보통은 오래걸리는 작업에 비동기 방식을 이용한다고 한다.
내가 지금 배우고 있는 REACT는 자바스크립트의 라이브러리로 자바스크립트 언어 자체는 동기방식을 이용하지만 대부분의 API가 비동기 방식을 채택한 이유로 우리는 명령어를 사용하여 동기 방식으로 전환, 사용한다.
비동기를 동기로 바꾸어주는 명령어
async / await
실제 적용하는 경우에는 아래의 방식으로 적용하게 되며
async function aaa() {
axios(API) 요청 코드
}
async function bbb() {
await axios(API) 요청 코드
}await코드는 async가 있는 함수에서만 사용이 가능하다.
나름 열심히 정리 한다고 해보았지만 아직은 배우는 단계이고
어떠한 방식이 더 좋은 방식인지는 잘 모르겠다...
앞으로 공부할게 산더미인것 같아 걱정은 되지만!
이제 4일차인데 다 아는건 좀.. 말도 안되는 일인것같다.
모르는 만큼 열심히 노력해보자! 오늘의 블로그 끝!
