Real Front-End Series [Web(Front) - JavaScript 2]

이벤트 처리 기본

DOM 처리를 위한 간단한 event

event와 event listener

• event : html 페이지에서 발생하는 사용자의 행동이나 시스템에 발생한 사건
  • click, mouseover, load, store, ...
• event source : event가 발생한 element 또는 객체
• event handler : event가 발생했을 때 실행될 코드 (callback function)
• event listener : event source에서 event를 감지하고 처리하기 위한 매커니즘
  • event type과 event handler로 구성

event listener 등록 방식

• inline 스타일 : callback을 등록하지 않고 html 태그의 속성으로 handler를 직접 실행하는 형태
  • html과 javascript가 섞임 - 관심사 분리가 되지 않아 유지보수가 어렵고 재사용성이 떨어짐
  • Handler 내부에는 'event'라는 내장 변수가 생성되며 'this'는 window 객체로 고정됨
• 이벤트 속성 활용 : DOM 요소의 onXXX 속성에 함수 할당
  • 하나의 이벤트에 하나의 handler만 연결 가능
• addEventListener 메서드 활용
  • 가장 권장되는 방식으로 하나의 이벤트에 여러 handler를 연결할 수 있으며 capturing, bubbling 처리 가능
  • handler 내부에서의 this는
    • 일반 함수에서는 event source로 고정
    • arrow 함수에서는 외부의 this 활용

event source 가져오는 방법 비교

방법	비교
this	• 가장 간단 • inline 방식은 사용 불가 • arrow function에서는 사용 불가
event.currentTarget	• 이벤트 리스너가 등록된 요소 • 이벤트 전파(bubbling) 과정에서도 변하지 않음 • 일반적으로 this == event.currentTarget • await 호출 시 이벤트 객체 재사용을 위해 초기화될 수 있음 → 미리 변수에 할당 후 사용
event.target	• 실제 이벤트가 발생한 요소 • 이벤트 전파(bubbling) 과정에서 달라질 수 있음 → event.currentTarget 사용

this

this

• 현재 실행 문맥(context) - 현재 함수를 호출한 객체
  • 자바와 달리 함수가 선언될 때가 아니라 함수가 호출될 때 동적으로 결정
• 다양한 this binding
  • 기본 바인딩
    • 일반적인 방식으로 그 함수를 호출한 객체
    • non-strict에서 호출 객체 생략 시 window
  • 묵시적 바인딩
    • 객체의 메서드를 호출할 때 해당 메서드를 호출한 객체
  • 명시적 바인딩
    • call, apply 등으로 this 고정
  • new 바인딩
    • 생성자 함수를 new와 함께 썼을 때 생성된 객체

arrow 함수와 this

• arrow 함수는 자신만의 this를 가지지 않음
  • 자신이 선언된 상위 scope의 this를 그대로 물려받음 (lexical this)
• call, apply, bind로 this 변경 불가
• Callback 내부에서 외부의 this를 유지하고 싶을 경우 유용

DOM과 Node 관리

DOM

DOM (Document Object Model) Interface

• 문서를 구성하고 있는 요소들에 대한 function과 property를 갖는 문서 객체
  • 문서를 구성하고 있는 모든 것을 Node로 표현
  • DOM을 사용하는 목적 : 문서 객체의 선택 -> 제어, 구조변경 및 CSS 적용 등

Node의 기본 속성

