🧑🏻‍🏫 프론트엔드 기술 면접 단골 개념들 정리 (자바스크립 편)

계속 추가할 예정입니다.

🧑🏻‍🏫 자바스크립트 엔진

자바스크립트가 동작되게 하려면 브라우저 자체에서 내장되어있는 JS 엔진이 필요하다. 이것이 동작하는 시간을 런타임이라고 하는데 런타임 하는 과정에서 코드를 한 줄 한 줄 읽고 번역해서 실행을 해주는 것이 인터프리터 라고 한다.

🧑🏻‍🏫 자바스크립트란?

• 자바스크립트는 가볍고 인터프리터를 이용해서 런타임 시 한 줄 한 줄 번역해준다.
• 일급 함수를 가진 언어이며 자바스크립트 엔진이 있는 어떤 곳이든 사용할 수 있다.
• 자바스크립트는 프로토타입을 베이스로 다양한 스타일로 구현이 가능하고 멀티 페러다임이다. (절차지향으로도 가능하고 객체지향으로도 가능하다.)
• 싱글 스레드다.
• 자바스크립트는 언어 자체만으로도 할 수 있는것이 그리 많지 않다. 브라우저에서 무언가를 출력하고 싶다면 외부 환경에 출력을 도와줄만한 라이브러리를 사용해야한다.
• 네트워크 통신을 하려면 통신을 할 라이브러리를 사용해야 한다.

🧑🏻‍🏫 스코프란?

• 변수를 참조(=접근)할 수 있는 유효한 범위, 영역을 지정하는 것을 말한다.
• 선언 된 위치에 따라 유효 범위가 결정된다.
• 범위는 코드 블록 { } 안에서만 유효한다.
• 블록 밖에서는 참조할 수 없다.

🔥 장점
1. 이름 충돌이 방지된다.
2. 메모리를 절약할 수 있다.

🔥 결론

• 변수는 최대한 필요한 곳에서 정의해야한다!

🔥 코드 블록이 쓰이는 곳들

{ }

if() {

}

for() {

}

function() {

}

🧑🏻‍🏫 지역변수

function sum (a, b) {
  console.log(a,b)
} // 이런 매개변수들도 블록안에서만 접근이 가능하다.

• 블록 외부에서는 블록 내부 변수를 참조할 수 없다.
• 함수 외부에서는 함수 내부의 변수를 참조할 수 없다.
• 함수 외부에서는 함수 매개변수를 참조할 수 없다.

{
  const x = 1;
  {
    const y = 2;
    console.log(x); 
  }
    console.log(x); // 1
    console.log(y); // 블록 외부에서는 내부를 참조할 수 없으므로 앱이 죽는다.
}

const x = 1 은 전체적인 코드 블록 내부에서 유효하다. 그래서 안에서 외부를 접근할 수 있다.

🧑🏻‍🏫 글로벌 스코프

// 📍 전역 변수, 전역 스코프, 글로벌 변수, 글로벌 스코프 라고한다.
const text ='global'; 

{
// 📍 지역 변수, 로컬 변수, 지역 스코프, 로컬 스코프
  const text = 'inside block1'; 
  {
    console.log(text)
  }
}

• 답은 'inside block1' 이 된다. 내부에 있는 것은 외부에 있는 것에 접근이 안되기 때문에. 만약 inside block1 값이 없다면 한 단계 위로 상위 변수에 접근할 수 있다. 쉽게 말해 가장 가까운 근접한 변수에 접근 하는 것이다.

🧑🏻‍🏫 가비지 컬렉터 (= 쓰레기 수집)

• 프로그래밍을 할 때 쓰레기 수집을 해줘야한다. 여기서 말하는 쓰레기 수집이란 메모리 청소를 해줘야 한다는 뜻으로 보면 된다.

메모리 구조

let apple = {
  name : 'apple',
}

let orange = apple;

orange = null;
apple = null;

오브젝트를 변수에 할당하면 오브젝트는 메모리 어딘가에 heap이라는 곳에 만들어진다. 변수는 메모리가 만들어진 주소를 가리키게 된다. 그런데 메모리 안에 아무것도 없을 경우에 (Null) 참조하는 것이 없다면, 쓰레기로 간주하고 메모리에서 깔끔하게 청소를 해준다.

