Ajax의 맛이 나는군..
동기, 비동기? 그게 뭔데 씹덕아
React Query에 공부하기 전에, 우선적으로 공부해야 할 부분이 있음을 느꼈다. - 김정훈
FE 프로젝트를 만들다보면 점점 많은 기능을 추가하게 되고, 결국 API 데이터를 받아와 제공하는 기능까지 도달하게 된다.
이전에 내가 만들던 LAFTEL 클론코딩 사이트에서도 페이지의 기본적인 틀은 완성했지만 데이터가 없으니 그냥 우리 통신반 반장님 머리마냥 휑했다.
그래서 이전 노마드코더 선생님께서 알려주신 axios 코드에다가 무료 애니 API를 집어넣어 페이지는 완성할 수 있었고, 그제서야 애니사이트라는 느낌이 났다.
하지만 해당 코드는 그저 복붙에 조금의 수정 뿐이었고, 다음 프로젝트를 진행할 때도 해당 코드를 가져와 수정을 해줄 뿐이었다.
그렇다고 구글링을 한다하면 항상 나오는 동기, 비동기, Ajax, promise, xml 등 이해 불가능 단어들이 나를 집어삼킬 태세로 다가와 항상 외면해왔지만.. 지금의 난 다르다. 난 각성상태이다.
동기 통신과 비동기 통신
-
동기 통신(sync)
요청과 응답의 순서가 보장이 된다. -
비동기 통신(async)
요청과 응답의 순서가 보장이 되지 않는다.
간단한 예시를 들어보겠다.
통신 작업중에 작업도구가 없는 나는 금쪽이 후임들에게
"얘들아 통신반에서 작업도구좀 가져와라"
라고 말을 하면 진표는 통신반에 가서 가서 랜선을 가져온다.
진표가 온 것을 보고 세영이가 가서 랜툴을 가져온다.
세영이가 온 것을 보고 언성이가 가서 RJ45를 가져온다.
위 상황이 동기 통신이라고 한다면
통신 작업중에 작업도구가 없는 나는 우리 에이스 후임들에게
"얘들아 통신반에서 작업도구좀 가져와라"
라고 말을 하면 승엽이와 홍규와 경준이가 통신반으로 함께 가서
승엽이는 통신반에 가서 랜선을 가져오고
홍규는 랜툴을 가져오고
경준이가 가서 RJ45을 가져온다.
위 상황이 비동기 통신이다.
인생에서 늘 효율을 추구하는 나 김효율은 동기통신 같은 상황을 두눈뜨고 볼 수가 없다.
비동기 통신이 동기 통신보다 얼마나 효율적인가.
다시 돌아와서 해당 기능을 개발에 적용시켜본다면,
- 동기 통신: 웹페이지를 새로고침하며 데이터를 불러오는 방식이라고 볼 수 있다.
- 비동기 통신: 웹페이지를 새로고침하지 않아도 작업하는 부분만 업데이트 되는 방식이다.
그래서 나는 비동기가 좋다.
비동기 최강비기 Ajax
비동기 통신의 기법중 하나인 Ajax는
Asynchronous JavaScript and XML의 약자라는데, 나도 뭔소린지 잘 모른다.
그냥 웹 페이지의 일부분만 갱신할 수 있는 기능이다.
- 아래 부분은 React를 아는 사람에게 도움될 것 같아서 씀
보통 FE를 공부하는 사람은 REACT를 우선적으로 접하게 될텐데, 해당 Framework의 React.useState이 최대 장점이라고 생각하는 나는 이해가 빨리 되었다.
데이터가 바뀔 때마다 해당 컴포넌트만 리렌더링하고 UI를 업데이트를 해주지 않는가?
Ajax도 그것과 마찬가지로 해당 부분만 업데이트 되는 방식인 것이다.
Ajax는 위와 같은 기능 덕분에
- 웹 페이지의 속도와 사용성 향상
- 리소스 효율적 활용 가능
- 다양한 데이터 형식 지원
와 같은 장점을 보유하고 있다. 아주 짱짱하죠? 앞으로는 해당 프레임워크를 사용해서 개발을 해볼 생각이에요~~
