[모의 면접] 변수 선언 차이, 호이스팅, 디스, 클로저, 비동기 함수 차이, 렌더링 과정, 쿠키 세션 차이, 토큰, 쓰로틀링 디바운싱

• var , let , const
• this
• 클로저
• Rest API
• Rest  Ful API
• Axios, Fetch, Promise, TanStack Query(React Query)
• Axios,  React Query 차이
• 브라우저 렌더링 과정
• 주소창에 naver.com입력 시 어떤 일이 일어나는가
• 쿠키랑 세션 차이
• 토큰이란
• 쓰로틀링 디바운싱

---

var , let , const

var

• var는 es6 이전 버전에서 변수 선언 시 사용되었다
• 전역 또는 함수 스코프를 가지며 TDZ(Temporal Dead Zone)의 영향을 받지 않는다

함수 내부에 선언된 var는 함수 스코프(지역변수)를 가지기 때문에 함수 내부에서만 사용 가능하지만
if, for 내부에 선언된 변수는 블록을 무시하고 함수 또는 전역 스코프를 가지게 된다
외부에 선언된 변수는 전역 스코프를 가지며 전역객체(window) 속성이 된다 (Node.js 환경에서는 global객체)

• 재선언 및 재할당이 가능하다
• 선언과 동시 undefined으로 초기화되기 때문에 호이스팅시 undefined으로  출력되며 재할당은 선언부에서 가능하다

* 문제점

• 변수 재선언 가능성, 블록 스코프 미준수, 호이스팅 특성으로 예기치 못한 문제가 발생할 수 있다

---

let , const

• 블록스코프를 따르기 때문에 중괄호 {} 로 묶인 블록 냅에서만 유효하며, 외부 접근이 불가능하다
• TDZ의 영향을 받기 때문에 호이스팅 시  참조 에러가 발생한다 
• 재선언은 불가능, 재할당은 가능하다
• 변수 선언 이후 나중에 값 할당 가능

---

const

• 블록스코프를 따르기 때문에 중괄호 {} 로 묶인 블록 내부에서만 유효하며, 외부 접근이 불가능하다
• TDZ의 영향을 받기 때문에 호이스팅 시  참조 에러가 발생한다 
• 재선언, 재할당이 불가능 가능하지만 객체, 배열 내부 속성과 요소 변경은 가능하다(재할당은 불가능)
• 변수 선언 시 반드시 초기화해야 한다

•  

TDZ(Temporal Dead Zone)
변수가 초기화되기 전까지 접근할 수 없는 구역
해당 구역 내에 변수를 참조하려 할 경우 ReferenceError(참조에러)가 발생한다
변수 스코프 범위에 따라 형성되지만 var는 호이스팅이 발생하며, 선언과 동시에 undefined로 초기화되기 때문에 영향을 받지 않는다.
let과 const는 블록 스코프를 가지기 때문에 TDZ의 영향을 받아 호이스팅 되지 않으며 참조에러가 발생한다

정리!

var는 es6 이전 버전에서 주로 사용되었고 전역, 함수 스코프를 가지기 때문에 TDZ의 영향을 받지 않아 호이스팅 되면 undefined을 반환한다 변수 재선언, 블록스코프 미준수, 호이스팅 특성으로 예기치 못한 문제가 발생할 수 있다
let과 const는 블록 스코프를 따르고 TDZ영향을 받기 때문에 호이스팅 시 참조에러가 발생한다
let은 재할당이 가능하고
const는 변수 선언 시 반드시 초기화를 해야 하며 재할당이 불가능하지만 객체, 배열 내부 요소나 속성 값 변경은 가능하다  
 
자바스크립트 호이스팅
 
https://kahee430.tistory.com/116

인텔리픽 모의면접_2

---

this

실행 중인 코드에서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
this 바인딩은(this가 가리키는 값) 함수 호출방식에 의해 동적으로 결정된다
 

일반 함수 호출에서 this

