Dream Coding | 쇼핑몰 미니 게임 만들기 3편 / fetch

 

우선 큰 틀부터 짜보자.

 

 

저장한 데이터를 불러와서 -> loadItems()

프로미스가 리턴이 되면,

전달받은 items가 디스플레이에 보여지고, -> displayItems(items);

버튼을 클릭했을 때 필터링 되는 것을 볼 수 있다. -> setEventListeners(items)

 

loadItems은 json 파일로부터

데이터를 동적으로 받아 올 것이다.

 

쉬운 방법은 바로 fetch를 사용하는 것.

 

fetch('data/data.json')

이렇게 fetch를 쓰고 경로나 url을 입력해주면 된다.

 

데이터를 성공적으로 받아오면

response라는 오브젝트를 전달해준다.

response는 바디와 헤더, 코드 성공 유무나 페치의 url등이 들어있다.

바디안에 우리가 받고자 하는 데이터가 들어있다.

 

이렇게 받아와지면, 네트워크창에서도 json파일이

불러와진 것을 확인할 수 있다.

 

.then(response => response.json())

->

response 오브젝트가 있는 json이라는 api를 이용해서

response의 바디를 json의 오브젝트로 변환할 것이다.

 

 

그러면 이렇게 .json파일이

오브젝트에 불러와진것을 볼 수 있다.

 

 

 

 

여기서 json의 전체가 아닌,

json의 items만 전달하도록 한다.

 

 

 

그럼, 이렇게 items의 배열만 받아와진 것을 확인할 수 있다.