클론코딩 (2) 썸네일형 리스트형 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 다음
