Javascript

1. 이벤트 관련 흐름

• 캡쳐링 단계: 이벤트가 하위 요소로 전파되는 단계
• 타깃 단계: 이벤트가 실제 카깃 요소에 전달되는 단계, 이벤트 객체의 target 속성이 되는 요소에 등록되어있던 이벤트 핸들러가 동작하는 단계, 가장 처음 이벤트 핸들러가 동작하게 되는 순간
• 버블링 단계: 이벤트가 상위 요소로 전파되는 단계

참고 사이트: https://www.w3.org/TR/DOM-Level-3-Events/

UI Events

---

2. 이벤트 핸들러 등록 및 삭제

• (등록) HTML의 속성이나 DOM 속성을 활용해 이벤트를 등록하는 방법 외 Element.addEventListner('type', 'handler')
• (삭제) Element.removeEventListener('type', 'handler')

 

---

3. 이벤트 위임(Event Delegation)

이벤트 버블링 개념을 활용하면 훨씬 효과적인 이벤트 관리 가능, 자식 요소의 이벤트를 부모 요소에 위임하는 것

 

---

4. 브라우저의 기본 동작 중지

-> .preventDefault( )

 

---

5. client, page, offset, screen

• clientX, clientY
  • 클라이언트 영역(이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역) 내에서 마우스의 좌표 정보
  • clientX: 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치
  • clientY: 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치
  • client 값은 그 순간 보여지는 화면을 기준으로 계산하므로 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를(0, 0)으로 계산
• offsetX, offsetY
  • 이벤트가 발생한 target이 기준
  • offsetX: 이벤트가 발생한 target 내에서 마우스의 X좌표 위치
  • offsetY: 이벤트가 발생한 target 내에서 마우스의 Y좌표 위치
  • 이벤트가 발생한 대상을 기준으로 계산하므로 위치와는 무관하게 항상 대상의 좌측 상단 모서리 위치를(0, 0)으로 계산
• pageX, pageY
  • 전체 문서를 기준
  • 스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정
  • pageX: 전체 문서 내에서 마우스의 X좌표 위치
  • pageY: 전체 문서 내에서 마우스의 Y좌표 위치
• screenX, screenY
  • 모니터 화면 영역에서의 위치

---

6. 마우스 이벤트 버튼

• 0: 마우스 왼쪽 버튼
• 1: 마우스 휠
• 2: 마우스 오른쪽 버튼
• 3: X1 (브라우저 뒤로 가기 버튼)
• 4: X2 (브라우저 앞으로 가기 버튼)

---

7. KeyboardEvent.key vs KeyboardEvent.code

• key는 사용자가 누른 키가 가지고 있는 값
• code는 누른 키의 물리적인 우치

---

 

8. Javascript vs ECMAScript

Javascript	ECMAScript
프로그래밍 언어	프로그래밍 언어의 표준
ECMAscript + 부가 기능(ex) WebIDL 등)

---

9. Symbol

• 기본형 데이터 타입(primitive data type)
• 코드 내 유일한 값을 가진 변수 이름을 만들 때 사용

const tony = Symbol("I'm ironman")
const stark = Symbol("I'm ironman")

tony === "I'm ironman" // false
tony === true          // false
tony === false         // false
tony === 1             // false
tony === stark         // false

---

10. BigInt

• 아주 큰 정수를 표현(9000조 이상의 정수)
• 일반 정수 마지막에 알파벳 n을 붙이거나 BinInt라는 함수를 사용

※ typeof 함수 -> 출력값 함수 O,  object X

---

11. 연산자 우선순위

• falsy 값: false, null, undefined, NaN, 0
• truthy 값: falsy 값 외 전부
• 자바스크립트에서 AND & OR 연산자는 무조건 불린값을 리턴하는 것이 아님
• 왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식
• AND 연산자는 왼쪽 피연산자가 falsy 값일때 왼쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 리턴
• OR 연산자는 왼쪽 피연산자가 falsy 값일때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 왼쪽 피연산자를 리턴
• and 연산자 > or 연산자

참고 사이트: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

연산자 우선순위 - JavaScript | MDN

---

12. null 병합 연산자 -> '??'

• 연산자 왼편의 값이 null 이나 undefined라면 연산자 오른편의 값이 리턴, 연산자의 왼편의 값이 null 이나 undefined가 아니라면 연산자 왼편의 값이 리턴

const a = null ?? "I'"
const b = undefined ?? 'm'
const c = 'Thor' ?? 'IronMan'

console.log(a, b, c) // I'm IronMan

const d = null || 'marvel'
const e = null || 'DC'

console.log(d)  // marvel
console.log(e)  // DC

const f = 0 || 50
const g = 0 ?? 50

console.log(f)  // 50
console.log(g)  // 0

---