Ajax란 무엇인가?

@smithsolution·2023-08-01 19:28

Ajax는

Asynchronous Javascript And XML

의 약자로서, "서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술"을 의미하는데, 이 얘기를 처음 들어보셨다면, 너무 추상적일거라 예상이 됩니다.

ajax를 이해하기 위한 사전지식 - 서버

그래서! 비유를 통해 설명드리기에 앞서 다음과 같은 사전지식들을 알고 있어야 합니다.

"바로 서버입니다!" 서버는 비유하자면, 은행창구와 같습니다.

우리가 창구에 가서 내 돈 찾아달라고 하면, 내 계좌에 있는 돈을 주겠죠? 이때 이걸 클라이언트에서 서버에게 데이터를 달라고 요청하면, 서버에서 그에 맞게 데이터를 주는 것으로 응답하는 것과 같다고 볼 수 있습니다. 예를 들어 보도록 하겠습니다.

자! 그러면 네이버 웹툰 서버는 뭘까요? 클라이언트가 웹툰 달라고 요청하면 서버는 웹툰을 주는 역할(응답)을 하죠.

그러면! 인스타 서버는요? 클라이언트가 "내 인스타 사진 보여주세요"라고 요청을 보내오면, 서버가 그에 맞게 인스타사진을 던져주는 역할(응답)을 하죠.

그러면! 토스서버는요? 클라이언트가 나의 게좌정보를 달라고 요청하면 서버는 유저의 계좌정보를 주는 역할(응답)을 하죠.

유튜브 서버도 마찬가지겠죠? 영상 달라고 요청하면 영상을 서버에서 던져주게 됩니다.(응답)

자! 그런데 여기서부터가 문제입니다! 클라이언트가 그냥 싸가지 없이 달라고 하면 서버는 무시하고 안줍니다.

서버도 하나의 프로그램이기 떄문에, 정해진 양식에 맞춰 보내진 요청에만 응답하도록 규칙이 되어 있습니다.

그래서 정확한 양식에 맞춰서 달라고 요청서를 보내야 합니다.

그 요청서가 뭐냐면요! 바로 아래 양식에 맞춰 요청서를 짜면 됩니다. 위에서 말한 첫번째 조건에는 대표적으로 "www.naver.com" 이 있을 겁니다. 그러면! get요청을 보내는 방법에는 무엇이 있을까요?

단점: 전부 브라우저가 새로고침됨(사용자가 보기에 시각적으로 별로다)

첫번째 방법은 일일이 입력해야 해서 귀찮고, 두번째 방법은 요청보낼따마다 브라우저에 내용을 처음부터 다시 그리는 문제가 발생하니까 싫다고 하면 3번째 방법을 쓰여야 합니다. ->그게 바로 Ajax로 get요청을 보내는 겁니다.

Ajax는 쉽게 말해서 "새로고침 없이 서버에게 get요청하는 쪼그만한 js코드"라고 보시면 됩니다. 그럼 뭐가 좋을까요?(what is advantage?) 장점: 새로고침이 없으니까 웹페이지 전환이 부드러워집니다.

네이버 같은 경우에도 2006년 이전 버전의 옛날페이지에서는 이벤트가 발생할때마다 항상 화면이 새롭게 그려지는 문제가 있었으나, 그 이후로는 ajax비동기 통신으로 화면전환이 부드럽게 되어지게 되었습니다.

아래 링크를 실제 API서버의 링크입니다.

안에 들어가면 { "price": 5000 }이 있습니다. 이를 받아오는 방법은 위와 같이 3가지일 겁니다. 1> 브라우저 url입력칸에 입력하기 2> 버튼으로 GET요청하기 3>ajax로 GET요청 보내기 여기서는 3번쨰 방법에 대해서만 다뤄보도록 하겠습니다.

※리액트나 Vue같은 프론트엔드 프레임워크에서는 axios라는 키워드를 사용하여 ajax를 구현하기도 합니다.)

실무에서 ajax를 쓰다보면 항상 브라우저의 CORS정책 때문에 데이터유입이 막히게 되는 것을 자주 볼 수 있습니다.

이 부분에 대해서 자세히 알아보고 싶으시면 아래 링크를 참고해주시면 감사하겠습니다. CORS는 왜 이렇게 우리를 힘들게 하는 걸까?

이 글이 도움이 되었나요?

신고하기