드림코딩 - fetch

이번 시간에는 자바스크립트를 활용해 드림 코딩의 무료 강의 중 하나인
미니 게임 웹 페이지 제작을 진행했다.

자바스크립트가 역시 얼마나 힘든지 다시 알 수 있는 순간이기도 했다.
아무튼, 지난 시간에는 json을 통해 서버와 클라이언트가 서로 교신하는 방법을 공부했다.

이부분에서 자꾸 알 수 없는 이유로 오류가 나 절망하기도 했지만,
다행히 해결방법을 찾을 수 있었다.

올바르게 json을 작성하고 서버로 보냈다가 다시 들고오는 과정도 번거로웠지만
알고보니 html파일을 클릭해서 실행하는 것이 아니라
서버에 실제로 올라가있어야 했던 것이다.

그도 그럴 것이 오프라인으로 서버와 통신하는게 말이 안되긴 했으니까 말이다.
아무튼, vsc에서 live server를 설치해주면 실시간으로 웹에 반영되는 것을 볼 수 있다.

자 그럼 이제부터 json을 통해 html내의 리스트에 실시간으로 반영해보자.

json

우선 .json 파일을 두고, 데이터와 코드를 따로 분리하는 습관을 들이자.
데이터와 코드가 같이 있다면, 관리 유지보수에 있어 어려움이 많기 때문이다.

json은 object와 유사하게 key와 value 로 구분해서 작성해주면 된다.
그리고 이를 중괄호로 감싸주면 끝이다.

그럼 정말로 서버에 데이터가 갔을까?
확인해보고 싶다면 자바스크립트 파일을 열고 fetch api를 통해 끌어오면 된다.

fetch()는 브라우저에서 원격으로 api를 불러올 수 있는 함수다.
이전에 원격으로 api를 끌어오기 위해서는 j쿼리와 비슷한 라이브러리를 필요하다는 것을 배웠다.

그런데 fetch를 사용하면 훨씬 더 간편하게 불러올 수 있다.

우선 fetch의 기본 구조는 위 사진과 비슷하다.
이는 내가 직접 따라친거라 원형은 아래와 더 비슷하다.

<script>
fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });
  </script>

여기서 res는 아무 이름으로 해도된다. 다만 fetch에선 기본적으로 response 라는 이름의 인자를 받는 것만 기억해두자.

여기서 보이는 .then은 fetch를 실행중일때 진행할 다음 코드라고 생각하면 된다.
자바스크립트는 비동기 방식이기에, 서버에서 데이터를 호출하는 동안, .then의 코드 실행이 가능하기 때문이다.

다시 설명하자면, fetch('~.json')을 했을 경우, 해당 파일을 서버에게 요청하고, then이 기다리는 동안 실행할 명령이다.

그래서 처음 코드를 다시 보자면

json 파일을 호출하고, 응답받은 인자 중에서, json의 items를 선택하는 과정이다.

이렇게 하면 성공적으로 서버에 있는 json 파일의 아이템 그룹을 볼 수 있게 된다.

이젠 불러온 파일들을 디스플레이에 띄우는 과정이다.

우선 컨테이너를 지정하고, 해당 부분에 innerHtml을 띄우주면 된다.
이때 map을 사용하면 되는데,
이 이유는, array를 변환하거나, 제어할땐 map이 적합하기 때문이다.

예를 들어 //

<script>

num = [1,2,3,4,5]
result = num.map(num => num*num)

console.log(result);
result = [1,4,9,16,25]

</script>

이런 식으로 출력된다.

그래서 map을 통해 items 내에 creatHTMLString()함수를 집어넣고, join('')을 해주면 된다.
이때 앞에서 말한 함수는 없으므로 이제부터 정의해줘야한다.

벡틱으로 문자열을 반환해준다고 생각하면 된다.
그리고 이 문자열은 html 내에서 변환되는 코드니, 그대로 코드를 집어넣는것과 똑같다.

그리고 마지막으로

이렇게 함수를 실행시켜주면 html내에 json의 업로드 상황에따라 업데이트된 아이템을 볼 수 있다.