깜빡임이 사라졌다(?)

평소 들어가는 커뮤니티 사이트가 있다.
이 사이트는 연식이 오래됐다. 2001년에 만든 사이트니까
그래서 그런지 게시판도 무려 제로보드를 쓰는 사이트다.
제로보드 = 내 수준에서 이해한다면 엄청 오래된 형식이라고 이해...
구식 사이트라 그런지 댓글 입력하면 페이지가 새로 처음부터 로딩된다.

그런데...
며칠전부터 그것이 사라졌다.
이것이 바로 AJAX의 힘인가?

여기서 잠깐 AJAX에 대하여 정리해보자

• 정의: AJAX: Asynchronous JavaScript And XMLHttpRequest
  (비동기 자바스크립트 + XMLHttpRequest)
• 핵심 기술: JavaScript와 DOM, 그리고 Fetch
• Fetch를 쓰면?
  • 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있다!
    (깜빡임 현상이 없다!)
  • 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라, 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용
• XMLHttpRequest는 어디로 갔나요?
  • fetch가 이것의 업그레이드판이다. 그냥 fetch쓰면 된다.
• React 라이브러리를 활용한다면 axios를 쓰면 된다.
  (왜 그런지는 https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch)
• 장점
  • 깜빡임 현상이 없다
  • 데이터 부하가 줄어든다.(더 작은 대역폭)
    • 모 사이트의 예를 들면, 댓글을 달때마다 전체 페이지를 일일이 다 로딩해야되었는데, AXAX를 쓰면 댓글만 refresh시키면 된다.
• 단점
  • Search Engine Optimization(SEO)에 불리함
    • AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려냄. 따라서, 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많음. 그런데 검색 사이트에서는 전 세계 사이트를 돌아다니며 각 사이트의 모든 정보를 긁어와, 사용자에게 검색 결과로 보여준다. 그런데 AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어려움.
  • 뒤로가기 버튼 문제
    • AJAX에서는 AJAX를 사용하지 않은 사이트와는 달리 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않는다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 한다.

갓 개발자의 세계에 발을 담근 입문자 입장에서 댓글기능 개편이라고 한 것을 개발자의 시선 내지 지식으로 알 수 있는 좋은 경험을 한 것 같다. 마지막으로 링크나 남겨둬야겠다. gmail이 hotmail을 이긴 이유라는데 재밌겠군.
https://sungmooncho.com/2012/12/04/gmail-and-ajax/