프론트엔드 (Event,JSON/WebStorage)

1_kyun·2023년 3월 14일
DOMWeb Storagejson프론트엔드
9

프론트엔드

목록 보기
4/6
post-thumbnail

HTML과 DOM

DOM

  • DOM(Document Object Model)은 HTML과 XML문서의 구조를 정의하는 API를 제공

  • DOM은 문서 요소 집합을 트리 형태의 계층 구조로 HTML을 표현

  • HTML 계층 구조의 제일 위에는 document노드가 있다

  • 그 아래로 HTML 태그나 요소를 표현하는 노드와 문자열을 표현하는 노드가 있다


문서 객체 만들기

  • 문서 객체는 text node를 갖는 객체와 갖지 않는 객체로 나뉨

"Hello world" -> h2 -> body로 이어진다

  • 객체의 속성 설정


이미지 객체를 출력


  • innerHTML & innerText

  • 객체 가져오기
  1. getElementById(id)

  1. getElementsByClassName(classname)

  1. getElementsByTagName(tagname)

  1. querySelector(selector)

  1. querySelectorAll(selector)
  • 2,3번과 동일한 결과

  1. 객체 제거


요약

  • DOM은 HTML 문서의 내용을 조작할 수 있는 API로 HTML을 계층구조 형식의 객체로 표현

  • DOM으로 HTML 문서의 검색과 조작(추가, 수정, 삭제)을 할 수 있다



이벤트 (Event)

  • 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생

  • 사용자가 마우스를 클릭하였을 때, 키보드를 눌렀을 때 등과 같이 다양한 종류의 이벤트가 존대

  • JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행

  • 이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행 >> 이벤트 핸들러 또는 이벤트 리스너라 하며 이 함수에 이벤트 발생시 실행해야하는 코드


이벤트 간단 예제

  • Click 이벤트는 사용자가 마우스를 클릭 했을 때 발생

  • 특정 DOM 요소에 한하여 click 이벤트를 제어할 수 있다

  • "Click Me"라는 문자열을 담고 있는<div>요소 영역을 클릭할 경우에만 "Hello" 알림 창이 표시


이벤트 종류 - 마우스 이벤트

  • 마우스 이벤트는 웹 어플리케이션에서 가장 많이 사용하는 이벤트

  • 마우스 이벤트 핸들어에 전달되는 이벤트 객체에는 마우스 위치와 버튼 상태 등의 정보를 담고 있다


이벤트 종류 - 키보드 이벤트

  • 키보드의 커서가 웹 브라우저에 나타나는 지점에서 키보드를 조작할 때 이벤트 발생

  • 키보드 조작은 운영체제에 영향을 받으므로 특정 키가 이벤트 핸들러에게 전달되지 않을 수 있다

  • 키보드 커서가 나타내는 요소가 없다면 document에서 이벤트 발생


이벤트 종류 - Frame(UI) 이벤트

  • Frame 관련 이벤트는 특정 DOM 문서에 관련된 이벤트가 아니라 Frame 자체에 대한 이벤트

  • Frame 이벤트 중에서는 load 이벤트가 가장 많이 사용

  • Load는 문서 및 자원들이 모두 웹 브라우저에 탑재되면 이벤트를 수행

  • unload는 사용자가 브라우저를 떠날 때 이벤트가 발생하지만, 사용자가 브라우저를 떠나는 것을 막을 수는 없다


이벤트 종류 - 폼(Form) 이벤트

  • Form 관련 이벤트는 웹 초기부터 지원되어 여러 웹 브라우저에서 가장 안정적으로 동작하는 이벤트.

  • 자주 사용되는 이벤트로 form이 전송될 떄에는 submit 이벤트가 발생

  • form을 초기화 할 때는 reset 이벤트가 발생

  • submit과 reset은 이벤트 핸들러에서 취소할 수 있다


