[자바스크립트] fetch() API 함수로 호출하기

AJAX 

웹브라우저에서 javascript를 이용해 웹서버에 접속, 정보를 가져오기

페에지 내의 정보들을 부분적으로 변경하고 가져올 수 있는 기술 

필요한 정보만을 부분적으로 정교하게 가져오는 기술 

필요한 부분만 부분적으로 웹페이지를 로딩할 수 있어  자원 절약 가능 

 

 

 

 

 

 

그중 최신인,

fetch API 

단계별로 배워보기 step by step🧦

 

fetch('javascript')

클라이언트 -> 서버

웹브라우저! 'javascript'라는 파일을 서버에게 응답해줘

 

 

 

fuunction callbackme(){
            
}
        
        
fetch('html').then(callbackme);

서버가 응답할 때 까지 다른 일을 할 수 있도록 then을 사용 

'html' 파일을 서버에게 응답해주고  응답이 끝나면 callbackme라는 함수를 실행시켜

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

}


fetch('html').then(callbackme);
console.log(1);
console.log(2);

 clonsole 출력 : 1 >2 > response end

 

 

 

-> 보통은 callback 함수처럼 이름을 정하지 않고 익명함수를 사용 

callbackme 를 바꾸면 이런 모양이 되는데 이걸 fetch.then( _______) callback 함수 자리에 넣어주면

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

이것을 callbackme 자리에 넣어주면 익명함수화 됨

 

 

 

 

response

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

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

fetch를 통해 요청햇을 대 웹서버가 응답한 결과를 담고 있는 객체 

그 안에 여러가지 속성이 잇음 (ex status)

속성을 활용하여 에러 시 알람 처리 가능

 

 

 

fetch(name).then(function(response){
     response.text().then(function(text){
       document.querySelector('article').innerHTML=text;
     })
})

response중 text() 속성을 고른 후

그 속성을 이 파일의 'article' 요소에 HTML 로 넣기

 

 

 

 

함수화 하여 깔끔한 코드 가능!

    function fetchPage(name){
      fetch(name).then(function(response){
            response.text().then(function(text){
                document.querySelector('article').innerHTML=text;
            })
        })
    }

<li><a onclick = "fetchPage('html')">HTML</a></li>

HTML 리스트요소를 클릭하면, HTML의 'article'구간에 응답받은 자료 넣기

 

 

 

 

😉WOW 아주 간단한 fetch동작을 성공했다

 

 

 

 

 

 

 

 

 

 

 

---

Hash

 

    if (location.hash) {        
            console.log(location.hash.substr(1));
        } 
        else {
            
        }

 

데이터와 로직 을 구분할 수 있어야 한다.

데이터: 바뀔 수 있는 성질 

데이터를 바꿔도 aplication에 영향이 없도록 설계가 가능함

 

 

 

 

 

nav 인구간을 비워두고

'list' 파일을  HTML 에 id가 nav인 구간에 넣기

 <ol id="nav">
 
  </ol>

fetch('list').then(function(response){
            response.text().then(function(text){
                document.querySelector('#nav').innerHTML=text;
            })
        })

 

 

 

그렇담 사용자 입장에서는 데이터를 넣어줄때 데이터, 만 넣어야 하는데 현재 list 파일은

   <li><a href="#!html" onclick = "fetchPage('html')">HTML</a></li>
    <li><a href="#!css" onclick= "fetchPage('css')">CSS</a></li>
    <li><a href="#!javscript" onclick="fetchPage('javascript')">JavaScript</a></li>

이렇게 구성되어 있음. 

데이터가 raw형태로 들어가도 형태에 알맞게 변환이 가능해야 함! 

 

 

 

fetch('list').then(function(response){
            response.text().then(function(text){
              console.log(text); // html,css,javascript

              var items = text.split(',');
              var i=0;
              var tags='';
              
              while(i<items.length){
                var item = items[i];
                console.log(item);   // ex) javascript
                
                //item 각 글자의 앞뒤 공백 제거
                item=item.trim();
                var tag= '<li><a href="#!'+item+'"onclick="fetchPage(\''+item+'\')">'+item+'</a></li>';
                tags+=tag;
                console.log(tag);
                i+=1;
              }
              console.log(items);
              document.querySelector('#nav').innerHTML=tags;


            })
        });

이렇게 사용자는 list 라는 파일에 데이터만 넣어주면 

text= html, css, javascript 를 

items = [html, css, javascript] 배열로 만들어

item = html ( 배열 내 내용 각각 )

HTML 구문으로 만들어 

tags = <li><a href="#!html"onclick="fetchPage('html')">html</a></li> <li~~~

#nav 부분에 넣어주었다 .

 

 

 

 

그러면 list 의 데이터를 html로 구현 완료!

이처럼 데이터는 데이터로 나누고 구현은 구현으로 나누면 

데이터가 바뀌어도 application은 재사용 가능하고 

 

∙ application입장: 사용자들이 코드를 마음대로 수정하며 생길 사고 방지

∙ 컨텐츠 입력입장:  입력 공간, 방법에 대해 자유로울 수 있음 

 

 

 

참고영상

opentutorials.org/course/3281/20576