JSON (3) 썸네일형 리스트형 Dream Coding | 쇼핑몰 미니 게임 만들기 3편 / fetch 우선 큰 틀부터 짜보자. 저장한 데이터를 불러와서 -> loadItems() 프로미스가 리턴이 되면, 전달받은 items가 디스플레이에 보여지고, -> displayItems(items); 버튼을 클릭했을 때 필터링 되는 것을 볼 수 있다. -> setEventListeners(items) loadItems은 json 파일로부터 데이터를 동적으로 받아 올 것이다. 쉬운 방법은 바로 fetch를 사용하는 것. fetch('data/data.json') 이렇게 fetch를 쓰고 경로나 url을 입력해주면 된다. 데이터를 성공적으로 받아오면 response라는 오브젝트를 전달해준다. response는 바디와 헤더, 코드 성공 유무나 페치의 url등이 들어있다. 바디안에 우리가 받고자 하는 데이터가 들어있다. .. Dream Coding | 쇼핑몰 미니 게임 만들기 2편 / JSON 데이터를 저장할 때 JS안에 저장하는 경우가 있는데, 좋은 경우는 아니다. JS는 비즈니스 로직을 담당하는 곳이다. 때문에 코드가 들어있는데 데이터와 코드가 같이 있는건 좋은 방법이 아니다. 그래서 미니게임 클론코딩은 json파일을 따로 만들어 둘 것이다. json은 오브젝트와 굉장히 유사한 아이이다. items이라는 배열에 각각의 아이템들이 들어있는 형태. 각각의 아이템은 또 다른 오브젝트이다. 때문에 key와 value로 구성되어 있다. 미니 게임 클론코딩에서는 데이터가 티셔츠, 바지, 스커트가 해당된다. 아이템이라는 배열안에 티셔츠인지, 남성복인지, 여성복인지, 사이즈, 색상등의 key와 그 값인 value를 가지고 있는 데이터들이 있다. JavaScript(ES6)|JSON 개념 정리와 활용방법 HTTP(Hypertext Transfer Protocal)- 클라이언트와 서버를 연결해주는 것. AJAX- 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술. XHR- 브라우저 API에서 제공하는 오브젝트중에 하나. 이것을 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있다. fetch()API- 최근 브라우저 API에 추가된 간편하게 데이터를 주고받을 수 있는 것. (ex에서 사용할 수 없음) XML- 마크업 언어중에 하나. (요즘에는 많이 사용하지 않음) JSON(JavaScript Object Notation)- 요즘에 많이 쓰는 브라우저 API. -Object {key: value}로 이뤄져 있음. -텍스트를 기반으로 한 가벼운 언어. -프로그램 언어와 상관없이 대부분의 언.. 이전 1 다음
