20250331 - 프론트엔드6

1. 전체리뷰

주말동안 실습코드를 모두 돌려보는게 목표였는데 쉽지 않다.
조금 밀렸지만 하나하나 다 해보는게 목표
실습 코드 중에서도 기능들을 추가해보고 싶은 코드들이 있어 따로 메모해 두었다. 새로 정리해야겠다.
이번주는 안밀리고 적기를..

DOM(Document Object Model)

DOM

• 웹 브라우저가 HTML 인식하는 방식
• document 객체와 관련된 객체의 집합
• 종류
  • Element Node ex) <img>, <input>
  • Text Node (Text Content)
• 문서 객체 기능
  • 객체 선택 document.head/body/title 또는 document.querySelector(’element’)
  • 객체 생성 document.createElement(’Tag’)
  • 객체 제거 target.remove( )

Event

• 사용자의 특정 행위에 이벤트를 발생
  • addEventListerner(’event’, callback())
  • removeEventListerner(’event’, callback())
• 이벤트 종류
  • 마우스 이벤트
  • 키보드 이벤트
  • 폼 이벤트
  • 윈도우 이벤트
• 기본 이벤트 막기
  • preventDefault()
  • stopPropagation()

Web API

• Cookie
  • 자바스크립트에 의해 PC(브라우저)에 저장되는 파일
  • 문자열만 저장 가능
  • 만료일자를 지정하여 해당 일자에 삭제
• Local Storage
  • 자바스크립트에 의해 PC(브라우저)에 저장되는 파일
  • 객체 저장 가능
  • 자동으로 삭제되지 않음
• Session Storage
  • 브라우저 접속부터 종료까지 저장되는 파일
  • 객체 저장 가능
  • 브라우저 종료/ 탭 종료 시 삭제