✏️ 무엇을 배웠나
1. this란
객체 내 메서드를 사용할 때, 메서드가 같은 객체 내 프로퍼티를 사용할 수 있도록 해주는 키워드다.
this는 자신이 속한 객체나 자신이 생성할 인스턴스를 가리킬 수 있게 해주는 자기 참조 변수다. this로 프로퍼티나 메서드를 참조할 수 있다.
전역에서 this를 쓰면 전역 객체인 window를 가리키게 된다.
this가 어떻게 가능한가
this는 자바스크립트 엔진이 암묵적으로 생성해 함수 호출 시 함수 내부로 전달된다. 인자처럼 this로 지역 변수처럼 쓸 수 있는데 단 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
this 바인딩
- 일반 함수 호출
- 기본적으로는 this에 전역 객체가 바인딩됨 (strict mode 시 undefined)
- 메서드 호출
- this에 메서드를 호출한 객체가 바인딩됨
- 객체 내 메서드는 객체에 포함된 게 아니라 따로 존재하는 함수 객체를 가리키는 것일 뿐이기 때문임 (표지판 뽑아서 다른 데 박아도 되는 거랑 똑같음)
- 생성자 함수 호출
- this에 곧 생성되는 인스턴스(객체)가 바인딩됨
const example = function () {
console.log(this)
};
// 일반 함수로 호출했을 때
example(); // [object window]가 주르륵 나옴 (전역 객체)
// 메서드로 호출했을 때
const obj = { example };
obj.example(); // [object Object]가 나옴 (객체)
// 생성자 함수로 호출했을 때
new example(); // 곧 생설될 인스턴스가 나옴 (객체)2. 브라우저에 데이터를 저장하는 3가지 방법
쿠키
쿠키는 편의성을 위해 브라우저가 저장해 뒀다가 한 번 통신한 적 있는 서버와 통신할 때 전송하는 데이터를 말함. HTTP 프로토콜은 상태가 없는데 쿠키가 useState처럼 HTTP 프로토콜의 상태가 되어주는 것임.
쿠키는 이럴 때 사용할 수 있음.
- 세션 관리 (장바구니 목록 기억)
- 개인화 (사용자 설정 기억)
- 트래킹 (사용자 행동 기록)
하지만 서버에 데이터를 보내기 때문에 성능 및 보안 이슈로 MDN에서는 storage API를 사용할 것을 권장하고 있음.
로컬 스토리지 / 세션 스토리지
로컬 스토리지는 웹 스토리지 객체 중 하나다. 같은 웹 스토리지 객체인 세션 스토리지와의 차이점은 데이터 보존에 있다. 쿠키와 달리 데이터를 서버에 전송하지 않음. 이 2가지를 활용해 입력폼 내용 저장, 자동로그인 등 기능을 만들 수 있음.
세션 스토리지 : 브라우저나 탭을 닫으면 데이터 초기화
로컬 스토리지 : 브라우저를 닫거나 전원을 꺼도 데이터 보존
사용법
localStorage.setItem(key, value)
-> 로컬스토리지에 키&밸류 쌍을 저장한다 (문자열로만 저장되니 주의)
localStorage.getItem(key)
-> 로컬스토리지에서 key로 저장되어 있는 value를 받아온다
