클론 코딩 (5) 썸네일형 리스트형 Dream Coding | 쇼핑몰 미니 게임 만들기 5편 / handling events 마지막으로 setEventListeners의 함수를 만든다. 로고와 버튼을 등록한다. 버튼이 들어있는 컨테이너 자체의 이벤트 리스너를 등록한다. 이것을 이벤트 위임이라고 한다. 하나 하나의 이벤트 리스너를 반복해서 등록하는 것 보다, 버튼들이 들어있는 컨테이너에 이벤트리스너를 등록해서 한 곳에서만 핸들링할 수 있도록 만드는 방법. logo.addEventListener('click', () => displayItems(items)); 로고가 선택되면 모든 아이템들이 보여질 수 있도록 하는것. buttons.addEventListener('click', event => onButtonClick(event, items)); 버튼이 클릭되면 이벤트를 처리할 수 있도록, 이벤트가 발생한 아이를 인자로 전달해주고.. Dream Coding | 쇼핑몰 미니 게임 만들기 4편 / display items fetch로 json파일을 받아 왔으면, 화면상에 item들을 보여주는 식을 작성할 것이다. 이렇게 displayItems의 함수를 만들어줄 건데, 함수 안에는 container를 만들고, document.querySelector로 items의 클래스를 선택해준다. 그리고 이것을 html언어로 만들어줄 것이다. 위에서 만든 container의 innerHTML을 이용해서 우리가 받아온 items를 li의 그룹으로 만들어서 container에 추가해줄 것이다. 즉, items안에 json으로 정의한 아이템의 오브젝트들을 HTML요소로 변환을 해줄 것이다. 한 가지의 배열 형태에서 다른 형태의 배열로 변환하는 것, 맵핑하는 것은 map을 이용하면 된다.👇 container.innerHTML = items.m.. 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를 가지고 있는 데이터들이 있다. Dream Coding | 쇼핑몰 미니 게임 만들기 1편 / HTML, CSS 요즘 도움을 많이 받고 있는 유튜브 Dream Coding에 있는 미니 쇼핑몰 게임(?) 클론 코딩을 해봤다. 게임이라고 하기에는 애매하지만, 바닐라JS로 기본적인 동작을 할 수 있는 프로젝트다. 이런 식으로 되어있는 모바일 형태의 쇼핑몰 UI. nav부분의 버튼을 클릭하면 상의, 바지, 치마 그리고 색깔별로 분리되어 나오는 것을 구현할 수 있다. 우선, 마크업부터 진행을 해봤다. 로고, 카테고리, 그리고 아이템으로 나눌 수 있다. header안에 로고와 nav를 넣었다. 그리고 main에 아이템들을 넣어놨다. 위에 코드를 보면 img가 없는데, css background: url로 적용하는 게 익숙해서 css로 구현을 해봤다. 그래서였을까..... 로고와 nav까지는 잘 됐는데, 아이템 부분에서 새로 .. 이전 1 다음
