[JS] fetch API (no jQuery)

오늘 새벽 간단한 웹 문제를 풀다가 생각지도 못하게 당황하는 일이 발생했다.. html과 js만을 가지고 서버에 요청을 보내보는 것이었는데, 그동안 프론트 공부를 종종 해보긴 했지만 html과 js파일만으로 서버에 요청을 보내는 건 한 번도 해본 적이 없었기 때문에... 프레임 워크에 잘 만들어져 있는 모듈을 많이 쓰다 보니 더 애를 먹은 것 같다. 소개할 API는 fetch API다. fetch API의 존재를 알면 간단해진다. 형태는 아래와 같다.

function submit () {
	fetch('/submit', {
		method: 'POST', // http 메소드
		headers: {'Content-Type': 'application/json'},
		body: JSON.stringify({ check: ["something", "something"] }) // 보낼 데이터
	})
    .then(res => res.json())
    .then(ret => {
      if (ret.value){
      document.getElementById("result").innerHTML = ret.value
      } else {
      document.getElementById("result").innerHTML = "값이 없습니다."
      }
	})
};

첫 번째 then을 통해 응답받은 json 형태를 JS에서 사용할 수 있는 형태로 바꾸어 준다. 두 번째 then에서는 json에서 JS의 객체로 변형된 결과를 마음껏 사용하면 된다. 두 번째 문제는 서버로부터 return 받은 값을 어떻게 html에 넣어 띄워줄 것인가였다.. 구글에 검색하니 innerHTML이라는 완벽한 친구가 있었다. 이는 밑에서 살펴보자.

ret에는 다음과 같은 결과가 담긴다 => { 'name' : "홍길동", "age": 20 } 

HTML의 특정 Tag안에 값 넣어주기

innerHTML

document.getElementById("특정 tag의 id").innerHTML = "넣을 문자열"

위의 코드를 사용하면 해당 id를 가진 태그안에 문자열이 삽입된다. 신기하다 신기해.. 이 innerHTML은 다양하게 활용이 가능하다.

document.body.innerHTML = ""; // 문서의 body가 비게된다.
document.querySelector('article').innerHTML = "내용"; // article의 내용이 "내용"으로 바뀐다.

다양한 제어 대상을 적용할 수 있어 꽤 신기하다는 생각이 들었다. 

제어 대상 찾기

아래의 다섯 개 정도는 알아두면 편리할 것 같다.

document.getElementsByTagName()
document.getElementsByClassName()
document.getElementById()
document.querySelector()
document.querySelectorAll()

• document.getElementsByTagName() : 해당 태그의 모든 요소를 배열로 반환
• document.getElementsByClassName() : 해당 클래스 네임을 가진 모든 요소를 배열로 반환
• document.getElementById() : 해당 id를 가진 요소를 반환
• document.querySelector() : 해당 CSS 선택자를 가진 첫 번째 요소를 반환
• document.querySelectorAll() : 해당 CSS 선택자를 가진 모든 요소를 배열로 반환