웹 개발하면서 AJAX를 몰라도 되냐고요? 글쎄요…🤔

zettelkasten/3.Resource/Zettelkasten/3.Permanent/AJAX란?.md at master · injuk/zettelkasten

 

최근 이 문서를 통해 AJAX의 존재를 알게 됐다.

나름 웹 개발을 지망하며 깔짝댄지 4년차인데 이 이름을 처음 들어봤다.

 

AJAX는 웹 페이지를 새로고침하지 않고,

필요한 데이터만 비동기적으로 가져오는 방식을

가능하게 만드는 기법 전반을 의미한다.

 

그런데 왜 AJAX라는 이름이 잘 안 들렸던걸까?

 

아마도, AJAX가 상당히 포괄적인 의미를 담고있기 때문에

AJAX라는 개념 자체가 다른 기술 속에 녹아있기 때문에 상대적으로 덜 언급되는 것 같다.

 

AJAX 자체는 특정한 기술이 아니다.

그저 비동기 데이터 요청 방식을 의미한다.

 

또, React와 Vue, Next.js와 같은 프레임워크가

AJAX 개념을 내부적으로 활용하고 있기 때문에

개발자가 직접 AJAX를 다룰 일이 줄어든 것도 한 몫한 것 같다.

 

그렇다면 과연 이 AJAX는 웹 개발과 과연 무슨 연관이 있을까?

---

AJAX 등장 전의 웹은 어땠을까?

 

초기 웹은 정적인 페이지를 제공하는 방식이었다.

 

한 번 HTML 문서를 로드하면, 

해당 문서를 다시 로드하지 않는 이상 화면에 전환이 일어나지 않았다.

📝 초창기 웹은 어떤 느낌?

- 사용자가 요청하면 서버에서 HTML 문서 전체를 다시 내려준다.
- 페이지가 깜빡이며 새로고침된다.
   다시 말해, 서버와 클라이언트 간의 비효율적인 데이터가 전송된다.

 

이런 웹의 특성상 문제가 발생했다.

 

인터넷의 발전에 따라 웹사이트 역시 점점 더 복잡해졌는데

기존 웹의 한계가 너무 명확했던 것이었다.

📌 기존 웹의 한계

  1. UX 문제
    - 버튼을 누를 때마다 새로고침되니 불편함을 초래했다.

 2. 서버 부하
     - 클릭할 때마다 모든 HTML을 다시 내려주어 트래픽이 증가했다.
     - 필요 없는 데이터까지 계속 전송해 서버 부담이 증가해 속도가 느려졌다.

 3. 데이터의 중복 로드
     - 채팅 프로그램에서 새로운 채팅만 가져오고 싶은데 기존 채팅도 같이 로드된다거나🫨

 

그렇게 AJAX가 등장하게 된 것이었다.

 

AJAX는 웹 페이지를 새로고침하지 않고,

필요한 데이터만 비동기적으로 가져오는 것을 성공하게 만들었다.

 

💡 AJAX의 컨셉

✅ 필요한 데이터만 서버에서 가져와 업데이트한다.
✅ 전체 페이지의 새로고침 없이 일부만 변경 가능하다.
✅ 결과적으로 빠르고 부드러운 사용자 경험(UX)을 제공한다.

 

그럼 AJAX의 핵심인

비동기 통신(Asynchronous Communication)을 위해서 어떤 동작이 필요할까?

---

AJAX는 어떻게 동작할까?

 

AJAX의 핵심은 비동기 통신을 이용해 서버에서 필요한 데이터를 가져오는 것이다.

 

🔥 AJAX의 동작 과정

1. 사용자가 버튼을 클릭하면 JS가 XMLHttpRequest 객체를 사용해 서버에 요청을 보낸다.
2. 서버는 요청을 통해 필요한 데이터(JSON, HTML)를 클라이언트에 보낸다.
3. 응답을 받으면 JS가 화면 일부만 업데이트한다.
4. 전체 페이지가 새로고침 없이 부드럽게 반영된다.

 

결국, AJAX는 빠르고 부드러운 사용자 경험을 제공하는 결과를 자아냈다.

---

하지만 이런 특성상 커다란 문제가 하나 발생하는데...

바로 SEO(Search Engine Optimization) 문제다.

💻 SEO(검색 엔진 최적화)

웹페이지가 검색 엔진에서 잘 노출되도록 최적화하는 방법을 의미한다.

 

AJAX가 SEO에 치명적인 단점이 있다구요?👀

 

검색 엔진 크롤러는 페이지의 HTML 내용을 읽고 분석하는데,

AJAX 기반 웹페이지는 데이터를 비동기 요청으로 불러오기 때문에

크롤러가 읽기 어려운 문제가 있었다.

🔥 기존에는

- index.html을 요청하면 서버가 HTML을 만들어서 반환한다.
  따라서 검색 엔진이 HTML을 읽기 쉬웠다.

🚀 AJAX는

- index.html을 요청하면 빈 HTML만 내려오고,
  AJAX로 데이터를 받아 동적으로 페이지를 채운다.

  따라서 검색 엔진 크롤러가 AJAX로 불러온 데이터를 못 읽을 수 있다.

 

하지만 웹페이지란건 자고로 검색 엔진이 무엇보다 중요하지 않을까?

과연 잘 만든 사용자 경험(UX)가 검색 엔진을 이길 이점이 있을까?

 

다음 포스팅에 이어 작성해보겠다.