이벤트 핸들러 등록 - 인라인 이벤트 핸들러

  • 이벤트를 감지하고 대응하는 작업을 등록하는 방법은 여러가지 제공

  • 어떤 이벤트를 처리할 작업을 등록하는 것을 '이벤트 핸들러(혹은 리스너)를 등록한다' 라고 표현

  • JavaScript의 초기에는 HTML 요소의 내부에서 직접 이벤트 핸들러를 등록

  • 이러한 방식은 HTML 코드를 JavaScript 코드가 침범한다는 문제가 있음


  • 이 방식의 경우 최근에는 사용하지 않음. 단 기존의 코드에서 사용이 되었기에 알아 두어야 함

  • 여러 개의 함수를 한 번에 호출가능

  • 최근 관심 받고 있는 CBD 방식의 Angular/React/Vue.js와 같은 프레임워크/라이브러리에서는 인라인 방식으로 이벤트를 처리


이벤트 핸들러 등록 - 이벤트 핸들러 프로퍼티 방식

  • HTML에 직접 이벤트 핸들러를 등록하는 방법 대신에 JavaScript에서 이벤트 핸들러를 등록하는 방법이 있다

  • JavaScript에서 이벤트 핸들러를 등록함으로써 HTML코드와 JavaScript 코드를 분리할 수 있다

  • 이벤트 대상이 되는 특정 DOM을 선택하고 이벤트 핸들러를 등록

  • div1 요소에 클릭 이벤트가 발생하면 핸들러로 등록한 함수가 실행

  • 인라인 이벤트 핸들러 방식처럼 HTML과 JavaScript가 혼용되어 문제를 해결 할 수 있는 방식

  • 단 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩 할 수 있다는 단점을 갖는다

  • 그러므로 아래의 예에서 첫번째 바인딩된 alert()은 실행되지 않는다


이벤트 핸들러 등록 - addEventListener 메소드 방식

  • 전달 인자의 첫 번째에는 이벤트 이름, 두 번째에는 이벤트 핸들러, 세 번째에는 캡쳐링 여부를 사용

  • 첫 번째 전달인자의 이벤트 이름에는 'on'을 제거한 이벤트 이름을 사용

  • addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행 될 콜백 함수(이벤트 핸들러)를 지정한다

  • 장점

    • 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다
    • 캡쳐링과 버블링을 지원
    • HTML 요소 뿐만 아니라 모든 DOM에 대해 동작

  • 아래 예제의 경우 요소의 값 검사를 여러개 해야할 경우 (공통로직) 규칙이 바뀌게 되면 참조하고 있는 모든 곳의 소스를 바꿔야 한다 -> 해결: 규칙에 해당하는 값을 인자로 받는 함수를 외부로 빼면 어떨까?


  • 공통 규칙에 해당하는 값을 상수로 만들고 checkVal(인자)의 함수를 선언한 뒤 callback 함수 호출

  • 두번째 매개변수의 함수를 직접 호출할 경우 이벤트 발생시까지 대기하지 않고 바로 실행

  • 해결하기 위해 함수 호출이 아닌 함수 지정을 선택

    • 해결은 되지만 인자를 전달할 수 없다

버블링과 캡쳐링

  • 이벤트가 발생한 요소를 포함하는 부모 HTML로부터 이벤트 근원지인 자식요소까지 검사하는 것을 캡쳐링이라고 한다

    • 이벤트 캡쳐링에서 캡쳐속성의 이벤트 핸들러가 등록되어 있으면 수행

  • 이벤트 발생 요소부터 요소를 포함하는 부모요소까지 올라가면서 이벤트를 검사하는 것을 이벤트 버블링이라고 한다

    • 이벤트 버블링에서 버블속성의 이벤트 핸들러가 등록되어 있으면 수행


  • 함수의 세번째 인자 값이 true면 캡쳐링, false면 버블링

  • div3를 클릭했을 경우 결과

    • true(캡쳐링): div1 > div2 > div3
      - false(버블링): div3 > div2 > div1

이벤트 활용

  • 하나의 DOM 엘리먼트에 복수의 이벤트 핸들러를 등록할 수 있다

  • 마우스가 특정 DOM 엘리먼트 영역 안으로 들어온 경우 mouseover 이벤트가 발생

  • 반대로 마우스가 특정 DOM 엘리먼트 영역 밖으로 나간 경우 mouseout 이벤트가 발생

  • <span>태그에 mouseover, mouseout 2가지 이벤트 핸들러를 등록

요약

  • DOM에서 발생되는 이벤트에 대한 핸들러(리스너)를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다

  • 핸들러 등록은 HTML 태그의 on 속성에 명시하는 방법과 JavaScript에서 DOM 검색 후 등록하는 방법이 있다



