[3/31] this 용법, 브라우저 저장소의 특징 (local storage, session storage, cookie)

hare·2023년 3월 31일
0

FE-기술면접

목록 보기
4/10

this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요?

this

  • 자바스크립트 엔진에 의한 생성. 함수가 실행될 때마다 함수 내부에 this 객체 추가
  • 자신이 속한 객체나 생성할 인스턴스를 가리키는 자기 참조 변수 → 프로퍼티, 메소드 참조 가능
  • 코드 어디서든 참조 가능
  • this 바인딩: this와 this가 가리킬 객체를 연결

자바스크립트에서의 this

  • 함수 호출 방식에 따라 this 바인딩이 동적으로 결정됨

동적 바인딩

  • 전역 this: 전역 객체 window
  • 일반 함수 this: 전역 객체 window ⇒ 사용할 필요가 없음 (자기 참조 변수이기에)
    - strict mode라면 undefined가 바인딩됨
  • 메서드 내부의 this: 해당 메서드를 호출한 객체
  • 생성자 함수 this: 생성자 함수가 생성할 인스턴스

명시적 this 바인딩

  • 명시적으로 this를 바꾸는 함수 메서드
  • apply(), call(): 함수 호출 시 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩
    - apply: 호출 할 함수의 인수를 배열로 묶어 전달
    - call: 호출 할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달
  • bind(): 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 생성하여 리턴 → 호출하지는 않기 때문에 명시적 호출 필요

Web storage

  • key,value 쌍으로 브라우저에 데이터를 저장. key 값을 통해 데이터를 조회
  • cookie와의 차이
    1. 서버 전송
    - 저장된 데이터는 클라이언트에 존재할 뿐 서버로 전송하지 않음 ⇒ 네트워크 트래픽 비용 감소
    2. 용량 제한
    - 용량에 제한 없음
    3. 영구 데이터 보존
    - 만료 기간의 설정 없음 → 한 번 저장한 데이터 영구적으로 존재

local storage

웹 페이지 세션 종료 후에도 데이터가 남아있음

session storage

웹 페이지 세션 종료와 함께 저장된 데이터 삭제 ← 각 세션마다 데이터가 독립적으로 저장

  • 브라우저에서 같은 웹페이지를 여러 탭 또는 창으로 열었을 때
    - local storage는 여러 탭과 창끼리 데이터가 공유. 해당 탭, 창을 닫아도 데이터는 브라우저에 남아있음
    - 반면 여러 개의 session storage에 데이터가 분리되어 저장. 해당 탭, 창이 닫힐 때 저장해 둔 데이터도 사라짐
    - 📌 데이터 유지와 범위에서 차이점 발생
  1. 매번 서버로 전송
  2. 용량 제한
    - 하나의 사이트에서 저장 가능한 쿠키는 최대 20개, 최대 크기 4KB
  3. 만료기간 지정
    - 지정하지 않을 시 세션 쿠키
    - 만료기간을 길게 지정하면 영구 쿠키로 동작
profile
해뜰날

0개의 댓글