• this는 함수가 호출될 때 결정된다
• 전역 객체(브라우저에서는 window, Node.js 환경에서는 global 객체)가 바인딩된다
• Strict Mode에선 undefined이 출력된다 (window.함수명 으로 호출하면 window객체가 출력된다) 

 

---

화살표 함수에서 this

• 화살표함수에는 this가 존재하지 않기 때문에 외부 스코프의 this를 사용한다
• 함수가 정의될 때 정의된 위치에 따라 외부 스코프의 this를 캡처해서 사용한다

 

1. innerFun 함수 앞에 객체 메서드 호출 시 사용되는 마침표(.)도 없고 bind, call, apply(명시적 바인딩)을 사용하지 않았기 때문에 전역 객체가 바인딩된다
2. innerFun은 일반 함수로 호출되었으나, 화살표함수는 상위 스코프를 따르기 때문에 person객체 안에 선언된 name이 된다 

// 일반 함수
const person = {
	name : 'Seo',
    sayName : function() {
    	innerFun = function() {
        	return `안녕하세요 ${this.name}님`
         }
       console.log(innerFun())  /// 안녕하세요 ''님
    }
 }
 
 person.sayName() 
 
 // 화살표 함수
 const person = {
	name : 'Seo',
    sayName : function() {
    	innerFun =() => {
        	return `안녕하세요 ${this.name}님` /// 안녕하세요 Seo님
         }
       console.log(innerFun())
    }
 }
 
 person.sayName()

• bind

특정 this값과 초기 인수를 가진 새로운 함수를 반환한다.

• call

즉시 함수를 호출해 this와 인수를 직접 설정한다. this 값을 변경할 수 있다

• apply

call과 유사하지만 인수를 배열 형태로 전달한다
 
화살표 함수는 this가 정의 시점에서 캡처되며, bind, call, apply로 this를 변경할 수 없음.

* Lexical Scope (렉시컬 스코프)
함수 선언 위치에 따라 상위 스코프가 결정되는 것

* Lexical Environment (렉시컬 환경)
실행 컨텍스트 일부로, 식별자(변수, 함수 등의 이름)와 그에 대응하는 값, 그리고 주변 스코프에 대한 정보를 관리하는 구조

* 캡처
함수 생성 시 참조 가능한 외부 스코프의 변수와 상태를 메모리에 저장해 상태를 유지하며 함수 내부에서 참조한다(목적은 다르나 캐싱과 비슷한 개념이다)

* Scope Chain (스코프 체인)
함수 실행 시 함수 내부에서 변수에 접근하려 할 때 현재 함수 스코프를 확인하고 함수 스코프에서 변수를 찾지 못하면 상위 스코프를 차례로 올라가 탐색하여 찾는 것

* 엄격 모드(Strict Mode)
자바스크립트 코드 동작을 엄격하게 제어해 코드 안정성을 높이는 기능

1. 선언되지 않은 전역 변수 사용 불가 (참조 오류 발생)
2. 읽기 전용 프로퍼티 수정 불가 (Object.defineProperty() 로 정의된 속성)
3. 매개변수 이름이 중복금지
4. this 값이 null, undefined인 경우 전역 객체로 반환되지 않음
5. 예약어 사용 금지(let, const, class... 등)

---

메서드 호출에서 thist

• 메서드로 호출된 함수 내부에서 this는 해당 메서드가 속한 객체를 가리킨다

const person = {
	name : 'Seo',
    sayName() {
    	console.log(this.name)
    }
}

person.sayName() //// Seo 

---

생성자 함수 내부의 this

• 생성자 함수 내부의 생성된 객체를 참조한다
• new 연산자를 통해 생성자 함수를 호출하면 빈 객체가 생성되고 this에 바인딩되어 인스턴스를 생성한다

function Person(name, age) {
  // 생성자 함수 내부에서 this는 새로운 객체를 참조
  this.name = name;
  this.age = age;
}

// new 연산자를 사용하여 Person 생성자 함수 호출
const person1 = new Person('Alice', 30);

console.log(person1.name); // Alice
console.log(person1.age);  // 30

 

