반응형 Javascript/배경 & 실무 지식20 [JavaScript] 이벤트 버블링(Event Bubbling)과 이벤트캡쳐(Event Capturing) 자바스크립트에서 이벤트 버블링(Event Bubbling)과 이벤트 캡처(Event Capturing)은 이벤트가 여러 개의 요소에 영향을 미치는 방식을 설명하는 용어입니다. 1. 이벤트 버블링(Event Bubbling) 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 해당 요소가 포함된 부모 요소로 이벤트가 전파되는 현상 즉, 이벤트가 가장 깊은 자식 요소에서 시작하여 부모 요소를 거슬러 올라가면서 처리되는 것을 의미합니다. 이벤트 버블링은 DOM 트리 구조를 따라 이벤트가 전파되기 때문에, 최상위 부모 요소까지 이벤트가 전달될 수 있습니다. 이러한 특성을 활용하면 이벤트 위임(Event Delegation)이라는 패턴을 사용하여 여러 요소에 대한 이벤트 핸들링을 효율적으로 처리할 수 있습니다... 2024. 2. 7. [JavaScript] 프로토타입(Prototype), 상속(Inheritance) 1. 프로토타입(Prototype) 프로토타입(Prototype)은 객체 지향 프로그래밍에서 상속과 관련된 개념입니다. 프로토타입은 객체 간의 상속을 구현하고, 객체가 다른 객체의 속성과 메서드를 공유할 수 있도록 도와줍니다. 모든 객체는 프로토타입을 가지고 있으며, 객체의 프로토타입은 해당 객체를 생성한 생성자 함수의 프로토타입 객체를 가리킵니다. 프로토타입 객체에는 해당 생성자 함수로부터 생성된 모든 객체에서 공유할 수 있는 속성과 메서드가 포함됩니다. 2. 상속(Inheritance) 상속은 한 객체가 다른 객체의 속성과 메서드를 상속받아 사용하는 것을 말합니다. 자바스크립트에서는 프로토타입 체인(Prototype Chain)을 통해 상속을 구현합니다. 객체에서 속성 또는 메서드에 접근할 때, 해당.. 2024. 2. 6. [JavaScript] 데이터타입, 클로저(Closure) 1. 데이터타입 자바스크립트의 데이터 타입은 크게 두 가지로 나뉩니다. 1. 기본 데이터 타입(Primitive Data Types) 숫자(Number): 정수와 실수를 포함한 모든 숫자 값을 나타냅니다. 문자열(String): 문자들의 시퀀스로 이루어진 데이터를 나타냅니다. 불리언(Boolean): true(참) 또는 false(거짓) 값을 나타냅니다. undefined: 값이 할당되지 않은 변수를 나타냅니다. null: 값이 없음을 나타냅니다. 심볼(Symbol): 유일하고 변경 불가능한 기본 데이터 타입입니다. 2. 객체(Object) 객체는 키(key)와 값(value)의 쌍으로 이루어진 속성(property)의 집합입니다. 배열(Array), 함수(Function), 정규 표현식(RegExp) .. 2024. 2. 6. [JavaScript] 화살표 함수 (Arrow Function) 1. 화살표 함수(Arrow Function) 란? 자바스크립트의 화살표 함수(arrow function)는 ES6에서 도입된 함수 표현식의 간단한 형태입니다. 화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 함수를 선언합니다. 이를 통해 함수를 더 간결하게 작성할 수 있습니다. 화살표 함수의 구문 예시 1. 기본구문 const 함수명 = (매개변수) => { // 함수의 내용 }; 2. 매개변수가 하나인 경우 const square = x => x * x; console.log(square(5)); // 출력: 25 3. 매개변수가 여러개인 경우 const sum = (a, b) => a + b; console.log(sum(3, 4)); // 출력: 7 4. 함수내용이 한줄인 경우.. 2024. 2. 2. [JavaScript] Reduce() 란? Reduce() 란? - 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const result = 0; const sum = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, result, ); console.log(result); // Expected output: 10 - 리듀서 함수는 네개의 인자를 가진다. 1. 누산기 (acc) 2. 현재 값 (cur) 3. 현재 인덱스 (idx) 4. 원본 배열 (src) 리듀서 함수의 반환 값은 누산기에 할당되고 누산기는 순회 중 유지되므로 최종 결과는 .. 2024. 2. 2. [Javascript] Date Methods (간단한 시계 구현) new Date 객체를 사용하면 날짜와 시간을 가져올수있습니다. 이를 활용하여 간단하게 시계를 구현해보겠습니다. 날짜와 시간은 아래와 같은 범위로 이용됩니다. 1. 연도(year) : 1900년(00) ~ 1999년(99) 2. 월(month) : 1월(0) ~ 12월(11) 3. 일(day) : 1일(1) ~ 31일(31) 4. 시(hours) : 0시(0) ~ 23시(23) 5. 분(minutes) : 0분(0) ~ 59분(59) 6. 초(seconds) : 0초(0) ~ 59초(59) Date Get Methods 종류 Date Set Methods 종류 아래는 간단하게 Date Get Methods를 활용하여 시계를 구현했습니다. padStart()는 변수값 앞쪽에 지정하는 문자를 넣어주는 메소드.. 2024. 1. 25. 이전 1 2 3 4 다음 반응형