자바스크립트에서 가비지 컬렉션이 발생하는 원리는 가비지 컬렉터라는 애가 있는데 자바스크립트 엔진 자체에서 제공해주고 백그라운드 프로세스에서 동작해준다. 대신 이런 점에서 CPU가 발생하게 된다. (즉, 비용이 발생한다는 것!!)

const global = 1;
{
 const local = 1;
}

이처럼 글로벌 변수는 앱이 종료될 때까지 계속 메모리에 유지된다. 블록 스코프는 블록 스코프의 역할이 끝나면 자동으로 소멸된다. => 가비지 컬렉터가 메모리를 처리해줌.
그래서 가급적 글로벌하게 전역적으로 쓰는 것은 좋지 않다 ❌
메모리 측면에서 좋지 않기 때문에 가급적이면 필요한 곳에서만 사용하는 것이 좋다. 👍

🧑🏻‍🏫 렉시컬 환경

렉시컬 환경을 알아보기 전에 실행 컨텍스트에 대해 짧게 알아보자.

실행 컨텍스트

• 콜스택과 밀접하게 관련이 있다. 코드의 실행 순서와 스코프를 기억하고 있기 때문이다.
• 내부에서 외부로 접근이 가능했다. 전역에서 선언된 것을 전역 스코프라 하고 내부에 있는 것을 블록 스코프라고 한다. 블록 안에 또 다른 스코프가 존재할 수도 있다.

const a = 1;
{
  const a = 2;
   {
    const a = 3;
   }
}

이러한 코드가 있다고 가정했을 때, 근접한 부모에 스코프를 어떻게 찾는걸까 ? 했다면 이유는 각각의 블록에서는 렉시컬 환경이라는 내부 오브젝트를 가지고 있다. 그래서 각 블록마다 어떤 변수가 들어있는지 부모는 누구인지? 이런 것을 추적하는 것이 렉시컬 환경이라고 한다.

자바스크립트 엔진은 이런 실행 순서와 각각의 블록의 정보들을 한 오브젝트에 데이터를 담아두고 있다.

렉시컬 환경 안에 속해있는 것들은 이와 같다.

1. 환경 레코드
2. 외부 환경 참조

실행 컨텍스트 스택

const a = 1; // 전역 스코프
{
  const a = 2; // 블록 스코프 1
   {
    const a = 3; // 블록 스코프 2
   }
}

• 이와같이 전역 스코프 렉시컬 환경이 만들어졌음
• 위처럼 블록 스코프1의 렉시컬 환경이 있고 블록스코프2가 있다. 이렇게 이어지는 것을 스코프 체인이라고 한다.

렉시컬 환경과 스코프 체인를 통해 배운점

1. 메모리 절약 뿐만 아니라 성능을 위해서라도 변수는 최대한 필요한 곳에 정의 해야되는구나
2. 중첩된 스코프나 중첩된 함수가 있다면 모든 체인을 검사하며 돌아다니니 성능에 좋지 않겠다.

스코프 개념 정리

스코프는 식별자가 유효한 범위를 나타내는데, 스코프 밖에서는 스코프 내부에 있는 것을 접근할 수 없지만 스코프 내부에서는 스코프 외부에 있는 어떤 부모의 데이터도 접근할 수 있다.
접근할 수 있는 이유는? 렉시컬 환경 참조와 스코프 체인을 통해 부모에 접근할 수 있는 것이다!

🧑🏻‍🏫 호이스팅

• 자바스크립트 엔진(인터프리터)이 코드를 실행하기 전에 변수와 함수, 클래스의 선언문을 끌어올리는 것을 말한다.
• 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮긴다.

변수

• 값을 저장할 수 있는 공간
• 자료를 저장할 수 있는 이름이 주어진 기억 장소

보통 let과 const를 많이 사용한다.

• let : 재할당이 필수로 필요할 경우에만 사용
• const : 재할당이 필요 없는 경우 (가능한 const 선호)

위 변수 키워드가 생기기 전까지는 문제 덩어리인 var를 사용했다.

어떤 이유로 var를 쓰지 말라고 한 것일까?

