Javascript
1.[JS] DOM Traversing
DOM 트리에서 요소의 부모, 자식, 형제 요소에 접근하기
2.[JS] Event delegation을 활용한 smooth scrolling
자바스크립트의 이벤트 위임을 활용하여 navigation bar의 세 링크('.nav__link')를 눌렀을 때 해당하는 페이지 섹션으로 smooth scroll되도록 하는 방법
3.[JS] Intersection Observer API를 활용한 sticky navigation 구현
아래와 같이 웹페이지에서 header 섹션에서 section1 (FEATURES) 섹션으로 스크롤할 때 상단의 navigation bar가 고정되도록 sticky navigation을 구현해 보자.이때 Intersection Observer API라는 것을 활용할 수
4.[JS] Intersection Observer API를 활용한 lazy loading 구현
앞서 Sticky navigation 구현 포스트에서 소개했던 Intersection Observer API를 활용하여 이번에는 lazy loading이라는 UX를 구현해 보자.웹페이지 내에 이미지와 같이 용량이 큰 요소들이 포함되는 경우 구형 기기나 속도가 느린 네트
5.[JS] constructor, getter, setter
자바스크립트에서 생성자(constructor)와 getter, setter 각각의 용도를 복습해보았다.객체 생성과 동시에 호출되며 전달되는 값을 사용하여 속성값을 초기화함생략 가능하다getter: 객체 사용자에게 속성값을 간접 접근하도록 함setter: 조건에 맞는 속
6.[JS] 생성자 함수를 사용하여 객체를 생성할 때 주의할 점
생성자 함수를 사용하여 객체를 생성하면 파라미터에 속성값을 넘겨주는 방식으로 해당 생성자 함수를 일종의 틀로서 사용하여 여러 객체를 만드는 데 유용하다.다만 위 코드에서 한 가지 문제를 지적하자면, 생성자 함수를 사용하여 생성된 객체는 name, age라는 속성명과,
7.[JS] 클래스 내부의 이벤트 핸들러 호출 시 주의점
이벤트 리스너의 콜백 함수인 이벤트 핸들러가 클래스의 인스턴스 메서드로 정의된 경우 호출 시 주의할 점이 있다.아래 예시에서, form에 제출 이벤트가 발생하면 App 클래스의 내부 메서드 \_newWorkout을 호출하는 이벤트 리스너를 등록하였다. 그런데 콜백 함수