속성	설명
nodeType	노드의 유형을 나타내는 숫자값 (1: 요소노드, 2: Attribute Node, 3: Text Node 등)
nodeName	노드의 이름 (요소노드의 경우 태그명, 텍스트노드의 경우 #text)
nodeValue	노드의 값 (텍스트노드의 경우 해당 텍스트 내용)
parentNode	현재 노드의 부모 노드 참조
childNodes	현재 노드의 자식 노드들을 포함하는 NodeList 객체
firstChild	현재 노드의 첫 번째 자식 노드 참조
lastChild	현재 노드의 마지막 자식 노드 참조
previousSibling	현재 노드의 이전 형제 노드 참조
nextSibling	현재 노드의 다음 형제 노드 참조
hasChildNodes()	자식 노드의 존재 여부를 반환하는 메서드

Element의 조회

• 조회된 element와의 관계를 이용한 탐색

함수/속성	설명	예시
closest(selector)	주어진 CSS 선택자와 일치하는 가장 가까운 조상 요소 검색	element.closest('.container')
previousElementSibling	이전 형제 요소 노드 참조	element.previousElementSibling
nextElementSibling	다음 형제 요소 노드 참조	element.nextElementSibling
parentElement	부모 요소 노드 참조	element.parentElement
children	자식 요소 노드들의 컬렉션	element.children
firstElementChild	첫 번째 자식 요소 노드 참조	element.firstElementChild
lastElementChild	마지막 자식 요소 노드 참조	element.lastElementChild
previousSibling	현재 노드의 이전 형제 노드 참조 (노드 종류 무관)	element.previousSibling

• document를 통한 조회

함수/속성	설명	예시
getElementById(id)	지정된 ID를 가진 요소 반환	document.getElementById('myId')
getElementsByClassName(class)	지정된 클래스를 가진 요소들의 목록 반환	document.getElementsByClassName('myClass')
getElementsByTagName(tag)	지정된 태그를 가진 요소들의 목록 반환	document.getElementsByTagName('div')
getElementsByName(name)	지정된 name을 가진 요소들의 목록 반환	document.getElementsByName('form')
querySelector(selector)	CSS 선택자와 일치하는 첫 번째 요소 반환	document.querySelector('#myId')
querySelectorAll(selector)	CSS 선택자와 일치하는 요소들의 목록 반환	document.querySelectorAll('.myClass')

Node의 생성

함수/속성	설명	예시
createElement(tagName)	새로운 HTML 요소 생성	document.createElement('div')
createAttribute(attr)	새로운 Attribute 생성	document.createAttribute('style')
createTextNode(text)	새로운 TextNode 생성	document.createTextNode(str)
cloneNode(deep)	노드의 복사본 생성 (deep: 깊은 복사 여부)	element.cloneNode(true)

• 삽입 위치 결정

함수/속성	설명	예시
replaceChild()	하나의 자식 노드를 다른 노드로 교체	parentElement.replaceChild(newChild, oldChild)
prepend()	노드나 텍스트를 첫 번째 자식으로 추가	parentElement.prepend(node1, 'text')
append()	노드나 텍스트를 마지막 자식으로 추가	parentElement.append(node1, node2, 'text')
before()	지정된 요소의 바로 앞에 새로운 요소를 삽입	element.before(newNode)
after()	지정된 요소의 바로 뒤에 새로운 요소를 삽입	element.after(newNode)

• 문자열 활용

함수/속성	설명	예시
innerHTML	요소 내부의 콘텐츠를 가져오거나 설정 (HTML 파싱함)	element.innerHTML = '<p>새로운 내용</p>'
innerText	요소 내부의 콘텐츠를 가져오거나 설정 (HTML 파싱하지 않음, 텍스트로 처리)	element.innerText = '<p>새로운 내용</p>'

Node의 삭제

함수/속성	설명	예시
removeChild()	부모 노드에서 자식 노드를 제거하고 제거된 노드를 반환	parentNode.removeChild(childNode)
remove()	요소를 DOM 트리에서 제거	element.remove()

Node의 속성 관리

Node의 속성 관리

• DOM Tree에 등록된 Node의 속성들을 관리

함수/속성	설명	예시
setAttribute()	요소의 속성 값 설정	element.setAttribute('class', 'newClass')
getAttribute()	요소의 속성 값 조회	element.getAttribute('class')
removeAttribute()	요소의 속성 제거	element.removeAttribute('class')

• attribute (속성) vs property

구분	Attribute	Property
정의	Node의 초기 상태	현재 DOM의 상태
값 타입	문자열만 가능	모든 JavaScript 타입 가능
값 변경	property까지 변경됨	value, checked 등 폼 관련 속성은 대부분 동기화되지 않음 ID, class 등은 동기화됨
접근 방법	getAttribute(), setAttribute()	직접 속성 접근 (element.property)
사용 사례	초기값이나 markup 관련 작업은 attribute 사용 권장	실시간 상태 관리는 property 사용

Attribute와 Property

data-*

• html의 태그와 속성은 기본적으로 모두 w3c.org에서 정해짐
  • attribute는 사용자 정의로 추가 가능하지만 남발되면 관리가 어려워짐.
• data-* 이용해 사용자 정의 attribute를 일관된 방식으로 관리
• property로 가져올 때는 dataset 사용
  • 객체 형태로 여러 개의 data-* property 관리

style 속성 관리

• attribute, property에서 조회되는 style은 inline style만 조회 가능
  • <style>이나 link를 통해 설정되는 style은 computed value로 window.getComputedStyle()을 통해 readonly로 확인 가능

style과 class 관리

• style과 class 관리

  • style은 상황에 따라 동적으로 달라지며 미리 정의된 class로 묶어서 관리

• classList를 이용한 class 관리

메서드	설명	예시
classList.add()	클래스를 추가	element.classList.add('active')
classList.remove()	클래스를 제거	element.classList.remove('active')
classList.toggle()	클래스가 있으면 제거하고 없으면 추가	element.classList.toggle('active')
classList.contains()	클래스 존재 여부 확인	element.classList.contains('active')
classList.replace()	기존 클래스를 새로운 클래스로 교체	element.classList.replace('old', 'new')
className	클래스 전체를 문자열로 가져오거나 설정	element.className = 'btn active'

Storage

Storage

Storage

• 브라우저에서 페이지를 '새로 고침'하거나 '다른 페이지로 이동'하면 JavaScript의 모든 변수, 데이터는 초기화
  • '클라이언트'에서 여러 페이지에 걸쳐서 데이터를 유지해야 하는 경우 storage 사용
• storage 특징
  • key, value 쌍으로 데이터 관리
  • key, value는 모두 문자열
  • storage는 same origin 별로 구분되어 저장

Storage의 종류

• storage는 window 객체의 속성으로 localStorage와 sessionStorage로 구분됨

구분	localStorage	sessionStorage
데이터 지속성	브라우저를 닫아도 유지	브라우저/탭을 닫으면 삭제
유효 범위	동일 출처(origin)의 모든 탭/창	탭/창 별 독립적
만료 시점	직접 삭제하기 전까지 영구 보관	세션 종료(브라우저 닫기) 시 자동 삭제
사용 사례	사용자 설정/테마/토큰 정보	임시 폼 데이터/단일 페이지 앱 상태
데이터 접근	JavaScript로만 접근 가능	JavaScript로만 접근 가능
저장 용량	일반적으로 5~10MB	일반적으로 5~10MB
API 메서드	setItem / getItem / removeItem / clear	setItem / getItem / removeItem / clear
이벤트 지원	storage 이벤트 지원	storage 이벤트 지원

Storage API

메서드/속성	구분	설명
setItem	storage.setItem(key, value)	키와 값을 이용한 데이터 저장 메서드
getItem	storage.getItem(key)	저장된 키의 데이터 반환 메서드
removeItem	storage.removeItem(key)	특정 키의 데이터 삭제 메서드
clear	storage.clear()	모든 데이터 삭제 메서드
length	storage.length	저장된 데이터 개수 속성
storage 이벤트	window.addEventListener('storage')	스토리지 변경 감지 이벤트
대괄호 접근	storage['key'] 또는 storage.key	키를 통한 직접 접근 방식

객체 저장

객체 저장

• storage는 value로 문자열만 사용 -> 묵시적 형 변환 후 저장
• 특별히 toString()을 재정의하지 않은 객체의 문자열 형태는 [object Object]

객체 직렬화 / 역직렬화

함수/속성	설명	예시
JSON.stringify()	JavaScript 객체를 JSON 문자열로 변환	JSON.stringify({ name: 'Kim' })
JSON.parse()	JSON 문자열을 JavaScript 객체로 변환	JSON.parse('{"name": "Kim"}')