쇼핑몰 미니게임 클론코딩

드림코딩 엘리님의 강의와 함께 만들어봄!

쇼핑몰 미니게임 클론코딩을 직접 한 번 시도해보고, 엘리님 강의를 듣고 비교해보면서 고치면 좋을 점들에 집중해보았다.

1. html

• id, class, data 속성들을 잘 사용하면 편하다.
• 이미지를 넣을 때 이미지 자체적으로 이미지의 의미를 가질 때 img 태그를 쓰고, 단지 배경일 경우에 background-image로 넣자.

2. css

• css 변수로 color, size 등을 저장해두고 사용하면 한 번에 바꿀 수 있어서 편하다.

3. json 파일을 만들어서 데이터를 따로 보관하자.

• vsCode에서 json을 예쁘게 정렬시킬 때, Ctrl+K + Ctrl+F

4. js

• 일단 js 파일 안에 배열로 [{}] 정보를 만들고, displayItems에 매개변수로 items.forEach(item => displayItems(item))이런식으로 진행했더니, 나중에 다른 곳에서 재사용할 때도 forEach 단계를 다시 밟아야 해서 불편했다. 강의를 보고 나서 아 한꺼번에 넣는다는 생각을 왜 못했지 싶었다.
• button 마다 하나씩 eventListener를 달아줘야 한다고 생각해서 button을 구별할 배열을 만들고 forEach로 하나씩 달아줬는데, 강의를 보고 나서 event.target과 dataset을 활용하면 엄청*3 활용하기 좋고 보기도 좋구나 를 깨달았다.

main

1. loadItems : fetch API로 json 파일을 가져와서, response를 json형태로 파싱하고, items의 배열을 가져온다.
2. items의 배열을 displayItems, setEventListeners 함수에 매개변수로 전달해준다.

loadItems()
  .then(items => {
      displayItems(items);
      setEventListeners(items);
  })
  .catch(console.log);

branch

• displayItems는 배열을 받아와서 ul안에 li를 알맞게 만들어서 보여준다.
• setEventListeners는 logo를 클릭하면 displayItems 함수가 실행되게 하고, buttons를 클릭하면 onButtonClick함수에 event와 배열을 전달해준다.
• onButtonClick는 event.target.dataset에서 필요한 정보를 가져와서 filter한 배열을 displayItems함수에 매개변수로 전달한다. (이러면 전체적으로 업데이트 되니까 filter해서 보여지고, 나머지는 보여지지 않게 하는 방법도 있음)

img

var htmlImageElement = new Image(width, height);
const img = document.createElement('img');

• example <img width="100" height="200" src="picture.jpg">

var myImage = new Image(100, 200);
myImage.src = 'picture.jpg';
document.body.appendChild(myImage);

scroll Bar design

::-webkit-scrollbar : 스크롤바 전체
::-webkit-scrollbar-thumb : 스크롤 막대
::-webkit-scrollbar-track : 스크롤 막대 외부

ul::-webkit-scrollbar {
  width: 10px;
}

ul::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 4px;
  background-clip: padding-box;
  border: 2px solid transparent;
}

ul::-webkit-scrollbar-track {
  background-color: gray;
  border-radius: 4px;
}

🍩fetch API

const fetchResponsePromise = fetch(resource [, init])

• resource : 접근하고자 하는 resource의 URL, Request obj.
• init (optional) : request에 더하고 싶은 custom setting을 가진 obj. method(default:GET), header, body, mode 등을 지정.
  https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

function loadItems() {
    return fetch('data/data.json')
    .then(response => response.json())
    .then(json => json.items)
}

response.text() : response를 text 형태로 반환한다.
response.json() : json 형태로 파싱한다.
response.formData()
response.blob()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image