기본적으로 함수의 호이스팅은 함수의 선언문 전에 호출이 가능하게 해준다.
함수의 선언문은 선언 이전에도 호출이 가능하다는 것이다.

print();

function print() {
  console.log('hello');
}

하지만 ! 변수는 변수 선언하기 이전에 호출하면 앱이 죽어버린다.

console.log(hi); // ☠️
let hi = 'hi';

함수 선언만 호이스팅이 가능해서 호출이 가능하고, 변수(let, const)와 클래스는 선언된 이름만 호이스팅이 가능하고 값 자체는 순서대로 코드 차례가 왔을 때만 가능하다.

var

var는 let과 const와 다르게도 호출이 가능함!
이것 뿐만 아니라 var의 다른 특징에 대해서도 읊어본다면

var 특징

• 코드의 가독성과 유지보수성에 좋지 않다.
• 변수를 선언하는 키워드 없이 선언과 할당이 가능하다.
• 선언인지 재할당인지 구분하기 어렵다.
• 중복선언이 가능하다--> var라는 변수를 한 번 선언하게 되면 선언하고 나서 다시 똑같은 이름으로 재선언이 가능하다.

var hi = '1';
var hi = '2';

이렇게 가능! 그래서 let을 사용하면 재선언 할 수 없다고 친절하게 오류 문구로 안내가 되지만 var는 가능

• 블록 레벨 스코프 지원이 안된다. 함수 레벨스코프만 지원된다.

🧑🏻‍🏫 엄격모드

리액트와 같은 프레임워크 사용시 기본적으로 엄격모드가 탑재되어있다.
그래도 엄격모드가 뭔지 알아보자.

for(i=1; i<5; i++) {

}

이런식으로 선언하게 될 경우, 변수 선언 키워드를 제대로 사용하지 않았을 때
엄격모드를 사용하면 자바스크립트의 나쁜 버릇들을 잡아준다.

🧑🏻‍🏫 클로저

• 이름만 봐도 폐쇄, 닫히는 듯한 느낌이 든다.
• 자바스크립트에서 클로저란 콤비네이션이라고 보면된다. 바로 함수와 그 외부를 둘러싸고있는 렉시컬 환경의 조합이라고 보면 되는데, 쉽게 말해 내부 함수와 그 외부에 있는 함수의 스코프를 접근할 수 있는 것을 클로저라고 한다.

function outer() {
 const x = 0;
 
 function inner() {
   x; // 감싸고있는 함수의 변수에 접근이 가능하다. 이유는 클로저 버프 때문
 }
 inner();
}
outer();

이런 함수가 있다고 본다면, 실행 컨텍스트 스택에 전역 스코프 렉시컬 환경이 먼저 들어오고 그 다음에 outer라는 스코프 렉시컬 환경이 들어온다. 그래서 outer 렉시컬 환경 안에 inner 스코프가 들어오게 된다.

클로저를 사용하는 이유

• 또한 클로저는 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해 쓰인다.
• 캡슐화와 정보은닉을 위해 쓰인다.
• 클래스 private 필드 또는 메소드를 사용하는 효과와 동일하다.

🧑🏻‍🏫 this

문맥에 따라 이것이 가리키는 것이 달라진다.
this는 내가 앞으로 만들어질 인스턴스나, 객체 자기 자신을 가리키는 용도로 사용됐다. 특정한 객체와 this를 묶어놓은 것은 this 바인딩이라고 칭한다.
자바스크립트에서 this는 다른 언어들과 다르게 사용된다. 자바나 C, C++ 같은 경우 this는 하나의 인스턴스에 고정되지만, 자바스크립트 또는 타입스크립트는 런타임 상에서 this 바인딩이 동적으로 결정된다.

글로벌 컨텍스트에서 this란?

글로벌 컨텍스트는 기본적으로 2가지가 있다. (1) 브라우저 (2) Node 가 있는데

• 🙌 브라우저 --> this는 window 다. window에 탑재된 속성들이 출력되는 것을 볼 수 있다.
• 🙌 노드 --> 모듈을 가리킨다. 콘솔로그에 노드의 this를 출력하면 텅텅 빈 객체가 출력이 된다. globalThis 를 출력하면 노드에서 사용되는 전역 객체들이 출력된다.

