DOM에 접근하기
- HTMLCollection을 배열로 바꾸기
let title = document.getElementsByClassName('card-title');
console.log(title);
title = Array.from(title);
console.log(title);
getElememtByClassName으로 요소를 가져오면 HTMLCollection으로 가져와짐
length가 있는 유사배열이기 때문에 Array.from()을 사용해서 배열로 바꿀수 있음!
하지만 어떤 이유에서인지 빈 배열만 출력되는 현상 발생
결국 for ... of 를 사용해서 배열로 바꾸는 방식으로 진행함
- setTimeout 사용해서 DOM요소 가져오기
let title = [];
setTimeout(function () {
title = document.querySelectorAll('.card-title');
title.forEach((a) => {
console.log(a.innerText);
});
}, 1000);
console.log(title);
setTimeOut을 사용하지 않았을 때는
querySelectorAll()을 하면 어떤 내용도 가져오지 못했음
검색해본 결과
HTML에 데이터가 다 담기기 전에 DOM 객체에 접근하면 발생할 수 있는 현상일 수 있다고 함
<script>를 <body>태그 맨 밑에 넣어서 해결하는 방법과
다른 복잡한 방법이 있었으나
둘 다 되지 않음 ㅠㅠ
혹시나 싶어서 setTimeOut으로 실행되는 시간을 설정했더니 요소를 다 가져오는 것을 확인할 수 있었음
아무래도 'HTML에 데이터가 다 담기기 전에 DOM 객체에 접근하면 발생할 수 있는 현상' 이 문제가 맞는듯 싶음
하지만 확실한 해결방법은 찾지 못해서 조금 더 검색을 해봐야할 것 같음...
구조분해할당
예시 :
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true객체 o를 {p, q}에 할당!
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true객체 o를 {p: foo, q: bar}에 할당!
p, q를 foo, bar 라는 새로운 이름으로 할당
알게된 점 :
console.log({ p: foo, q: bar });
// { p: 42, q: true }p, q는 key
p, q를 새로운 이름으로 할당했으므로 콘솔foo는 42라는 값이 출력됨!!!
깊은복사 라이브러리
Lodash
_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn
lodash.com
튜터님의 코드 리뷰 꿀팁
- src - mai.js
- style - style.css
- assets - img파일
<body>태그에 크게 테두리부터 정하기
예) header form ul ...
header main ...
<script></script>의 위치
HTML 파써~가 헤드에 있는 js를 다운받은 후에 먼저 읽게 됨!
querySelector로 요소를 찾으면 null이 나올 수 있음
해결방법
1. 바디 태그 맨 밑에 위치
2. script에 defer 속성 추가 (자바스트립트를 지연실행)
<script>가 여러개일 경우 (js파일이 여러개)
scope를 독립적으로 해야함
type='module' 이라고 속성을 추가하면 독립적인 scope를 보장함 & defer 안써도 됨
import / export 필요~
