[챗지피티와 공부를 해보자] 이벤트 위임(Event Delegation)과 성능 최적화
[챗지피티와 공부를 해보자] 이벤트 위임(Event Delegation)과 성능 최적화 이벤트 위임 (Event Delegation)하위 요소에 개별적으로 이벤트 리스너를 추가하는 대신에 상위 요소에서 하나의 이벤트 리스너를 통해 이벤트를 감지하여 하위요소들의 이벤트를 처리하는 기법이다.자바스크립트의 이벤트 버블링(Event Bubbling)을 이용하여 이벤트가 부모 요소까지 전파하는 특성을 활용했으며, 이벤트가 발생한 하위요소에서 직접 핸들러를 실행하는 것이 아니라 부모요소에서 이벤트를 감지하여 실행하는 방식이다. 예제// 개별 이벤트 리스너document.querySelectorAll('.btn').forEach((button) => { button.addEventListener('click',..
[챗지피티와 공부를 해보자] 프로토타입 체인
[챗지피티와 공부를 해보자] 프로토타입 체인 프로토타입 (Prototype)자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반의 객체 지향 언어이다.여기서 객체 지향 언어라는건 === 객체지향 프로그래밍(OOP, Object-Oriented Programming)으로 데이터(속성)과 행동(메서드)을 하나의 객체(Object)로 묶어 프로그래밍하는 방법이다. 객체속성 (Property) - 객체의 상태를 나타냄 (ex: 이름, 나이, 색상등..)메서드 (Method) - 객체가 수행할 수 있는 동작 (ex: 걷다, 뛰다, 날다등..) 모든 객체는 자신의 부모 역할을 하는 객체인 프로토타입(Prototype)을 참조한다.모든 객체는 프로토타입 링크 [[Prototype]] (또는 __proto__..
웹 컴포넌트 스타일링 관리 (CSS-in-HTML, CSS-in-CSS, CSS-in-JS) 웹 개발에서 CSS를 적용하는 방식은 프로젝트의 구조와 요구 사항에 따라 다양하게 선택할 수 있으며, 주요 스타일링 접근 방식으로는 CSS-in-HTML, CSS-in-CSS, CSS-in-JS가 있다. CSS-in-HTML인라인 스타일링을 말하며, HTML 요소에 style 속성을 사용해서 해당 요소에 직접 스타일을 적용하는 방식이다.소규모의 간단한 스타일을 적용할때 사용할 수 있으며, 해당 요소에만 영향을 준다.별도의 css 파일이 필요없다. 하지만 html 태그와 style 코드가 혼재되어 유지보수가 어려우며 재사용이 안되기 때문에 동일 스타일을 여러 요소에 적용하기 위해 중복코드가 발생할 수 있다. ..
[챗지피티와 공부를 해보자] 프로미스 체이닝 (Promise Chaining)
[챗지피티와 공부를 해보자] 프로미스 체이닝 (Promise Chaining) 프로미스(Promise)는 비동기 작업이 끝났을때 결과를 반환해주는 객체이다.보통 비동기 코드(예: API 호출, 파일 읽기, 데이터베이스 작업 등) 처리 시에 사용한다. 프로미스는 3가지의 상태를 가질수 있다.pending (대기): 아직 실행 중, 결과를 모르는 상태fulfilled (성공): 작업이 완료되어 resolve() 호출 rejected (실패): 작업이 실패하여 reject() 호출const promise = new Promise((resolve, reject) => { // 비동기 작업 실행 중... setTimeout(() => { const success = tru..