(ex) setTimeout, setInterver 같은 것들

함수 내부에서 this

function hello() {
  console.log(this)
}
hello();

• 엄격모드 (use stric)를 사용하게 될 경우는 undefined가 뜬다.
• 느슨한 모드에서는 globalThis를 가리키는 것을 확인해볼 수 있다.

생성자함수 또는 클래스에서 this

• 앞으로 생성될 인스턴스 자체를 가리킨다. == 동적바인딩

동적바인딩

• 현재 this는 누구인지 모른다. 누가 호출하냐에 따라 this가 달라진다.

정적바인딩

• this라는 함수가 계속 동적으로 변경되기 때문에 이걸 정적으로 얼려버리는 방법이 있다.

1. bind 라는 함수를 이용하여 수동적으로 바인딩 해준다.

this.myName = this.myName.bind(this)

2. 화살표 함수 사용

• 이것은 렉시컬 환경에서 this를 기억한다.

this.myName = () => {
  console.log(`하이 ${this.name}`);
}

이런식으로 사용할 수 있다.

화살표 함수의 특징

1. 문법이 깔끔
2. 생성자 함수로 사용이 불가능하다.
3. 함수 자체 arguments
4. this에 대한 바인딩이 정적으로 결정된다.
   (함수에서 제일 근접한 상위 스코프의 this에 정적으로 바인딩 된다)

🧑🏻‍🏫 타입스크립트 사용하는 이유

1. 타입을 직접 지정해주고 컴파일 시점에 에러를 잡아낼 수 있다.
2. 만약 변수에 지정된 타입이 아닌 다른 타입을 지정해주면 에러가 발생한다.

이런 이유들로 인해 코드의 안전성과 더 나은 개발 디버깅이 가능하다. 데이터가 어떤 타입인지 직관적으로 알 수 있음! 그래서 코드 퀄리티를 높혀준다.

🧑🏻‍🏫 이벤트 캡쳐링과 버블링

이벤트 캡쳐링

• 부모 컴포넌트에서 시작돼서 자식까지 이벤트의 영향을 끼친다.

이벤트 버블링 (⭐️이게 더 중요)

• 상위에 있는 부모에게 이벤트가 호출하게 된다. 또 그 위의 상위 부모한테도 이벤트가 호출된다.
• event.stopPropagation()는 위로 전달하는 것을 중지 시켜준다. 하지만 가능하면 사용하지 않는 것이 좋다.

이벤트 위임

• 이벤트 위임이란 하위 엘리먼트들이 여러개 있을 때, 하위 엘리먼트에 각각 이벤트 핸들러를 달지 않고 상위 엘리먼트에 이벤트 핸들러를 달아 하위 엘리먼트들을 제어하는 방식이다. 이 패턴으로 얻는 이점들은 이와 같다.

1. 동적으로 엘리먼트 추가 시 핸들러 고려할 필요 없음
2. 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 되기 때문에 코드가 훨씬 깔끔하다.
3. 메모리에 있게되는 이벤트 핸들러가 적어지기 때문에 퍼포먼스 측면에서 이점이 있다.

🧑🏻‍🏫 이벤트 루프 ⭐️ (단골 질문 TOP5)

자바스크립트는 싱글 스레드 기반 언어로, 단일 콜 스택을 가진다. 이 말은 요청이 동기적으로 처리되는 것을 의미한다.
그렇다면 비동기 요청은 어떻게 처리 될 수 있을까 ? 🤷🏻‍♀️
그것은 바로 자바스크립트를 실행하는 환경인 브라우저나 Node.js가 담당한다. 여기서 자바스크립트 엔진과 그 실행환경을 상호 연동 시켜주는 장치가 바로 이벤트 루프이다.

이벤트 루프는 2개의 큐를 감시하고 있다가 콜 스택이 비게 되면, 콜백함수를 꺼내와서 실행한다. 이 때 마이크로 태스크 큐의 콜백함수가 우선순위를 가지고 때문에 마이크로태스크 큐의 콜백 함수를 전부 실행하고나서 매크로태스크 큐의 콜백 함수들을 실행한다. (단, UI 렌더링이 매크로태스크 큐에 속하기 때문에 마이크로태스크 큐의 태스크가 많으면 렌더링이 지연될 수 있다.)

