🍈 [TIL] This ? / 브라우저 저장소

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

 

답변)

this는 함수를 호출할때 생성되는 실행 컨텍스트 객체입니다. 현재 실행 중인 함수 내에서 this 키워드가 사용된 위치에 따라 참조하는 객체가 동적으로 결정됩니다. 즉, 함수가 호출될때 결정이되는 것입니다.

this가 가리키는 대상은 어떻게 this가 호출되는지에 따라 다릅니다.

전역공간에서의 this는 전역객체를 가리키고 있습니다.

메서드로서 호출할 때 그 메서드 내부에서의 this는 호출한 주체에 대한 정보가 담겨저 있습니다. 여기서 호출한 주체란 함수명 바로 앞의 객체입니다.생성자 함수 내부에서의 this는 새로만들 구체적인 인스턴스 자신이 됩니다.

---

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

 

답변) 브라우저 저장소란 웹 어플리케이션에서 데이터를 클라이언트 측에서 저장하는 방법입니다.

브라우저 저장소는 크게 2가지 분류로 나눠져 있습니다.

웹 데이터를 클라이언트에 저장하기 위해 만들어진 저장소인 웹 스토리지와 

서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 쿠키저장소가 있습니다.

두개 모두 키-밸류 형식의 저장소입니다.

 

웹 스토리지에서는 로컬 스토리지와 세션스토리지로 나누어지게 됩니다. 

로컬 스토리지는 브라우저를 종료해도 데이터를 보관하고, 도메인만 같다면 전역적으로 데이터가 공유되는 특성이 있습니다. 

반면 세션 스토리지는 브라우저가 종료되면 데이터가 삭제됩니다. 또 도메인이 같더라도 브라우저가 다르면 브라우저 컨택스트가 다르기 때문에 각각의 세션스토리자가 형성되어 데이터 공유가 되지 않습니다.

 

쿠키는 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어졌으며, 세션 관리, 개인화, 트래킹을 위해 사용됩니다.

쿠키는 4KB의 용량 제한을 가지고 있고 한사이트당 20개의 쿠키를 가질수 있으며 만료기한을 지정할 수 있습니다. 

쿠키에 쓸데없는 값이 많다면 그만큼 네트워크 트래픽이 증가하게 되니 주의해야 합니다.

 

웹스토리지와 쿠키의 차이점으로는

웹스토리지는 쿠키와 달리 서버에 전송되지 않고 명시적으로만 전송 가능하기 때문에 서버에 부담이 가지 않습니다. 또한, 필요한 경우에만 꺼내 쓰는 것임으로 자동 전송의 위험성이 없으며, 다른 오리진이 요청할 때에는 꺼내쓰고 싶어도 오리진 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸수 없습니다.(CSRF) 웹스토리지는 쿠키에 비해 용량이 넉넉합니다.