비동기, 동기방식과 웹페이지의 새로고침간의 관계 질문드립니다.

Question

안녕하세요 개발자를 지망하며 공부하고 있는 취준생입니다.AJAX의 개념에 대해 헷갈리는 부분이 있습니다.구글에 치면 다들 &#34;AJAX는 비동기 처리를 가능하게 해주며 그것은 웹페이지 전체를 새로고침하지 않고 필요한 부분만 수정하는것&#34;이렇게 설명하더라구요.그렇지만 동기, 비동기의 개념을 보면 동기는 순차적인 처리느낌이고, 비동기는 요청을 다 보낸다음에 응답이 오는것부터 채워넣는그런 느낌으로 이해했습니다.웹페이지가 로딩될때 순서대로 하다가 너무 늦어버리면 유저가 지루해서 나갈 수 있으니빨리 처리되는것부터 보여주는 느낌으로 이해했습니다.그런데 이런 비동기 처리 방식이 새로고침과 무슨 관련이 있는지 잘 이해가 안됩니다.웹페이지 전체를 새로고침 할 필요가 없거나 필요한 부분만 수정하는것은SSR 이나 CSR과 관련된 내용이 아닌지요...?읽어주셔서 감사합니다

nubie · Answer

form에서 submit을 하게 되면 새로고침 되는게 디폴트 기능입니다하지만 새로고침 되면 현재 페이지에 대한 정보들이 초기화 돼버리는 문제가 있고 그걸 다시 세팅해 주는 것도 손이 가는 작업이므로 새로고침을 막고 비동기 처리 시키는 것이죠사용자 입장에서도 페이지가 한번 새로고침 된 후 다시 로드되는 것보다는 같은 화면을 쭉 보는게 더 나을테고요e.preventDefault() 같은걸 보신적이 있으신가요? 이게 기본 기능을 차단 시키는 겁니다그리고 서버에 요청 하는 작업은 처리 시간이 클 수가 있으므로 비동기 처리해서 브라우저의 API에서 처리하도록 시키는 겁니다JS의 동기,비동기가 궁금하시면 이벤트루프를 한번 보시길 추천합니다

RWB · Answer

SSR, CSR은 초기 랜딩 시, 페이지 렌더링을 서버가 하느냐, 브라우저가 하느냐의 차이입니다.질문자분의 예시를 인용하자면, 동기 방식이라 치면 됩니다.AJAX같은 비동기 기술이 나오기 이전엔, 웹 페이지에 실시간 데이터를 표현해주기가 매우 어려웠습니다.예를 들어, 실시간으로 방문자 수를 보여줄 수가 없다는 의미입니다. 때문에, 새로운 데이터를 보여주기 위해선 반드시 새로고침을 통해 데이터를 다시 받아와야만 했습니다.비동기 기술이 들어온 이후, 이러한 작업이 간편해졌습니다. 백그라운드에서 데이터 fetch를 수행하고, 이 데이터를 토대로 페이지의 정보를 새로 갱신해줄 수 있기 때문입니다.덕분에 사용자와 웹 사이트 모두 새로고침을 하지 않아도, 실시간으로 데이터를 전달받아 보고, 표현해줄 수 있습니다.OKKY에 댓글을 작성하면 새로고침없이 내가 작성된 댓글이 바로 표현됩니다. 비동기 통신을 통해 게시글 작성 API를 보내고, 데이터를 갱신하여 표현해주기 때문입니다.페이스북이나 인스타그램 알람도 비슷한 케이스입니다.

라떼개발자 · Answer

아주 예전에는 데이터가 변경된거 보여주려면 페이지 전체를 새로고침하는 방식으로 개발했어요. 근데 페이지가 깜빡거리는것도 별로이고 바뀌길 원하는 부분만 바뀌도록 하는게 대세가 되면서 ajax를 이용하기 시작했어요. 그래서 ajax를 사용하게 된 이유가 새로고침과 관련이 있다고 할수 있어요. 지금은 너무 당연시하는 거지만 나오게 된 이유를 생각해보면 알수 있어요

비동기, 동기방식과 웹페이지의 새로고침간의 관계 질문드립니다.

3개의 답변

Q&A 목록