ajax (fetch API)

https://opentutorials.org/course/3281

처음 수업 들을 때부터
웹페이지 전체 로딩이 아니고 비동기적으로 갱신하는 거 아닌가?
하고 의문이 들었었는데 마침 강의로 딱 나와있었다ㅎㅎ
html

<h2>HTML</h2> HTML is..

css

<h2>CSS</h2> CSS is..

java script

<h2>java script</h2>java script is..

---

category

html,css,java script

index.html

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

<article>

    </article>


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

  fetch('category').then(function(response){
    response.text().then(function(text){

      var items = text.split(',');
      console.log(items);
      var i =0;
      var tags = '';
      while(i<items.length){
        var item = items[i];
        item = item.trim();
       var tag = '<li><a href="#!'+item+'"token operator">+item+'\')">'+item+'</a></li>';
        tags = tags + tag;
        i = i+1;
      }
      document.querySelector('#nav').innerHTML = tags;
    })
  });
</script>

ol(nav): 글목록 위치 / article: 목록 각각의 내용 위치

1. 콤마(,)를 기준으로 문자열을 구분하여 items에 입력하고
   items 배열에 있는 값을 while문을 돌면서 하나씩 item에 넣어준다

2. item에 a태그를 걸어 tag에 입력해주고
   tags에 집어넣어 list를 만들어준다

3. 기존에 만들어둔 nav에 tags를 넣어주면 글목록 생성~

---

초심자 강의라 그런지 난이도가 그렇게 어렵지 않았고
금방 이해할 수 있었다