오늘은 미리 만들어놨던 추억 앨범과 스파르타플릭스에 jQuery를 적용해봤습니다!
$('#remember_btn').addEventListener('click', function () {
$('#postingbox').toggle();
});
이렇게 DOM 객체에 접근해서 동작을 수행하려 하는데
이런 에러가 발생했네요... 왜 그렇냐 하면
$('#remember_btn')은 jQuery 객체를 반환하는데 addEventListener는 순수 DOM 객체에서만 작동하기 때문입니다.
이를 해결하기 위해서는 2가지 방법이 있습니다.
(1) jQuery 방식으로 이벤트 등록
jQuery 객체에서 .on() 메서드 사용
$('#remember_btn').on('click', function () {
$('#postingbox').toggle();
});
class일 경우에는 어떻게 할까요?
jQuery 객체에서 .eq() 메서드를 사용하면 됩니다.
$('.btn-outline-light').eq(1).on('click', function () {
$('#title').text('쥬라기월드');
});
(2) DOM 객체를 사용해 이벤트 등록
jQuery 객체에서 순수 DOM 객체를 가져오는 방법
$('#remember_btn')[0].addEventListener('click', function () {
$('#postingbox').toggle();
});
이걸 활용해서 과제도 진행해봤습니다~!
지금까지 배운 jQuery와 Bootstrap을 이용해서 과제를 진행해봤는데 확실히 Bootstrap 사용해서 코딩하는게 더 깔끔하게 나오는 것 같네요 ㅎ
추가로 fetch를 사용해서 데이터 가져오는 것도 진행해봤습니다.
http://spartacodingclub.shop/sparta_api/seoulair
이 url로 들어가보면
json 형식으로 데이터가 존재하는 것을 볼 수 있습니다.
console로 확인을 해보면
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
console.log(data)
})
이런식으로 나오는데 배열과 객체로 접근하면 각각의 상세 정보에 접근할 수 있습니다.