JSON

JSON(JavaScript Object Notation)

  • JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준

  • XML 사용시 파싱과 같은 복잡한 문제를 해결

  • 단, JSON은 전달받은 데이터의 무결성을 직접 검증(XML은 스키마를 이용)

  • 텍스트 기반이므로 어떠한 프로그래밍 언어와 플랫폼에서도 사용가능


JSON vs XML

  • JSON은 종료 태그가 없음

  • XML에 비해 상대적으로 구문이 짧음

  • JSON 데이터가 XML 데이터 보다 빨리 읽고 쓸 수 있음

  • XML은 배열 사용이 불가능

  • XML은 XML 파서가 있어야 하나 JSON은 자바스크립트의 함수로 변환하여 사용가능

  • XML은 문서의 DOM을 이용하여 접근하지만, JSON은 문자열로 전송 받은 후 바로 파싱하기 때문에 처리속도가 빠름


JSON 구조

  • JSON data는 name-value 형태의 쌍으로 collection 타입이다

  • data는 쉼표로 나열된다

  • 객체는 중괄호로 표현

  • 배열은 대괄호로 표현


JSON 자료형

  • 수: 정수, 실수(고정, 부동 소수점)

  • 문자열(String)

    • 유니코드 문자들
    • 큰 따옴표로 구분 함
    • 역슬래스 이스케이프 문법을 지원

  • 참/거짓(Boolean): true/false

  • 배열

  • 객체

  • null: 비어있는 값


JavaScript에서 JSON 사용

  • JSON.stringfy(JSON 객체)

    • 직렬화 (serialize)
    • argument로 전달받는 자바스크립트의 객체를 문자열로 변환

  • JSON.parse(JSON형식의 문자열)

    • 역직렬화(deserialize)
    • JSON.stringify(text)와는 반대로 argument로 전달받은 문자열을 자바스크립트의 객체로 변환
    • argument로 받은 text는 반드시 JSON 형식에 일치해야 함

  • toJSON()

    • 자바스크립트의 Date 객체의 데이터를 JSON형식의 문자열로 변환
    • Date.prototype 객체에서만 사용 가능

  • JSON.stringify(obj)

    • argument로 전달받은 자바스크립트 객체를 문자열로 변환

  • JSON.parse(text)
    • JSON.stringify(obj)와 반대로 argument로 전달받은 문자열을 자바스크립트의 객체로 반환
    • argument로 받은 text는 반드시 JSON 형식에 일치해야함


  • toJSON()
    • 자바스크립트의 Date 객체의 데이터를 JSON형식의 문자열로 변환
    • Date.prototype 객체에서만 사용가능


  • JSON에서 직렬화와 역직렬화 구현 예시

브라우저 렌더링

  • 브라우저가 서버로부터 요청해 받은 내용(HTML,CSS,JavaScript)을 브라우저 화면에 표시해 주는 작업

  • 랜더링의 기본 동작 과정

    1. HTML과 CSS 파일을 파싱하여 각각 Tree를 생성 (Parsing) DOM,CSSOM Tree 생성

    2. 두 Tree를 결합하여 Rendering Tree를 생성 (Style)

    3. Rendering Tree에서 각 Node의 크기와 위치를 계산 (Layout)

    4. 계산된 값을 이용하여 각 노드를 화면상의 실제 픽셀로 변환하고, Layer를 만듦(Paint)

    5. Layer를 합성하여 실제 화면에 나타냄 (Composite)

  • SSR (Server Side Rendering)
    • 클라이언트(브라우저)가 요청할 때마다 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식
    • 서버가 클라이언트의 요청마다 새로운 화면(html)을 제공
    • 서버가 화면을 그리는 주체가 됨

  • SSR 장점과 단점



  • CSR (Client Side Rendering)
    • 클라이언트(브라우저)가 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식
    • 클라이언트의 요청시 모든 data(JSON, XML)를 제공
    • 클라이언트(브라우저)가 화면을 그리는 주체가 됨

  • CSR 장점과 단점

  • 클라이언트 요청에 대한 서버의 응답으로 JSON(or XML...)데이터를 보냄

  • JSON 데이터를 화면에 보여주는 역할로 Front-end Framework를 사용



