[생활코딩][WEB3] Ajax

1. Ajax

Ajax는 Asynchronous Javascript And Xml의 줄임말로, 에이잭스라고 부른다. 에이잭스는 싱글페이지 웹 애플리케이션을 위해 필수적인 자바스크립트 라이브러리이다. 지난 강의까지 배웠다면, 한 페이지에서 다른 페이지로 전환될 때 변하지 않아도 되는 부분이 있음에도 불구하고, 그 내용을 새로운 웹 페이지 파일을 로드하여 표현해야 했다. Ajax를 이용하면, 바뀌지 않아도 되는 부분과 바뀌어야 하는 부분을 나눈 다음 바뀌어야 하는 부분 즉, content적인 요소만 갈아 끼우면서 새로운 웹 페이지 파일을 리로드 하지 않아도 된다. 리소스의 불필요한 리로드를 막을 수 있는 것이다. 이러한 Ajax는 jQuery와 함께 사용되면서 폭발적인 시너지를 발휘하는데, 다양한 메소드등을 실습하며 몸소 느껴봐야겠다. 장점과 단점을 알아본 후 지난 실습 프로젝트에 Ajax를 적용시키며 정리해 봐야겠다.

 

장점

• 리로드를 막아주기 때문에 웹페이지의 속도를 향상시켜 준다.
• 서버의 처리가 완료 될때까지 기다리지 않고 처리가 가능하다.
• 서버에서 html파일이 아닌 data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서 불가능했던 다양한 UI를 가능하게 해 준다. (싱글페이지 웹 애플리케이션)

단점

• 보안에 신경을 써야한다. ( 히스토리 관리가 안됨)
• 연속으로 데이터를 요청할 경우 오히려 서버 부하가 증가할 수 있다.
• 지원하는 Charset이 한정적이다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• HTTP 클라이언트의 기능이 한정되어 있다.

2. fetch API

fetch API는 ajax를 구현하는 데 있어서 비교적 최신 기술이라고 할 수 있다. 

우선 코드의 내용과 결과를 통해 fetch API의 기능을 확인해보았다.

위의 fetch는 'css'라는 파일을 찾고 그 안에 있는 text내용을 html문서에 표시해 주는 역할을 한다. 달리 말하면 'css'부분에 다른 파일명이 올 경우 그 내용만 바뀌게 동작하는 것을 볼 수 있다. 

fetch API는 클라이언트와 서버간의 요청과 응답으로 설명된다. fetch('css')는 css라는 파일을 server에 요청하는 명령으로 볼 수 있다. then의 의미는 'css'파일을 불러오는 것을 끝내고 난 후 해야 할 일을 명시할 수 있는 것이다. 즉, 서버가 응답하는 동안 이후에 해야 할 일을 명시하는 것이다. 이것은 절차지향적인 언어와는 사뭇 다른 뉘앙스를 풍긴다. 한편, then안에 함수 이름이 아니라 바로 함수 자체가 들어가 있는데 이렇게 이름 없이 사용되는 함수를 익명 함수라고 한다. 여기저기서 호출될 필요 없이 일회성으로 사용할 때 위와 같이 익명 함수를 사용할 수 있다. 

function call(){
	console.log('call');
}

fetch('css').then(call);
console.log(1);
console.log(2);

절차지향적인 언어에서는 위 코드의 각 줄이 어떠한 것을 의미하는지는 몰라도 fetch 문이 끝나고 나서야 아래의 console.log(1)과 console.log(2)가 순차적으로 실행될 것이다. 하지만 위의 코드를 돌려보면 1 , 2 , call의 순서로 log가 찍히게 된다. 즉, css라는 파일을 불러오는 동안 console.log1 과 2 가 실행이 되고, css파일이 모두 불러진 후에 then 코드가 실행되어 call 함수를 호출하게 되는 것이다. 이것을 Asynchronous 비동기적인 실행이라고 할 수 있다. 

 

하나더 알고 넘어가야 할 것은 response 객체이다. 위에서 article에 text를 본문에 띄어주는데, 그 text는 response객체로부터 온 것이다. response객체는 쉽게 말해 서버로부터 받은 응답이다. response객체 안에는 요청받은 내용은 물론 status등의 여러가지 속성도 함께 들어있다.