[7] AJAX - list 심화 리팩토링(split, trim)

list 파일에 있는 li들의 리팩토링을 해 봤다.

1. 리팩토링 설명

기존에 메뉴명만 다른 li의 엘레멘트를 전부 적었다면,
html,css,javascript,ajax 를 적으면 , 를 기준으로 배열을 만들 수 있는 split() 와 반복문을 사용하여 더욱 편리하게 한다.

2. 작업 설명

1. list 파일 수정

수정 전

<li><a href="#!html" onclick="fetchPage('html')">html</a></li>
<li><a href="#!css" onclick="fetchPage('css')">css</a></li>
<li><a href="#!javascript" onclick="fetchPage('javascript')">javascript</a></li>
<li><a href="#!ajax" onclick="fetchPage('ajax')">ajax</a></li>

수정 후

html,css,javascript,ajax

2. list 파일을 갖고 오는 함수 수정

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

    let items = text.split(',');
    let tags = '';

    for(i = 0; i < items.length; i++){
      let item = items[i];
      item = item.trim(); //공백 없애기

      let tag = `<li><a href="#!html"token interpolation">${item}')">${item}</a></li>`

      tags = tags + tag;
    }

    document.querySelector('#nav').innerHTML = tags;
  });
});

1. fetch를 통해 list text를 갖고 오게 되면
   html,css,javascript,ajax가 찍히게 된다.

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

2. split(',') 을 사용하여 , 기준으로 나눠 배열을 만든다.
   변수 items에 넣는다.

let items = text.split(',');

3. 반복문을 사용하여 배열에 있는 값을 넣은 li를 생성하고,
   변수 tags를 생성하여 방금 생성한 li들을 넣는다.

let tags = ''; //빈값

for(i = 0; i < items.length; i++){
  let item = items[i];
  item = item.trim(); //공백 없애기

  let tag = `<li><a href="#!html"token interpolation">${item}')">${item}</a></li>`

  tags = tags + tag; //li를 쌓아간다.
}

4. 변수 tags를 #nav에 innerHTML 해 준다.

document.querySelector('#nav').innerHTML = tags;