자바스크립트 이벤트, jQuery
florent의 개발 적응기
이 글의 주요 내용
객체(Object)
생성자 함수(Constructor Function)
프로토타입(Prototype)
콜백 함수(Callback Function)
이벤트 리스너(Event Listener)
제이쿼리(jQuery)
[자바스크립트 객체(JavaScript Obejct)]
[자바스크립트 객체란?]
JavaScript 객체는 관련된 데이터와 함수(메서드라고도 함)의 집합
객체는 키(key)와 값(value)의 쌍으로 구성되며, 이를 속성(properties)이라고 함
[자바스크립트 객체의 특징]
객체는 중괄호 {}로 정의하며, 속성은 콜론(:)으로 구분된 키와 값의 쌍으로 표현, 여러 속성은 쉼표(,)로 구분
객체의 속성에 접근하는 방법은 두 가지 - 점 표기법과 대괄호 표기법
점 표기법(dot notation): object.property
대괄호 표기법(bracket notation): object["property"]
객체의 메서드(method)는 객체에 속한 함수를 의미
[객체(Object)와 인스턴스(Instance) (인스턴스 ⊂ 객체)]
[생성자 함수(Constructor Function)]
[생성자 함수란?]
생성자 함수는 객체 지향 프로그래밍에서 새로운 객체 인스턴스를 생성하고 초기화하는 특별한 유형의 함수
[생성자 함수의 특징]
생성자 함수의 이름은 대문자로 시작하는 것이 관례 (예: BellBoy, Person).
함수 내부에서 this 키워드를 사용하여 새로 생성될 객체의 속성과 메서드를 정의
new 키워드와 함께 호출하여 새로운 객체 인스턴스를 생성 → 생성자 함수 호출시 new로 새 객체를 초기화를 반드시 해야함
인스턴스가 생성될 때 생성자 함수의 매개변수를 통해 객체의 초기 상태를 설정
프로토타입(prototype)을 통해 모든 인스턴스가 공유하는 메서드를 정의할 수 있음
생성자 함수를 사용하면 동일한 구조를 가진 여러 객체를 쉽게 생성 가능
[생성자 함수에 내에 메서드 포함하기]
생성자 함수 객체 내에 메서드를 포함시키면, 각 객체 인스턴스가 자신만의 메서드 복사본을 갖게 됨
생성자 함수 내 메서드를 정의하는 방법: methodName: function() { 메서드 함수 } → 동일한 구조가 생성자 함수에도 적용
객체 내 정의된 속성과 메서드를 활용할 경우, 속성을 활용시 object.property는 그 자체로 값을 지니기 때문에 인자(argument)의 대상으로 쓰일수 있는 반면, object.method는 함수와 같은 동작을 하기 때문에 object.method(파라미터)의 형식으로 사용해야 함
객체 내 정의된 메서드는 생성자 함수의 인자에 들어가지 않음을 주의
[인스턴스 메서드 vs 프로토타입 메서드]
인스턴스 메서드란, 생성자 함수 내에서 정의된 메서드로, 이 메서드는 인스턴스가 생성될 때마다 복사됨
프로토타입 메서드란, 생성자 함수를 정의한 후 생성자 함수를 대상으로 정의한 메서드로, 생성자 함수의 모든 인스턴스가 공유하는 메서드 ⇒ 이 메서드는 프로토타입 객체에 정의되며, 인스턴스는 이 메서드를 프로토타입 체인을 통해 호출
[프로토타입(prototype)이란]
[프로토타입이란?]
자바스크립트는 프로토타입 기반 언어로, 모든 객체는 자신의 프로토타입 객체를 가리키는 숨겨진 링크(즉, [[Prototype]] 또는 __proto__)를 가지고 있음
자바스크립트의 모든 객체는 프로토타입 객체를 가지며, 이 프로토타입 객체는 객체의 부모 역할을 함 ⇒ 객체들이 서로 정보를 공유하는 방식, 마치 가족 구성원들이 서로 특징을 공유하는 것과 비슷
[프로토타입의 특징]
메서드 공유: 프로토타입을 통해 메서드를 정의하면, 해당 생성자 함수로 생성된 모든 인스턴스가 메서드를 공유 → 메모리 사용을 줄이고 성능을 향상
상속 구현: 프로토타입 체인을 통해 객체는 부모 객체의 속성과 메서드를 상속 → 이를 통해 객체 간의 코드 재사용성을 높임
[고차 함수(Higher Order Functions)]
[고차 함수란?]
고차 함수는 하나 이상의 함수를 인자(argument)로 받는 함수거나, 함수를 결과로 반환하는 함수를 의미함
코드의 재사용성과 추상화 수준을 높이는 데 사용됨 → 자바스크립트에서 함수는 일급 객체(First-class Citizens)이기 때문에 고차 함수의 구현이 가능
[고차 함수의 특징]
코드의 재사용성 증가
추상화 수준 향상
더 유연하고 모듈화된 코드 작성 가능
함수의 합성(composition)을 통한 복잡한 동작 구현
[자주 사용되는 고차 함수 예시]
[콜백 함수 (Callback function)]
콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 실행이 끝난 후에 실행되는 함수를 의미
[이벤트 리스너 (addEventListener)]
addEventListener는 DOM 요소에 이벤트 리스너(event listener)를 등록하는 메서드 → 이벤트가 발생하면 지정된 함수가 실행
[이벤트 리스너 등록 방법]
addEventListener("Event", function): 이벤트 이름과 이벤트 발생 시 호출될 함수를 지정
이벤트 리스너는 정의된 함수를 콜백하는 방식과 익명의 함수를 정의하는 방식으로 정의될 수 있음
함수를 콜백할 경우, 이벤트 리스너 안에서 ‘()’를 사용하면, 콜백을 하려던 함수가 즉시 호출되어 반환값을 형성하고, 그 반환 값을 이벤트 리스너에 전달하기 때문에 제대로 작동하지 않을 수 있음
this 키워드: this는 이벤트를 트리거한 DOM 요소를 가리키는 키워드
[이벤트 리스너의 작동 원리]
(1) 이벤트 등록: 특정 요소에 이벤트 리스너를 추가
(2) 이벤트 발생: 사용자 동작 등으로 인해 이벤트가 트리거됨
(3) 이벤트 객체 생성: 브라우저는 이벤트에 대한 정보를 담은 이벤트 객체(Event Object)를 생성
(4) 콜백 함수 실행: 등록된 이벤트 타입과 발생한 이벤트가 일치하면, 연결된 콜백 함수가 실행
(5) 이벤트 객체 전달: 콜백 함수는 이벤트 객체를 매개변수로 받아 사용할 수 있음
[사용자 정의 이벤트 리스너 함수]
이벤트 리스너 addEventListener뿐만 아니라, 사용자가 커스텀으로 정의하여 정의할 수도 있음
사용자 정의 이벤트 리스너 함수의 인자에는 (1) 대상이 될 요소, (2) 감지할 이벤트의 유형, (3) 이벤트 발생시 콜백 함수로 구성
[이벤트 버블링(bubbling)]
이벤트 버블링(Event Bubbling)은 웹 브라우저에서 이벤트가 발생할 때, 그 이벤트가 해당 요소에서 시작하여 상위 요소들로 전파되는 현상을 말함
[이벤트 객체]
이벤트 리스너 내의 함수는 이벤트 객체를 대상으로 삼을 수 있으며, 이벤트 리스너 내 함수의 형태(ex. 이벤트 리스너 외부에서 정의된 함수를 콜백하는지, 이벤트 리스너 내에서 정의되는지)에 따라 이벤트 객체를 파라미터로 삼는 방법이 달라짐
이벤트 리스너 외부에서 정의된 함수를 콜백하는 경우
이벤트 리스너 내에서 익명 함수가 정의되는 경우
이벤트 객체는 자바스크립트 객체(JS object) 형태이기에 속성을 활용할 수 있으며, 이벤트 객체에 대한 메서드를 활용할 수도 있음
[이벤트 객체의 속성(Property)과 메서드(Method)]
[자주 쓰이는 이벤트 객체 속성]
target: event.target은 이벤트가 처음 발생한 요소를 가리킴
currentTarget: 현재 이벤트 핸들러가 연결된 요소를 가리킴 ⇒ 컨테이너 요소에 이벤트 리스너를 정의하고 컨테이너 내 하위 요소가 이벤트를 트리거할 경우, target은 하위 요소를 반환하지만 currentTarget은 컨테이너를 반환
[자주 쓰이는 이벤트 객체 메서드]
preventDefault(): 이벤트의 기본 동작을 취소함
stopPropagation(): 이벤트의 버블링을 중단시킴
[이벤트 리스너로 애니메이션 추가하기]
[이벤트 리스너로 애니메이션 추가하기 위한 기본 과정]
(1) CSS 클래스 정의: 애니메이션 효과를 위한 스타일을 CSS 클래스로 정의
(2) 이벤트 리스너 설정: 특정 이벤트(예: 클릭, 키 입력)를 감지하는 이벤트 리스너를 추가
(3) 애니메이션 적용: 이벤트 발생 시 해당 요소에 애니메이션 클래스를 추가
(4) 애니메이션 제거: setTimeout 함수를 사용하여 일정 시간 후 애니메이션 클래스를 제거
setTimeout( callback, delay ); delay는 지연 시간으로, 밀리초 단위 (1000밀리초는 1초를 의미)
[jQuery]
[제이쿼리(jQuery)란?]
jQuery는 JavaScript 라이브러리로, HTML 문서 탐색과 조작, 이벤트 처리, 애니메이션 및 Ajax를 훨씬 간단하게 만들어줌 ⇒ "Write less, do more"라는 모토로 유명
[jQuery의 주요 특징]
크로스 브라우저 호환성
DOM 요소 선택 및 조작 간소화
이벤트 처리 단순화
AJAX 호출 간소화
애니메이션 및 효과를 쉽게 구현
[jQuery 사용법]
CDN
jQuery 공식 웹사이트에서 다운로드 하여 스크립트로 src 지정
[jQuery 선택자]
[jQuery 이벤트 처리]
[jQuery DOM 조작]
[jQuery 애니메이션]
[jQuery 메서드 체이닝]
여러 메서드를 활용하여 jQuery 메서드 체이닝이 가능
메서드를 체이닝할 때, 다음 메서드에 할당될 값이 제대로 있는지 확인하는 것이 중요
