드림코딩 엘리님의 강의와 함께 만들어봄!
쇼핑몰 미니게임 클론코딩을 직접 한 번 시도해보고, 엘리님 강의를 듣고 비교해보면서 고치면 좋을 점들에 집중해보았다.
- html
- id, class, data 속성들을 잘 사용하면 편하다.
- 이미지를 넣을 때 이미지 자체적으로 이미지의 의미를 가질 때 img 태그를 쓰고, 단지 배경일 경우에 background-image로 넣자.
- css
- css 변수로 color, size 등을 저장해두고 사용하면 한 번에 바꿀 수 있어서 편하다.
- json 파일을 만들어서 데이터를 따로 보관하자.
- vsCode에서 json을 예쁘게 정렬시킬 때, Ctrl+K + Ctrl+F
- js
- 일단 js 파일 안에 배열로
[{}]정보를 만들고, displayItems에 매개변수로 items.forEach(item => displayItems(item))이런식으로 진행했더니, 나중에 다른 곳에서 재사용할 때도 forEach 단계를 다시 밟아야 해서 불편했다. 강의를 보고 나서 아 한꺼번에 넣는다는 생각을 왜 못했지 싶었다. - button 마다 하나씩 eventListener를 달아줘야 한다고 생각해서 button을 구별할 배열을 만들고 forEach로 하나씩 달아줬는데, 강의를 보고 나서 event.target과 dataset을 활용하면 엄청*3 활용하기 좋고 보기도 좋구나 를 깨달았다.
main
- loadItems : fetch API로 json 파일을 가져와서, response를 json형태로 파싱하고, items의 배열을 가져온다.
- 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
