서른여덟번째 수업 | JavaScript

김자영 강사님

JavaScript Event

이벤트

이벤트의 종류

1. 마우스 이벤트: 사용자의 마우스와 관련된 동작을 감지한다.
   • click: 요소를 클릭할 때 발생.
   • dbclick: 요소를 더블 클릭할 때 발생.
   • mousedown: 요소 위에서 마우스 버튼을 눌렀을 때 발생.
   • mouseup: 눌렀던 마우스 버튼을 뗐을 때 발생.
   • mousemove: 마우스를 움직일 때 발생.
   • mouseover: 마우스 포인터가 요소 위로 이동할 때 발생.
   • mouseout: 마우스 포인터가 요소를 벗어날 때 발생.
2. 키보드 이벤트: 사용자가 키보드를 입력할 때 발생하는 이벤트.
   • keydown: 키를 누르는 동안 발생.
   • keyup: 눌렀던 키를 뗄 때 발생.
   • keypress(권장하지 않음): 문자 키 입력 시 발생(대체로 keydown 사용 권장).
3. 폼(Form) 이벤트: 입력 양식(Form)과 관련된 이벤트로, 사용자 입력이나 양식 제출 등을 처리한다.
   • submit: 폼이 제출될 때 발생.
   • change: 입력값이 변경되고, 포커스가 벗어났을 때 발생.
   • input: 입력값이 변경될 때마다 발생.
   • focus: 입력 요소에 포커스가 설정될 때 발생.
   • blur: 포커스가 벗어날 때 발생.
   • reset: 폼이 초기화될 때 발생.
4. 윈도우/문서 이벤트: 문서와 윈도우 자체의 상태 변화와 관련된 이벤트.
   • load: 페이지나 리소스가 완전히 로드되었을 때 발생.
   • DOMContentLoaded: DOM이 완전히 로드되었을 때 발생(이미지 등 외부 리소스는 로드되지 않은 상태).
   • resize: 윈도우 크기가 변경될 때 발생.
   • scroll: 사용자가 스크롤을 할 때 발생.
   • unload: 사용자가 페이지를 떠날 때 발생.

이벤트 처리기 종류 및 특징 비교

등록 방식	장점	단점
인라인 이벤트 처리기	간단하고 직관적	HTML과 JS 혼합, 유지보수 어려움
DOM 이벤트 핸들러 속성	HTML과 JS 분리 가능	단일 처리기만 사용 가능
addEventListener	다중 이벤트 처리 가능, 동적 등록 지원	코드가 복잡해질 수 있음

웹스토리지

웹 스토리지 특징

키-값(Key-Value) 저장

• 데이터를 키-값 쌍으로 저장하며, 모든 데이터는 문자열로 저장된다.
• 객체나 배열과 같은 복잡한 데이터는 JSON 형식으로 변환 후 저장해야 한다.

웹 스토리지 유형

1. 로컬 스토리지(Local Storage)
   • 영구 저장: 브라우저를 닫아도 데이터가 삭제되지 않으며, 사용자가 명시적으로 삭제할 때까지 유지된다.
   • 도메인 기반 공유: 같은 도메인 내의 모든 탭에서 데이터에 접근할 수 있다.
2. 세션 스토리지(Session Storage)
   • 세션 동안만 유지: 브라우저 탭이 닫히면 데이터가 삭제된다.
   • 탭 단위로 분리: 같은 도메인이라도 다른 탭에서는 접근할 수 없다.

JSON

JSON(JavaScript Object Notation) 은 데이터를 저장하고 교환하기 위한 텍스트 기반 데이터 형식이다. 가볍고 구조화된 형식을 제공하여 다양한 프로그래밍 언어에서 데이터를 쉽게 다룰 수 있도록 설계되었다.

JSON의 특징

1. 텍스트 형식
   • 데이터가 문자열 형태로 표현된다.
   • 사람이 읽고 쓰기 쉬운 구조를 가진다.
2. 언어 독립적
   • 대부분의 프로그래밍 언어에서 쉽게 파싱하거나 생성할 수 있다.
3. 키-값 쌍
   • 데이터를 키-값 구조로 저장하며, 키는 항상 문자열이고 값은 다양한 데이터 타입을 가질 수 있다.
4. 경량성
   • XML보다 간결하고 빠르게 처리할 수 있어 네트워크 전송에 유리하다.

JSON의 기본 구조

1. 객체 (Object): 중괄호 {}로 묶이며, 키-값 쌍의 집합으로 이뤙진다.
2. 배열(Array): 대괄호 []로 묶이며, 순서가 있는 값의 집합을 나타낸다.
3. 값의 타입: 문자열, 숫자, 불리언, 객체, 배열, null

JSON vs. 자바스크립트 Object

JSON	자바스크립트 Object
"key": "value"(키가 문자열이어야 함)	key: "value"(따옴표 필요 없음)
데이터 교환에 최적화된 문자열 형식	자바스크립트 코드 내에서 사용되는 객체 표현

JSON의 사용

1. JSON 생성 및 변환
   • Object >> JSON 문자열: JSON.stringify()
   • JSON 문자열 >> Object: JSON.parse()
2. JSON 데이터 교환
   • 서버와 클라이언트 간 데이터를 교환할 때 JSON을 사용.
   • RESTful API 및 GraphQL에서 데이터 요청 및 응답의 형식으로 자주 활용.

나혼자실습 과제

• todo 리스트 안보고 혼자 해보기
• 숫자 맞추기
• 좌석 배치도 클릭 이벤트 만들기