TIL_230331_기술 면접 스터디 - this 동작 원리, 브라우저 저장소

📒 오늘의 공부

1. 기술 질문 스터디

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

• this

  • 함수가 호출될 때 함수를 호출한 방법에 따라 동적으로 결정되는 값 = 호출을 한 객체

    const obj = {
    name: "Yunny",
    whoAmI: function(){
      console.log(this); 
    },
    };
    obj.whoAmI();
    // { name: 'Yunny', whoAmI: [Function: whoAmI] }

• 용법

  • 객체의 상태 변경

    const obj = {
    name: "Yunny",
    changeName(newName) {
      this.name = newName;
    },
    };
    
    console.log(obj.name); // Yunny
    obj.changeName("Remi");
    console.log(obj.name); // Remi

  • 객체의 method 호출

    const obj2 = {
    name: "Yunny",
    sayHello() {
      console.log(`Hello my name is ${this.name}`);
    },
    };
    obj2.sayHello(); // Hello my name is Yunny

  • 객체 생성

    function Person(name) {
    this.name = name;
    }
    const person = new Person("Yunny");
    console.log(person.name); // Yunny

---

추가공부

• bind
  • this를 호출한 객체와 무관하게 this를 고정시킬 수 있는 method

---

참고자료

YouTube - this? 간단히 핵심만 파악하기

---

2. 브라우저 저장소에 대해서 차이점을 설명해주세요(local storage, session storage, cookie)

• cookie
  • 매번 서버에 전송
  • 저장 용량이 작음
  • 보안에 취약 - 다른 사람이 보거나 수정, 삭제가 용이
  • 활용: 다시보지않기 팝업창
• web storage:
  • local storage, session storage
  • HTML5부터 등장
  • 클라이언트에만 저장하고 서버에 전송하지 않음
• local storage
  • 브라우저 자체에 반영구적으로 데이터 저장
    -> 브라우저를 종료해도 데이터 유지
  • 활용: 자동로그인
• session storage
  • 탭 윈도우 단위로 생성, 삭제
  • 활용: 비로그인 장바구니, 아이디 자동완성
    
  • 프로젝트 경험: 새로고침 시에도 유저가 선택한 필터 유지
    • 로그인 시 유저의 관심 필터(지역, 분양형태)가 적용된 리스트 제공
    • 로그인/비로그인 유저 구분을 위해 local 대신 session 이용

---

참고자료

YouTube - 브라우저 저장소