정리!

this는 실행 중인 코드에서 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다
호출방식에 따라 바인딩되는 값이 동적으로 결정된다
일반함수는 호출 시 결정되며 this는 전역 객체를 가리킨다(브라우저는 window 노드환경은 global) 
화살표함수는 정의될 때 렉시컬스코프와 같이 위치에 따라 외부 스코프의 this를 캡처해 사용한다
new연산자를 사용할 경우 생성자 함수 내부의 객체를 참조하여 인스턴스를 생성한다

---

클로저

• 변수를 지역변수로 만들어 외부에서 접근하지 못하고 내부 함수에서만 참조할 수 있도록 캡슐화를 통해 데이터를 은닉하는 것
• 캡슐화와 데이터 은닉을 통해 외부 접근이 불가능한 데이터를 생성할 수 있으며 데이터의 무결성을 보장할 수 있다
• 관련 데이터와 메서드를 모듈화, 구조화를 통해 가독성을 향상 시킬 수 있다
• 메모리에 환경을 저장하고 있기 때문에 함수 호출 후 가비지컬렉터에 의해 값이 사라지지 않고 이전 상태를 유지할 수 있다

1. 전역 상태에 cnt 변수가 있고 cntPlus 함수는 cnt값을 변경할 수 있다 cnt = cnt + 1
2. 그럼 cntPlus  함수를 실행할 때마다 cnt 값이 바뀐다
3. 전역 상태에 선언된 변수는 재할당이 가능하기 때문에 해당 변수에 직접 접근을 막기 위해  cnt를 클로저 함수 내부에 선언해 지역변수로 만들어 변수의 외부 접근을 막는다
4. 해당 함수 내부에 cnt 값을 변경하거나 조회할 수 있는 함수를 정의해 반환한다
5. 외부에서 cnt 변수에 직접 접근하거나 호출할 수 없지만, 클로저를 통해 제공된 함수(cntPlus, setCnt, printCnt 등)를 통해 cnt의 상태를 변경하거나 조회할 수 있다

let cnt = 0; // 전역 상태 변수

function cntPlus () {
	cnt = cnt + 1;
}

console.log(cntPlus); // cntPlus 함수 호출 시 cnt 변수의 값이 변경된다

 

// 클로저 함수
function closure() {
  let cnt = 0; // 함수 내부에 변수를 선언함으로 지역 변수가 됨

  // cnt 증가 함수 
  function cntPlus() {
    cnt = cnt + 1;
  }
  
  // cnt에 인자를 전달해 값 변경하는 함수
  function setCnt(val) {
    cnt = val;
  }

  // cnt 출력 함수
  function printCnt() {
    console.log(cnt);
  }
  
  // 추가적 기능은 함수 생성 후 리턴해주면된다
  // 클로저를 통해 기능을 객체 형태로 반환
  return { cntPlus, setCnt, printCnt };
}

const cntClosure = closure();
console.log(cntClosure); // 키,값의 객체 형태 반환 { cntPlus: [Function: cntPlus] }

cntClosure.printCnt(); // cnt = 0
cntClosure.cntPlus(); // cnt 증가 함수 호출!
cntClosure.printCnt(); // cnt = 1

cntClosure.setCnt(100); // cnt상태를 변경하는 함수에 인자를 전달하여 cnt 상태를 변경한다
cntClosure.printCnt(); // 그리고 호출! 100 출력

 * cntPlus를 객체 형태로 반환하는 것과 함수 그대로 반환하는 것
1. 객체 반환
추가 메서드나 속성을 포함할 수 있고 복잡한 상태관리가 가능하다

2. 함수 반환
기본적인 클로저의 개념을 유지하며 상태관리를 할 수 있다

 

정리!

클로저는 렉시컬 스코프 기반으로 변수에 대한 외부접근을 제한하고 내부 함수에서만 참조할 수 있도록 캡슐화와 데이터 은닉을 통해 데이터 무결성을 보장하고
함수 호출 이후 가비지컬렉터에 의해 수집되지 않고 메모리에 남아 이전상태를 유지할 수 있게 해 준다.