매크로태스크 큐와 마이크로태스크 큐

• 자바스크립트의 실행 환경은 2가지 큐를 가지고 있으며 각각 스크립트 실행, 이벤트 핸들러, 콜백함수 등의 태스크가 담기는 공간이다. 태스크가 콜백함수라면 그 종류에 따라 다른 큐에 담기며 대표적으로는 이와 같은 것들이 있다.

• 매크로태스크 큐

  • setTimeout(), setInterval(), UI 렌더링, requsetAnimationFrame(), script, mousemove

    일반적인 이벤트 핸들러, 콜백함수라고 보면 된다.

• 마이크로태스크 큐

  • Promise (.then/catch/finally), MutationObserver, await

예시를 통한 동작방식의 이해

console.log('안녕');
setTimeout(() => console.log('큐!'),0);
Promise.resolve().then(() => console.log('마이크로 큐!'));

위와 같은 코드가 있을 때, 결과는 이와 같다.

안녕
마이크로 큐!
큐!

처음 스크립트가 로드될 때, 스크립트 실행 이라는 태스크가 먼저 태스크 큐에 들어간다. 그리고나서 이벤트 루프가 태스크 큐에서 해당 태스크를 가져와 콜 스택을 실행하는 것이다.

🧑🏻‍🏫 프로토타입 (Prototype)

• 자바스크립트를 다루는데 있어서 굉장히 중요한 역할을 하기 때문에 반드시 이해하여야 한다!

정의

• 자바스크립트의 모든 객체는 자신의 원형이 되는 객체를 가지며 이를 프로토타입이라고 한다. 보이지 않는 속성인 [[Prototype]]이 자신의 프로토타입 객체를 참조한다. 이를 __proto__ 라는 속성으로 참조할 수 있으나 이는 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야 한다.

• [[Prototype]] : 자신의 프로토타입 객체를 참조하는 속성
• .prototype : new 연산자로 자신을 생성자 함수로 사용한 경우, 그걸로 만들어진 새로운 객체의 [[Prototype]] 이 참조하는 값이다.

function Func() {}
var a = new Func();

프로토타입 체인

• 어떤 객체의 프로퍼티를 참조하거나 값을 할당할 때 해당 객체에 프로퍼티가 없을 경우, 그 객체의 프로토타입 객체를 연쇄적으로 보면서 프로퍼티를 찾는 방식 을 프로토타입 체인이라고 한다.
  단, 참조할 때와 값을 할당할 때의 메커니즘이 다르니 기억하기! 🙂

• 프로퍼티를 참조할 때

  • 찾고자 하는 프로퍼티가 객체에 존재하면 사용
  • 없으면 [[Prototype]] 링크를 타고 끝가지 올라가면서 해당 프로퍼티를 찾는다.
  • 찾으면 그 값을 사용하고 없으면 undefined를 반환한다.

• 프로퍼티에 값을 할당할 때

  • 찾고자 하는 프로퍼티가 객체에 존재하면 값을 바꾼다.
  • 프로퍼티가 없고 [[Prototype]] 링크를 타고 올라가서 해당 프로퍼티를 찾았을 경우

⭐️ 브라우저에 URL을 입력하면 일어나는 일 (단골 질문)

Q. 웹 브라우저에 www.naver.com을 입력하면 일어나는 일을 설명해보아라.

A. 주소창에 URL 값 도메인 네임(DNS)을 입력을 했을 때, DNS 서버로 전송하여 IP 주소를 받아옵니다. 해당 IP 주소로 HTML과 같은 리소스 파일(JS, HTML, CSS)을 요청하고 받아온 리소스 파일을 브라우저가 렌더링하여 사용자에게 보여줍니다.

브라우저가 받아온 리소스를 어떻게 렌더링 하냐면, HTML 파일을 파싱하여 DOM 트리를 구성 -> CSS 파일 또한 파싱해서 CSSOM 트리를 구성하고 이 두 트리를 합쳐 렌더 트리(render tree)를 구성합니다. 그럼 이 렌더 트리 기반으로 렌더링하게 됩니다.