Today I Learned (기술 면접)

Parkboss·2023년 3월 31일

기술면접

목록 보기

5/12

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

대답 1)

this는 함수의 호출하는 방법에 따라 참조하는 객체가 달라질 수 있다.
이러한 특성 때문에 함수에서 this를 사용하는 부분에서 가장 큰 차이가 생길 수 있다.
특히, 객체 메서드로 호출되는 함수에서 this를 사용하는 경우와 생성된 객체로 호출되는 this가 참조하는 객체가 달라지므로 주의해서 사용해야된다.

this란?

자신이 속한 객체나 생성할 인스턴스를 가리키는 변수이다.
선언이 아닌 호출 방법에 따라 결정되기 때문에 특정 객체와 연결되어 this를 고정하는 과정을 바인딩이라고 한다.

1. 일반 함수로 호출

일반 함수로 호출 될때 window(전역 객체)를 참조

function sayHi() {
  console.log(`Hi, my name is ${this.name}`);
}

const name = 'John';
sayHi(); // Hi, my name is undefined

ES6 문법에서 화살표 함수에서는 this와 다르다.
화살표 함수는 함수 자체에 this 바인딩이 없기 때문에 상위 스코프의 this를 참조한다.

2. 객체 메서드로 호출

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

3. 생성자 객체로 호출

this는 새롭게 생성한 인스턴스(생성된 객체), 즉 Person 자신이 되는것이다.

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

4. call(), apply(), bind()

const person1 = { name: 'John' };
const person2 = { name: 'Mike' };

function sayHi() {
  console.log(`Hi, my name is ${this.name}`);
}

sayHi.call(person1); // Hi, my name is John
sayHi.apply(person2); // Hi, my name is Mike

const sayHiPerson1 = sayHi.bind(person1);
sayHiPerson1(); // Hi, my name is John

대답 2)

로컬 스토리지와 세션 스토리지는 웹 스토리지로 클라이언트 기반 키-벨류 저장소이고 서버로 전송되지 않으며 네트워크 트래픽 비용을 줄여준다.

로컬 스토리지는 브라우저를 종료해도 데이터를 보관하며 도메인만 같으면 전역적으로 데이터가 공유된다. ex) 자동 로그인
이에 반면 세션 스토리지는 브라우저가 종료되면 데이터를 삭제하고 도메인이 같더라도 브라우저가 다르면 데이터를 공유하지 않는다. ex) 비로그인 장바구니, 아이디 자동완성

쿠키는 웹 스토리지와 달리 서버와 클라이언트 간의 지속적인 데이터 교환으로 저장소로 모든 웹 요청과 쿠키정보를 포함하여 서버로 전송되며 개수와 용량 제한이 있다. 또한 만료일자를 지정하여 언젠간 제거가 된다는 차이점이 있다. ex) 다시보지않기 팝업창

웹 스토리지(Web Storge)와 쿠키(Cookie)란?

웹 스토리지: 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-벨류 형식의 저장소
쿠키 : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-벨류 형식의 저장소

웹 스토리지와 쿠키의 차이

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

웹 스토리지(Web Storge)

로컬 스토로지 (Local Storage)

브라우저를 종료해도데이터를 보관(영구성)한다.
도메인만 같으면 전역적으로 데이터가 공유된다.
다크모드, 자동 로그인에 해당된다.
세션 스토로지, 쿠키보다 큰 용량을 가지고 있다.

세션 스토리지 (Session Storage)

브라우저가 종료되면 데이터가 삭제(비영구성)한다.
도메인이 같더라도 브라우저가 다르면(탭 브라우저, 다른 브라우저) 브라우저 컨텍스트가 다르기 때문에 데이터 공유가 되지 않는다.
저장 공간이 쿠키보다 크다.

HTTP 요청을 보낼때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸 것인지 알 수 없다. 이 때 쿠키에 정보를 담아서 서버에 보내면 서버는 쿠키를 읽어서 요청자를 파악한다.
쿠키는 4KB의 용량 제한을 가지고 있으며 한 사이트당 20개의 쿠키를 가질 수 있다.
쿠키는 만료기한을 지정할 수 있다.

쿠키의 목적
1. 세션 관리: 서버가 알아야될 정보 (로그인 및 사용자 정보, 접속시간)
2. 개인화: 사용자에 맞는 페이지 제공
3. 트래킹: 사용자 행동 및 패턴 분석