---

Rest API

REST아키텍처 스타일의 설계 원칙을 준수하는 애플리케이션 프로그래밍 인터페이스로
 

• 클라이언트 - 서버 구조로 요청과 응답에 의해 처리된다
• 무상태성으로 클라이언트 - 서버의 각 통신은 독립적이며 이전 요청 상태를 저장하지 않는다
• Http메서드와 (GET, POST, PUT, DELETE) Url을 통해 상호작용을 한다
  • Http메서드로 특정 작업 수행
  • Url로 자원 위치 식별

Rest  Ful API

REST 설계 원칙을 지키며 설계된 API(애플리케이션 프로그래밍 인터페이스)
 

정리!

REST API는 아키텍처 스타일의 설계 원칙을 준수하는 API로 클라이언트 -  서버 구조로 요청, 응답에 의해 처리되고
무상태성으로 클라이언트 - 서버의 각 통신은 독립적으로 이전 요청 상태를 저장하지 않는다
HTTP메서드로 특정 작업을 수행하고 URL로 자원 위치를 식별해 상호작용한다
Rest Ful API는 REST 설계 원칙을 지키며 설계된 API이다

---

Axios, Fetch, Promise, TanStack Query(React Query)

Axios

• 비동기 통신 라이브러리로 HTTP 메서드를 사용하고 외부 라이브러리를 별도로 설치해야 한다
• JSON 데이터를 파싱 해주기 때문에 response.data로 접근 가능하다
• 인터셉터를 이용해 요청, 응답을 가로채 추가 로직을 수행할 수 있다
• 응답 상태코드가 200번대가 아닌 경우 오류로 처리한다
• 기본 URL, 공통 헤더 설정 등의 기능을 제공하고 여러 요청에서 공통으로 사용되는 설정을 정의할 수 있다

Fetch

• 브라우저 내장 API로 별도로 설치하지 않아도 된다
• response.json() 메서드로 JSON데이터를 파싱 해야 한다
• 인터셉터 기능이 없다
• 네트워크 오류만 처리하며 그 외 오류는 response.status메서드를 통해 수동으로 처리해야 한다
• 각 요청별로 필요한 설정을 수동으로 해줘야 한다

Promise

비동기 처리를 위한 콜백함수의 단점을 보완하여 나온 비동기 작업의 성공, 실패를 나타내는 객체로 세 가지 상태를 가진다

 

• Pending (대기): 초기 상태, 작업이 완료되지 않음
• Fulfilled (이행됨): 작업이 성공적으로 완료됨
• Rejected (거부됨): 작업 실패

 

async

• Promise 기반의 비동기 코드를 간결하게 작성할 수 있게 해주는 기능으로 항상 Promise를 반환하며 내부에 await Promise가 처리될 때까지 기다린다

await 

• Promise가 처리될 때까지 함수 실행을 정지시키며 async 함수 내부에서만 사용할 수 있다

정리!

Promise는 비동기 작업의 성공, 실패를 나타내는 객체로 Pending , Fulfilled , Rejected  세 가지 상태를 가진다
Axios와 Fetch는 Promise기반의비동기 통신 함수로 Axios는 HTTP 메서드를 활용한 라이브러리이기 때문에 별도 설치가 필요하다 200번대 외 상태코드는 자동으로 오류처리되며 JSON을 파싱 해주기 때문에 response.data로 접근이 가능하다
Fetch는 내장 API로 별도 설치가 필요하지 않고 JSON을 파싱 해주지 않기 때문에 response.json() 메서드로 파싱 해야 하고 네트워크 오류만 처리하기 때문에 response.status메서드를 통해 수동으로 처리해야 한다

---

Axios,  React Query 차이

Axios는 HTTP 클라이언트 라이브러리로 API 요청을 통해 서버와 비동기 통신을 위해 사용되며 Promise 기반이다
React Query는 서버 상태 관리 라이브러리로 Mutation ,  invalidateQueries로 서버 상태 업데이트와 , 로컬 상태를 최신화하여 데이터의 일관성을 유지한다

