[4] AJAX - 리팩토링 함수화

1. 리팩토링 함수화

중복을 제거하며 기존의 익명 함수를 리팩토링하다.

기본 예제

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

    <li onclick="fetchPage('css')">CSS</li>

    <li onclick="fetchPage('JavaScript')">JavaScript</li>
</ol>

<article>

</article>

<script>
// 리팩토링 함수화
function fetchPage(name){
  fetch(name).then(function(response){
    response.text().then(function(text){
	    document.querySelector('article').innerHTML = text;
    });
  });
}
</script>

위 코드는 li를 click 하면 name 인자를 갖고와 파일의 텍스트를 읽고, 그 텍스트를 article의 내용(innerHTML)로 넣어준다.

• name 인자: html, css, javascript 등이 들어옴
• response.text(): 불러온 파일의 text를 읽음