Web Storage

  • LocalStorage, SessionStorage 기본 구성
    • 키와 값을 하나의 세트로 저장
    • 도메인과 브라우저별로 저장
    • 값은 문자열로 저장됨
  • 공통 메소드와 프로퍼티

Web Storage - localStorage

  • Web Storage API - LocalStorage

    • 데이터를 사용자 로컬에 보존하는 방식
    • 데이터를 저장, 덮어쓰기, 삭제 등 조작가능
    • 자바스크립트로만 조작
    • 모바일에서도 사용 가능

  • Cookie와의 차이점

    • 유효 기간이 없고 영구적으로 이용 가능
    • 단순 문자열 외에 객체 정보 저장 가능
    • 용량 제한이 없음(쿠키는 도메인당 20개의 쿠키수가 제한되며 4kb까지, 브라우저에 따라 다를 수 있음 )
    • 쿠키와는 다르게 네트워크 요청 시 서버로 전송되지 않음
    • 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음
    • 웹 스토리지는 origin(프로토콜, 도메인, 포트)이 다르면 접근 불가
  • LocalStorage에 data 저장

- LocalStorage에 data 읽기

  • LocalStorage에 data 삭제


  • LocalStorage에 data 전체 삭제


  • LocalStorage에 객체형 data 저장
    • Web Storage에 저장되는 타입은 String만 가능
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Localstorage</title>
    <script>
      function init() {
        // localStorage에는 문자열로만 저장 가능.
        localStorage.setItem("num", 1);
        let num = localStorage.getItem("num");
        console.log("1. ", num == 1); // true
        console.log("2. ", num === 1); // false

        let user = {
          userid: "world",
          username: "홍길동",
        };
        // localStorage에 user 객체 저장.
        localStorage.setItem("userInfo1", user);
        let userInfo1 = localStorage.getItem("userInfo1");
        console.log("3. ", userInfo1); // [object Object]
        console.log("4. ", typeof userInfo1); // string
        console.log("5. ", userInfo1.username); // undefined

        // localStorage에 user 객체를 string으로 변환 후 저장. >> 직렬화(serialization)
        localStorage.setItem("userInfo2", JSON.stringify(user));
        let userInfo2 = localStorage.getItem("userInfo2");
        console.log("6. ", userInfo2); // {"userid":"world","username":"홍길동"}
        console.log("7. ", typeof userInfo2); // string
        // JSON형식의 문자열을 객체로 변환. >> 역직렬화(deserialization)
        let userInfo3 = JSON.parse(userInfo2);
        console.log("8. ", typeof userInfo3); // object
        console.log("9. ", userInfo3.username); // 홍길동
      }
    </script>
  </head>
  <body>
    <body onload="init()">
      <div id="result"></div>
    </body>
  </body>
</html>

  • LocalStorage data는 웹페이지를 닫을 때 사라지지 않으므로 불필요한 데이터가 남지 않도록 직접삭제

Web Storage - sessionStorage

  • SessionStorage는 현재 떠 있는 탭에서만 유지(같은 페이지라도 탭이 다르면 다른 곳에 저장)

  • 페이지 새로고침시에는 데이터는 유지, 탭을 닫고 새로 열었을 경우 제거

  • SessionStorage 사용법

    • 세션 저장: sessionStorage.setItem("key",value);
    • 특정 세션 값 불러오기: sessionStorage.getItem("key");
    • 특정 세션 값 삭제: sessionStorage.removeItem("key");
    • 세션 전체 삭제: sessionStorage.clear();

Web Storage - localStorage vs sessionStorage

  • 차이점

    • localStorage는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능. 즉 세션이 끊겨도 사용 가능
    • sessionStorage는 브라우저가 종료되면 데이터도 같이 삭제됨. 즉 같은 세션만 사용가능

  • sessionStorage의 경우에는 동일한 세션에서만 사용 가능하지만 localStorage는 세션이 끊기거나 동일한 세션이 아니더라도 사용가능

    • localStorage는 도메인만 같으면 전역적으로 공유 가능
    • sessionStorage는 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역으로 인식
profile
Wonkyun Jung
이전 포스트

프론트엔드 (JavaScript)

다음 포스트

프론트엔드 (Bootstrap)

0개의 댓글