기억의 DataBase

각 image마다 li 태그로 되어있는 상태 >> 각 이미지를 클릭할 때 마다, 발생하는 event를 처리하고 싶다면? for문으로 각각의 li Node들을 선택하고 addEventListener를 추가해주면 됨 >> li가 계속 늘어나서 10개 100개가 된다면, 모든 li에 이벤트 리스너를 추가하는 것은 비효율적 ul > li > img로 포함되어 있음 img를 클릭해도 ul에 있는 이벤트리스너가 작동함 (각각의 Node에 이벤트리스너를 추가할 필요가 없어졌음) 이와 같은 동작을 Event Bubbling이라고 함 (클릭한 지점이 하위엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트리스너가 있는지 찾는 과정) 출처 : https://www.grapecity.com/en/bl..

브라우저의 실행과정 DOM Tree 분석 > DOM ContentLoaded > 렌더링(화면표시 - 이미지 다운로드) > Load Load 이후에 JS가 실행되면 이미지가 다 다운로드되고 그려진 상태이므로 조작하는 과정에서 로딩성능이 불리함 렌더링이 다 끝나지 않아도, DOM Tree가 다 만들어지면 DOM API를 통해서 DOM에 접근할 수 있으므로 이 시점(DOM Tree 분석완료와 렌더링 사이)에 JS를 실행시키는 것이 가장 성능이 좋음 이 시점이 DOMContentLoaded 위와 같이 DOMContentLoaded 시점에 init() 함수를 실행시켜서, 초기화에 필요한 서비스들을 작성하는게 효율적

requestAnimationframe() setTimeout()을 통해서 재귀함수 방식으로 일정간격을 두고 실행하여 애니메이션을 구현하는 것은 최적화된 방식은 아님(주기를 16.6ms 미만으로 하면 불필요한 프레임이 생김) 브라우저에서 이를 최적화하기 위해 제공하는 함수가 requestAnimationframe() 2개 이상의 애니메이션을 동작시킬때 더 큰 의미가 있으며 JS를 통한 애니메이션 조작에는 필수적! transition/transform(CSS3) 성능적인 차원에서는 requestAnimationframe()보다 transition 활용이 더 빠름(특히 모바일에서) 따라서 간단하고 규칙적인 경우 → transition으로 변경 세밀한 조작이 필요한 경우 → requestAnimationfra..

DOM을 조작할 수 있는 API document. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_document.asp element. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_all.asp 유용한 DOM 탐색 엘리먼트 속성 구글의 검색창 form을 변수 f로 지정 tagName : 엘리먼트의 태그명 반환 textContent : 노드의 텍스트 내용을 설정하거나 반환 nodeType : 노드의 노드 유형을 숫자로 반환 firstElementChild : 첫번째 자식 엘리먼트를 반환 (firstChild는 공백이나 text도 자식 엘리먼트로 인식하기 때문에 자주 쓰지 않는다) 유용한 ..

자바스크립트의 객체 기본적으로 key, value로 이루어진 구조 자체적으로 순서를 가지고는 있으나, 겉으로 드러나는 index는 없으므로 순서가 필요할 때는 배열을 사용하는 것이 바람직 (key값을 기반으로 활용할 때, 객체를 사용) 객체.key 객체["key"] 객체[key] X -> 객체["key"] O (특정한 key의 value는, "key"로 찾아야 함) value에 배열이나 또 다른 객체를 담을 수도 있음 객체의 탐색( for in / Object.keys ) key값을 탐색 value값을 탐색 (v는 key가 아니라, 매 반복마다 바뀌는 다른 Value name(반복될 때 마다 바뀌는 key값을 의미?) : ["v"]가 아니다) for ( 변수 in 객체명){ 변수활용 실행문 } Objec..

배열의 선언 // 배열안에 어떤 타입도 들어갈 수 있음(배열안에 배열, 객체, null 등등...) ※ new Array로 선언도 가능하지만 보통은 간단하게 [ ]을 사용 배열의 추가 일반적으로는 push 메소드를 활용해서 값을 추가 배열의 메소드 indexof(찾는 값) : 배열에 해당 값이 있으면, 그 값의 index를 돌려줌 (없을 경우 -1을 반환 > 반환값이 -1이면 배열에 없는 값이라는 정보를 주는 것과 같음!) join() : 배열안의 값들을 하나의 문자열로 변환 concat(합칠 배열) : 기존의 배열 + 합칠 배열 = 새로운 배열(메모리 주소가 다름) (원래 배열은 그대로 있는 것을 주의, 추가되는 것임) 배열탐색 메소드(forEach, filter, map) forEach : 기존 fo..