[기술 면접 스터디-5일차] This, 브라우저 저장소의 차이

1. this 가 동작하는 원리와 용법 / 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요?

💡this는 인스턴스 자신(self)을 가리키는 참조변수입니다. 자바스크립트에서 this는 함수 호출 방식에 따라 바인딩되는 객체가 동적으로 결정된다.

함수 호출 방식에 따른 this 바인딩
함수 호출 -  내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관계없이 this는 전역객체를 바인딩
메소드 호출 - 해당 메소드를 호출한 객체에 바인딩
생성자 함수 호출 - 생성된 객체를 참조
apply/call/bind 호출 - 명시적으로  this를 지정
화살표 함수에서의 this - 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없기 때문에 내부 함수여 this는 전역 객체를 참조하지 않고, 기존의 메소드에서 참조한 호출 객체를 여전히 참조한다.

함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정되기 때문에, this를 사용할 경우 주의가 필요하다. 평소 코드 중에서는 화살표 함수가 큰 차이가 있을 것 같다.

+ this가 결정되는 시점

this 가 동작하는 원리와 용법

+ 화살표 함수와 일반함수의 this의 차이점

일반 함수는 호출에 따라 this가 동적으로 결정되지만, 화살표 함수는 선언이 된 주체의 this값을 정적으로 그대로 가져온다. 등

 

2. 브라우저 저장소의 차이

💡브라우저 저장소는 크게 쿠키와 웹 스토리지로 나누어 집니다.

1. 쿠키와 웹 스토리지의 차이점
쿠키와 웹 스토리지의 크게 목적과 용량제한, 만료 일자 등에서 차이가 있습니다.

목적 : 쿠키는 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어짐. cookie를 설정하면 이후 모든 요청은 쿠키정보를 포함하여 서버로 전송 / 스토리지는 데이터가 클라이언트단에 저장만 되어있을 뿐 서버로의 전송은 이루어지지 않음

용량 제한 : 한개의 쿠키당 약 4kb로 제한되어 있고, 총 개수는 300개, 하나의 도메인당 20개로 제한되고 쿠키는 만료일자를 설정하지 않으면 세션쿠키, 설정하면 지속적쿠키로 간주 됨 / 스토리지는 따로 용량 제한이 정해져있지 않고 쿠키에 비해 넉넉한 편이며, 만료일자가 없고 세션과 로컬 스토리지로 나누어짐

스토리지는 오리진 단위로 접근이 제한되는 특성 덕분에 외부에서 값을 꺼내 쓸수 없고(CSRF), 단순한 문자열을 넘어서 키-밸류 페어의 객체 정보를 저장할 수 있으므로 쿠키에 비해 개발 편의성이 높다는 장점이 있습니다.



2. 로컬 스토리지와 세션 스토리지의 차이점
로컬 스토리지와 세션 스토리지의 차이점은 데이터 유지와 범위에서 차이가 있습니다.

로컬 스토리지는 브라우저를 종료해도 데이터를 영구적으로 보관 도메인만 같으면 모든 브라우저 간에 전역적으로 데이터가 공유되지만,

세션 스토리지에 저장된 데이터는 브라우저 *세션이 유지되는 동안만 존재하기 때문에 브라우저가 종료되면 데이터가 삭제(비영구성)됩니다. 또 도메인이 같더라도 브라우저가 다르면 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않음

+ 각각 어떤 용도로 많이 쓰이는지, 사용해 본 경험

+ 로그인 토큰 저장소는 어디서 사용할지

브라우저 저장소의 차이점(Local storage, Session storage, cookie)