미니게임 만드는 수업을 따라가보고 있다. 자바스크립트 함수하나 내 뜻대로 못만들어서 작은 도약이 필요할 것 같았다. 엘리쌤은 한시간 만에 끝냈다고 하던데.. 흠흠
정적인 페이지는 다 만들고, 남은 것은 필터 버튼을 누르면 필터에 해당하는 아이템들만 남도록 하는 필터 함수만 남았다.
알고리즘
정적인 페이지에서 최대한 해볼 수 있게, 단순히 사라지는 함수를 생각해봤다.
티셔츠 버튼을 누르면 바지 아이템과 스커트 아이템은 display ='none'상태가 되고 티셔츠아이템만 보여준다.
paList & sList.style.display = 'none';
-
필터 버튼이 될 엘리먼트 불러오기: .t-shirt-icon를 불러와 선언한다.
const tFilter = window.document.getElementByClassName('t-shirt-icon') -
리스트의 티셔츠 아이템들 불러오기: .t-shirts들을 불러와 배열로 선언한다.
const tList = window.document.getElementByClassName('t-shirt') -
tFilter에 addEventListener를 달아서 onclick 했을 때, 다른 배열들은 사라지게 하는 함수를 실행시킨다.
-
위 함수를 disappear 함수라고 명명하고 만들어보자
tFilter.addEventListener('onclick', disappear);
function disapear(){
tshirts.style.display = 'none';
}실패로 돌아갔다...
왜 안될까??
"addeventlistener is not a function"이라는 경고문이 뜬다.
이후 한참을 더 해맸다. 배열로 만들어서 해결해보려고. 그런데 한 아이템에 두개의 속성이 있는 것을 어떻게 해결해야할지 당최 모르겠는거다ㅠㅠ
내 딴엔 이렇게 각각의 리스트를 만들어서
티셔츠 필터를 누르면 치마 리스트와 바지 리스트가 사라지도록 하고 싶었는데...
const tList = document.getElementsByClassName('t-shirts');
const sList = document.getElementsByClassName('skirt');
const paList = document.getElementsByClassName('pants');
const bList = document.getElementsByClassName('blue');
const yList = document.getElementsByClassName('yellow');
const piList = document.getElementsByClassName('pink');
배운 것도 있다. 여러 엘리먼트가 있는 클래스를 불러오면 자동으로 배열이 만들어진다는 점!
단, HTML Collection이라는 형태로 와서
[div.items.blue.t-shirt, div.items.yellow.t-shirt, div.items.pink.t-shirt]
같은 식으로 나타난다.
결국 엘리쌤의 강의를 보게 되었다.
엘리쌤의 알고리즘
구조화하는 것부터 달랐다ㅠㅠ
HTML은 UI를 담당하는 부분이므로 데이터가 섞이면 안된다고 한다.
그럼 자바스크립트로 옮기나? ❌
자바스크립트는 비즈니스 로직을 담당하는 부분이므로 json에 데이터를 옮겨담는다.
1. JSON
영상을 오랜만에 다시보니 더 명확했다.
json은 javaScript Object Notation으로 자바스크립트 오브젝트와 관련이 있다.
json은 자바스크립트처럼 Object{key: value}로 구성,
브라우저뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때, 또는 서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때 (지금임) 많이 이용한다고 한다.
(그리고 프로그램밍 언어와 플랫폼에 상관없이 쓸 수 있다!)
{
"item":[
{
"color":"blue",
"gender":"male",
"clothes":"tshirts",
"size": "M",
"image": "../imgs/blue_p.png"
},
{
"color":"yellow",
"gender":"female",
"clothes":"skirt",
"size": "L",
"image": "../imgs/yellow_s.png"
}
.
.
.
]
}이렇게 많은 아이템들이 json의 포맷으로 저장되었다.
덤으로 내가 열심히 만든 html의 아이템들이 대거 삭제되었다ㅎㅎㅠ
2. JavaScript
대신 새로운 구조가 만들어졌다. json은 데이터만 담당하고 자바스크립트에서 json의 데이터를 fetch 해오는 것이다!
loadItems()
.then (items => {
displayItems(items);
setEventListener(items)
console.log(items);
})
.catch(console.log); loadItems라는 함수가 실행되면 이후 인자 items를 받아
displayItems라는 함수로 한번 가공시키고 // 보여주는 역할
setEventListener라는 함수로 또 한 번 가공시킨다. // 필터링하는 역할
fetch
가져오다 라는 뜻이 있더라.
아마 json영상에서 XMLHttpRequest랑 같이 한번 나왔던 것 같은데, 여기서 쓰게 될줄은 몰랐다.
function loadItems() {
return fetch('data/data.json') //data.json을 가져와 리턴한다.
.then(response => response.json()) //fetch했을때 나오는 response 중 json 데이터만 가져온다.
.then(json => json.item); //json중에서도 item만 가져온다.
}fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다. 출처
이렇듯 잡다한 데이터들이 다 있기 때문에 json을 꺼내고 그 안에 item을 꺼낸다.
#TIL
한줄요약
- HTML은 UI CSS는 디자인 자바스크립트는 비즈니스 로직을 담당하고 JSON은 데이터 담당
(JSON - JavaScript Object Notation/자바스크립트 객체 표기법) - 서버의 비동기 요청방식 fetch()로 json같은 데이터를 가져올 수 있다, Promise와 같은 형태로 사용하면 된다.
