서론
왜 벌써 12시가 넘은걸까.. 밖에서 볼일을 보고 집에 돌아와 잠깐 청소하고 나니 시간이 이렇게 됐다. 무언가를 100일 동안 꾸준히 하는것은 생각보다 어려운 것이다. 100일 챌린지 만만치 않군... 하지만 스플래툰에서의 하루는 아침 9시에 변한다! 나는 이 새인류인 오징어시민의 시간을 따르기로 했다. 아직 9월 24일은 남아있어!
본론
오늘은 Ajax에 대해서 공부한 것들을 기록하고자 한다. 웹 브라우저 페이지는 서버에서 요청을 받고 그 요청대로 랜더링을 통해 클라이언트에게 보여준다. 서버에서는 HTTP 통신을 통해 결과값을 보여주고 랜더링하고 그렇기 때문에 서버와 상호작용해서 새로운 화면을 띄우고자 할 때에는 서버에서 페이지를 새로 랜더링하게되는 것이 일반적이다.
하지만 페이지를 새로 고치지 않고 서버와 통신할 수 있다. 그것은 바로 ajax이다.
ajax는 XMLHttpRequest를 이용해서 서버와 커뮤니케이션을 한다.
MDN에서는 ajax를 이용하는 것으로 웹 어플리케이션이 새로고침 없이 좀 더 빠르게 업데이트 할 수 있기 때문에 사용자 경험을 향상 시킬 수 있을 것이라고 기대하고 있다.
그리고 ajax의 가장 매력적인 점은 비동기로 작동한다는 것이다.
동기vs비동기
영어로는 Sync와 Async 우테코의 10분 테코톡 영상에서 의하면 sync와 asyncs는 결과값을 전달하는 것에 대한 동기와 비동기를 나타낸다고 한다. (sync와 asyncs는 결과값의 전달의 관점에서 반대로 block과 non-block은 제어권의 관점에서 봐야한다고 한다.)
sync는 결과값과 함께 제어권도 다시 반환되어 다음 함수를 호출 할 수 있는 것이고 호출된 함수가 다 끝날때까지 다른 활동을 할 수가 없다.
Async는 그 정반대이다. 결과값이 나오기도 전에 제어권이 반환되어 아직 함수가 할 일이 다 끝나지 않았음에도 다음 일을 할 수가 있다.
문제
이 ajax를 이용해 홈페이지를 구현 중 정말 곤란한 문제에 맞닥뜨린 적이 있다.
그건 ajax를 이용해 구현한 파일업로드가 끝날때까지 로딩바를 띄우는 것이었는데, 이것이 잘 안되었다... 이것은 ajax의 동기, 비동기 성질과 관련이 있는데 이에 관해서는 내일 더 자세하게 파 보겠다.
출처
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
https://youtu.be/IdpkfygWIMk
