이진욱의코딩

서버를 이용해서 Ajax하기(기초) 본문

JS

서버를 이용해서 Ajax하기(기초)

Crucifi 2019. 9. 6. 22:01

이번 포스팅은 ajax가 무엇이고 어떻게 사용하는지에 대한 간단한 예제를 살펴볼 예정입니다.

우선 실습환경을 한번 만들어봅시다.

자료를 먼저 다운을 받아볼 건데 자료는 https://github.com/web-n/web2_javascript 여기서 다운로드하시면 됩니다.

다운로드한 파일을 웹서버의 문서 디렉터리(apache2/htdocs)에 넣으시면 됩니당.

 

저는 개인적으로 여기서 많이 어려웠어요. 그래서 제가 헤맨내용을 누구보다 자세하게 설명드릴게요.

여기서 웹서버의 문서 디렉터리가 무엇인가? 에 대해 모르시는 분이 있으실 겁니다.

일단 아파치라는 서버를 설치를 먼저 해야 하는데 설치는 생활코딩 페이지에

있는 https://opentutorials.org/course/3084/18892   

 

웹서버 운영하기 - 생활코딩

웹서버 소개 --- 이번 시간에는 내 컴퓨터에 웹서버를 설치해서 누구나 내 컴퓨터에 있는 웹페이지를 볼 수 있도록 해 보겠습니다. 이 과정은 꽤 많은 지식이 필요하기 때문에 좀 어렵습니다. 대신 인터넷이 동작하는 원리를 알 수 있다는 것은 큰 장점입니다. 그리고 한 가지 당부드리고 싶은 것은 실습이 잘 작동하지 않을 가능성이 매우 높아요. 인터넷은 실제로는 매우 복잡한 시스템이거든요. 제대로 작동하는 이유는 한 가지 입니다만, 작동하지 않는 이유는 수십

opentutorials.org

여기서 자신이 윈도인지 맥인지 리눅스인지 선택해서 설치하시고 세팅까지 하면 됩니다. 

저는 이것도 모르고 서버를 어떻게 운영해야 하는지에 대해 엄청난 시간을 허비했습니다....

 

여기까지가 실습환경 구축입니다.

 

이제부터 ajax에 대해 설명드리겠습니다.

 

비동기식 자바스크립트 XML(Asynchronous Javascript And XML)의 약자. 하이퍼텍스트 표기언어(HTML)만으로 어려운 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술. 별도 프로그램을 설치하거나 웹페이지를 다시 로딩하지 않고도 메뉴 등 화면상의 객체를 자유롭게 움직이고 다룰 수 있다. 비슷한 기능의 액티브 X나 플래시 등에 비해 가볍고 속도가 빨라 차세대 웹 기술로 각광받고 있다.

이게 사전적 의미입니다.

 

우리가 이번시간에 할 것은 fetch api입니다.

 

ajax를 구현하는 여러 가지 기술이 있습니다. 이번 시간에는 최신 기술인 fetch API를 이용할 것입니다. fetch API는 기존의 방식에 비해서 더 유연하고, 분명합니다.

 

예시를 먼저 보면서 설명을 드리도록 할게요.

<!doctype html>
<html>
  <body>
    <article>
 
    </article>
    <input type="button" value="fetch" onclick="
      fetch('css.txt').then(function(response){
        response.text().then(function(text){
         alert(text); 
      })
      })
    ">
  </body>
</html>

 

onclick을 눌렀을 때 나오는 이벤트에 대해 말씀을 드릴게요.

fetch('')에서 ""안에 있는 파일을 같은 서버에 있는 다른 파일을 불러들일 때 사용합니다. 특이한 점은 function안에 

response가 있다는 점입니다.  위의 코드를 실행시킨 결과를 보죠.

 

이렇게 css.txt에 제가 임의로 적은 문자가 알림 창에 뜨는 것을 볼 수 있습니다.

 

서버와 클라이언트가 사이에 통신을 하면 fetch('')을 요청하면 서버에서 응답을 하는데 만약 시간이 오래 걸린다면 다른 작업을 못하지만 여기서 then을 이용해서 서버에서 요청하는 동안 다른 작업을 할 수 있게 만들 수 있습니다.

 

 

또 다른 예시를 보시죠

 function callbackme(){
        console.log('response end')
      }
      fetch('css.txt').then(callbackme);
      console.log(1);
      console.log(2);

위의 코드를 기반으로 비동기와 동기에 대해 설명드리겠습니다.

 

fetch로 css.txt를 요청을 하고 then을 통해 callbackme를 호출해 달라고 했습니다.

이렇게 밑의 코드인 consol(1), (2)까지 끝나면

 

 function callbackme(){
        console.log('response end')
      }

가 실행이 됩니다. 

동기로 실행이 된다면 요청된 것이 끝나기 전에는 밑의 코드들이 실행이 되지 않는 것이고

비동기로 실행이 된다면 

fetch('css.txt').then(callbackme);

위의 코드가 실행되고 있는 동안 밑의 consol(1), (2)가 실행되는 겁니다. 말하자면 병렬구조?라고 합니다.

 

여기까지 fetch를 이용해 요청하고 응답하는 것까지 살펴보았습니다.

 

 

 

+내용을 더해서 fetch api -response객체까지 한번 보도록 하겠습니다.

 

fetch('css.txt').then(function(response){
console.log(response);
});
console.log(1);
console.log(2);

이 코드를 실행시켜 보겠습니다.

 

status주목

이런 식으로 파일을 정상적으로 잘 찾으면 200이라는 숫자가 나온다 만약 파일을 찾지 못한다면 404 에러가 뜬다.

여기서 응용을 한번 해보도록 하겠습니다.

 

 fetch('css.txt').then(function(response){
        if(response.status == '404'){
          alert('not found')
        }
      });
      console.log(1);
      console.log(2);

fetch를 통해서 요청을 했을 때 웹서버가 응답한 결과를 담고 있는 객체를 response라고 한다.

만약 파일을 찾지 못해서 status에 404 에러가 뜬다면 not found의 알림 창을 띄우는 코드를 작성해보았다.

정상적으로 파일을 찾으면 알림 창이 뜨지 않는다.

 

여기까지가 제가오늘 공부한 내용입니다.

 

'JS' 카테고리의 다른 글

ajax를 이용한 초기페이지 구현  (0) 2019.09.26
ajax의 적용  (0) 2019.09.26
jQuery 객체에 대해 알아봅시다.  (0) 2019.08.31
jQuery에 대해 알아봅시다.  (0) 2019.08.30
(DOM)제어 대상을 찾기  (0) 2019.08.27
'JS' Related Articles more