---

브라우저 렌더링 과정

HTML을 파싱해 DOM트리 생성하고 CSS을 파싱해 CSSOM트리를 생성하고 둘을 결합해 렌더트리를 생성한다
레이아웃과 페인트단계를 거쳐 화면에 출력한다

• 최초 생성

HTML 파싱 > DOM트리 생성 > CSS 파싱 > CSSOM트리 생성 > 렌더트리 생성 > 레이아웃 > 페인트 > 출력 

 

• 재생성

자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우(document.getElementById 특정 아이디를 가진 요소를 선택하고 해당 요소를 변경하는 경우) 리플로우 > 리페인트 과정을 거친 후 변경 사항을 반영한다

 
리플로우 : DOM요소의 크기, 위치, 형태가 변경되었을 때 레이아웃을 다시 계산하는 과정
리페인트 : DOM요소의 색상, 그림자 효과 등 스타일이 변경되었을 때 발생하는 과정

---

주소창에 naver.com입력 시 어떤 일이 일어나는가

1. URL분석을 통해 도메인 이름을 DNS서버에서 조회
2. DNS서버에서 도메인 이름에 맞는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달
3. 브라우저는 HTTP 프로토콜을 사용해 요청 메시지 생성
4. HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송
5. 서버는 response 메시지 생성 후 다시 브라우저에게 데이터를 전송
6. 브라우저는 response를 받아 파싱해 화면에 출력한다

정리!

URL 분석 후 도메인 이름을 DNS서버에서 조회하고 해당 도메인 이름에 맞는 IP주소를 찾아 사용자가 입력한 정보와 함께 브라우저에 전달한다
브라우저는 HTTP프로토콜을 사용해 요청메시지를 생성하고 TCP/IP프로토콜로 서버에 전송된다
서버는 응답 메시지 생성 후 브라우저에 데이터를 전송하고 브라우저는 응답을 받아 파싱 후 화면에 출력한다

TCP/IP프로토콜
데이터 통신을 위한 기본 프로토콜 스택

---

쿠키랑 세션 차이

쿠키는 클라이언트 측에 저장되는 작은 데이터 조각으로 사용자가 웹 사이트를 방문할 때마다 서버에 전송된다
브라우저를 통해 서버와 데이터를 주고받기 위한 용도로 로그인 인증정보를 저장하고 사용자 경험을 개선하기 위해 사용된다(오늘은 그만 보기 기능 등)
 
세션은 서버 측에서 사용자 정보를 저장하는 방식으로, 각 클라이언트에 고유 세션 ID를 할당해 사용자 상태를 유지, 관리하고 서버 측에서 관리되기 때문에 쿠키에 비해 보안성이 높은 정보를 저장할 수 있다

---

토큰이란

사용자 인증과 권한부여에 사용되며 로그인 시 발급된다
보안을 강화하고 사용자 식별을 용이하게 하며 권한관리를 쉽게 하기 위해 사용된다
특히 세션유지를 위해 토큰을 사용하는 것이 일반적이고
클라이언트 측에서 관리되는 엑세스 토큰과 서버에서 관리되는 리프레시 토큰이 있다
엑세스 토큰은 짧은 유효기간을 가지고, 요청마다 헤더에 포함되어 서버가 사용자 권한을 검증한다
리프레시토큰은 서버에 보관되어 사용자가 장기적으로 인증된 상태를 유지하도록 한다

---

쓰로틀링 디바운싱

상태 최적화 기법
 
디바운싱은 연속적으로 발생하는 이벤트 호출을 제어해 불필요한 함수 호출을 방지하기 위해
제일 처음 또는 마지막 이벤트만 호출된다
웹페이지의 검색 버튼 등에 사용된다
 
쓰로틀링은 이벤트가 연속 발생하더라도 정해진 주기마다 한 번의 이벤트만 실행하도록 제어하는 것
스크롤이벤트를 처리할 때 사용된다