프론트엔드 면접 스터디 5주차 - JavaScript(2)

Hyeon·2024년 5월 4일

JavaScript

면접스터디

목록 보기

6/6

This란

객체는 상태를 나타내는 ‘프로퍼티’와 동작을 나타내는 ‘메서드’를 하나로 묶은 자료 구조다.

메서드는 자신이 속한 객체의 상태를 참조하고 변경할 수 있어야 하는데 ((ex) getter, setter…) 그러려면 자신이 속한 객체를 참조할 수 있어야 한다.

→ 이 역할을 하는 게 this!

This는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. 이를 통해 프로퍼티나 메서드를 참조할 수 있다.

This는 자바스크립트 엔진에 의해 암묵적으로 생성되고, 코드 어디서든 참조할 수 있다. this가 가리키는 값이 연결되는 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

💡 function 함수와 화살표 함수의 this 차이

실행 컨텍스트 🔥

실행 컨텍스트에 대해 말해보세요 🔥🔥

= 자바스크립트가 실행되는 환경. 자바스크립트가 실행될때, 실행 컨텍스트는 변수, 함수 선언, 스코프 등 관련된 정보를 담고 있다.

실행 컨텍스트는 자바스크립트의 동작 원리를 담은 핵심 개념이다.

<소스 평가 과정과 실행 과정>

자바스크립트는 소스 코드에 따라 실행 컨텍스트를 실행한다. (전역 코드, 함수 코드, eval 코드, 모듈 코드)

자바스크립트는 소스코드 실행 전에 소스코드 평가 과정을 거친다. 소스코드 평가 과정에선 실행 컨텍스트를 생성하고, 변수와 함수 등의 선언문만 먼저 실행되어 생성된다.

→ 이로 인해 생성된 변수나 함수 등을 실행 컨텍스트가 관리하는 스코프 (렉시컬 환경의 환경 레코드)에 등록한다.

그 이후에 선언문을 제외한 소스코드가 순차적으로 실행된다. (런타임). 이 때 소스코드 실행에 필요한 변수나 함수 같은 정보를 실행 컨택스트가 관리하는 스코프에서 가져온다.

소스코드의 실행 결과는 다시 실행 컨택스트가 관리하는 스코프에 등록된다.

<실행 컨텍스트의 역할>

전역 코드 평가
전역 코드 실행
함수 코드 평가
함수 코드 실행

클로저 🔥

클로저에 대해서 아나요? 🔥🔥
클로저는 자바스크립트 뿐만 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성.
클로저는 “함수와 그 함수가 선언된 렉시컬 환경과의 조합이다”
중첩 함수는 자신을 포함하고 있는 외부함수(상위 스코프)의 변수에 접근할 수 있다 → 클로저
렉시컬 스코프: 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다.
이 렉시컬 스코프는 “외부 렉시컬 환경에 대한 참조”에 저장될 참조 값이다. 함수 정의가 평가되는 시점 (소스 평가 과정) 에 함수가 정의된 환경에 의해 결정된다. 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의한 환경인 상위 스코프의 참조를 저장한다.
이 Environment에 저장된 값 = 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조 = 상위 스코프 = 외부 렉시컬 환경에 대한 참조에 저장될 참조값
클로저를 사용하면 뭐가 좋죠? 🔥

정보의 접근 제한(캡슐화) - Private Method 를 생성할 수 있다. (외부에서 접근 불가능)
상태 유지
전역변수 사용억제 → 모듈화에 유리

클로저를 어떻게 생성하나요? 🔥

💡 어디까지 기억할까?

💡 클로저가 함수다?

클래스 🔥

자바스크립트에서 클래스가 생기기 전에는 어떤 방식으로 객체지향 패턴을 구현했나요?
- 자바스크립트는 클래스가 아닌 프로토타입 기반의 객체 언어다. ES5에서는 생성자 함수와 프로토타입을 통해 객체 지향 언어의 상속을 구현했다.
- ES6에서 클래스가 도입 (기존에 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란을 느꼈기 때문). 물론 클래스도 프로토타입 기반으로 만들어졌다. 클래스 기반 패턴처럼 사용할 수 있도록 만들어뒀을뿐
그럼 생성자 함수와 클래스는 어떤 차이가 있나요?
- 생성자 함수와 클래스 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지 않는다.
1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다.
2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 제공하지 않는다.
3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
4. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며, strict mode를 해제할 수는 없다. 하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.
5. 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다. 열거되지 않는다.
클래스 정의
- 클래스는 일급 객체 = 변수처럼 사용 가능!
- class 키워드를 사용하여 정의한다. 이름을 가질 수도 갖지 않을 수도 있다.
- 클래스 몸체에서 정의할 수 있는 메서드
  - 생성자
```
// 생성자
constructor(name) {
	this.name = name;
}

// 프로토타입 메서드
sayHi() {
	console.log('Hi!')
}
// 정적 메서드
static sayHello() {
	console.log('Hello!');
}
```
  - 프로토타입 메서드
  - 정적 메서드
클래스의 상속
- 상속은 코드 재사용 관점에서 매우 유용하다
- 프로토타입 기반 상속은 프로토타입
- 체인을 통해 다른 객체의 자산을 상속받는 개념
- 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 개념, extends 키워드를 사용한다.
- 상속으로 인해 확장된 클래스를 sub class라고 부르고, sub class에게 상속된 클래스를 super class라고 부른다.
  
  → 수퍼클래스와 서브클래스는 인스턴스의 프로토타입 체인뿐 아니라 클래스 간의 프로토타입 체인도 생성한다. 이를 통해 프로토타입 메서드, 정적 메서드 모두 상속이 가능하다

스프레드 문법 🔥

spread 문법이 뭔가요?
- ES6에 도입된 문법
- 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (spread) 개별적인 값들의 목록으로 만든다
어떤 상황에서 사용할 수 있죠?
- 가능한 대상
- Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for... of 문으로 순회할 수 있는 이터러블에 한정된다
  
  💡 이터러블이란?
```
*반복 가능한(iterable, 이터러블)* 객체는 배열을 일반화한 객체입니다. 
이터러블 이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있습니다.
메서드 Symbol.iterator가 구현된 객체여야 하며,
대표적으로 배열과 문자열이 있다
```
- 스프레드 문법의 결과물은 값으로 사용할 수 없고 쉼표로 구분한 값의 목록(배열, 가변인자 등…)을 사용하는 문맥에서 사용할 수 있다.
  
  1) 함수 호출문의 인자
  
  2) 배열 리터럴 내부
  
  3) 객체 리터럴 내부

💡 rest

나머지 매개변수 - JavaScript | MDN

구조 분해 할당 🔥

구조 분해 할당이 뭔가요?
- 배열이나 이터러블, 객체 등 구조화되어있는 요소를 destructuring(비구조화) 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
구조 분해 할당은 크게 어떤 종류가 있나요?
- 배열 구조 할당
  - 기본값도 설정 가능
  - Rest 요소도 사용할 수 있다.
- 객체 구조 할당
  - 각 프로퍼티를 객체에서 추출하여 변수에 할당한다.
  - 선언된 변수의 이름과 프로퍼티 키가 일치하면 할당된다.
  - 이름을 바꿔서 할당도 가능
  - 기본값 설정 가능

브라우저 렌더링 과정

브라우저의 렌더링 과정에 대해 설명해보세요 🔥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>브라우저 렌더링 예시</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <h2>JavaScript 예시</h2>
            <p id="message">버튼을 클릭하세요!</p>
            <button id="clickButton">클릭하기</button>
        </section>
    </main>

    **<script>
        document.getElementById('clickButton').addEventListener('click', function() {
            document.getElementById('message').textContent = '버튼이 클릭되었습니다!';
        });
    </script>**
</body>
</html>

DOM TREE, CSSOM TREE → RENDERING TREE → LAYOUT → PAINTING → REFLOW → REPAINT

1) 브라우저는 HTML, CSS, JAVASCRIPT, 이미지, 폰트 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다.

2) 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.

3) 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다

4) 렌더 트리를 기반으로 HTML 요소의 레이아웃（위치와 크기）을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.

브라우저의 렌더링 과정에 자바스크립트는 어떻게 동작하나요? 🔥
- 자바스크립트 파싱하여 AST를 생성, 바이트 코드로 변환하여 실행.
- dom api를 통해 dom이나 cssom을 변경할 수 있다.
- 변경된 dom과 cssom은 다시 렌더 트리로 결합됨
  
  → 브라우저는 해당 동작을 동기적으로 실행. js 파싱을 하면 html 파싱을 중단한다.
<script></script> 태그를 <body></body> 태그 밑에 둬야하는 이유가 있을까요?
- 위에 두게 되면, body의 요소를 참조를 하면 (ex getElementById 등…) 아직 그려지지 않아서 참조를 못한다!

DOM 🔥

DOM이 뭔가요?
- HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API
- 프로퍼티와 메서드를 제공하는 트리 자료 구조다.
DOM을 구성하는 건 뭐가 있나요?
- DOM은 HTML 요소가 렌더링 엔진에 의해 파싱되어 변환된 노드로 구성된다.
- 노드는 총 12가지가 있다.
- 대표적으로는 문서 노드, 요소노드, 어트리뷰트 노드, 텍스트 노드(HTML 요소의 텍스트 콘텐츠가 변환됨)가 있다.
- HTML 요소는 중첩 관계를 갖는다. 중첩 관계에 따라 부자(parent-child) 관계가 형성된다. 이러한 HTML 요소 간 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성한다.
- 노드 객체들로 구성된 트리 자료구조를 DOM이라고 한다.

+) 모든 노드 객체는 Object, EventTarget, Node 인터페이스를 상속받는다.

추가적으로 문서 노드는 Document, HTMLDocument 인터페이스를 상속받고 어트리뷰트 노드는 Attr, 텍스트 노드는 CharacterData 인터페이스를 각각 상속받는다

💡 createTextNode는 언제 쓰지?

이벤트 🔥

이벤트란?
- 브라우저는 처리해야 할 특정 사건이 발생하면, 이를 감지하여 이벤트를 발생시킨다. (ex 마우스 이동, 클릭, 키보드 입력)
- 특정 이벤트가 일어났을 때 특정 작업을 하고 싶다면? 특정 이벤트가 일어났을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다.
- 이 때 호출될 함수를 핸들러 handler 라고 한다. 이벤트 발생 시의 함수의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.
  
  → 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍 event-driven programming이라 한다.
마우스 이벤트 타입에는 뭐가 있나요? click 말고 클릭을 대체할 수 있는 이벤트가 있나요?
- mouseup
그 외에 알고 있는 대표적인 이벤트가 있나요?
- 키보드 이벤트
- 포커스 이벤트
- 폼 이벤트
- 값 변경 이벤트
- DOM 뮤테이션 이벤트
- 뷰 이벤트
- 리소스 이벤트

이벤트 핸들러를 등록하는 방식에는 어떤 것들이 있나요?

이벤트 핸들러 어트리뷰트 방식
이벤트 핸들러 프로퍼티 방식

addEventListener

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 핸들러 등록 방식</title>
</head>
<body>
    <!-- 이벤트 핸들러 어트리뷰트 방식 -->
    <button onclick="handleClick1()">어트리뷰트 방식 클릭</button>

    <!-- 이벤트 핸들러 프로퍼티 방식 -->
    <button id="myButton2">프로퍼티 방식 클릭</button>

    <!-- addEventListener 방식 -->
    <button id="myButton3">addEventListener 방식 클릭</button>

    <script>
        // 이벤트 핸들러 어트리뷰트 방식
        function handleClick1() {
            alert('어트리뷰트 방식 버튼이 클릭되었습니다!');
        }

        // 이벤트 핸들러 프로퍼티 방식
        var button2 = document.getElementById('myButton2');
        button2.onclick = function() {
            alert('프로퍼티 방식 버튼이 클릭되었습니다!');
        };

        // addEventListener 방식
        var button3 = document.getElementById('myButton3');
        button3.addEventListener('click', function() {
            alert('addEventListener 방식 버튼이 클릭되었습니다!');
        });
    </script>
</body>
</html>

이벤트 전파(propagation)에 대해서 알고 있나요?
- DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 부른다.
- 어떤 요소에 클릭 이벤트가 달려있다면, 해당 요소를 클릭 시 클릭 이벤트가 해당 요소를 중심으로 그 DOM 트리를 따라서 전파된다.
- 이벤트 전하는 이벤트 객체가 전파되는 방향에 따라 다음과 같이 3단계로 구분한다.
  - 캡처링: 이벤트가 상위 요소에서 하위 요소 방향으로 전파
  - 타깃: 이벤트가 이벤트 타깃에 도달
  - 버블링: 이벤트가 하위 요소에서 상위 요소 방향으로 전파
이벤트 위임(delegation)에 대해서 알고있나요?🔥
- 여러 요소에 대한 이벤트 핸들러를 하나의 부모 요소에만 등록하는 기법
- 같은 액션을 하는 버튼이 여러개 있는데 그 버튼에다가 일일히
e.preventDefault 에 대해 알고 있나요?
- DOM 요소는 저마다 기본 동작이 있다. 이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다
e.stopPropagation
- 이벤트 객체의 stoppropagation 메서드는 (자신이 발생시킨) 이벤트 전파를 중지시킨다.

💡 버블링: 하위 → 상위

💡 phase는 하나만 가질 수 있다??

💡 캡처링 찾아내기 → 버블링

이벤트가 발생하는 phase가 보통 버블링이랑 타깃…

capturing을 true로 주면 버블링 단계에서 실행될게 캡쳐링 단계에서 실행된다.

버블링과 캡처링

타이머 🔥

호출 스케쥴링이 무엇인가요?
- 함수를 명시적으로 호출하면 함수가 즉시 실행된다.
- 만약 함수를 명시적으로 호출하지 않고 일정시간이 경과된 이후에 호출될 수 있도록 예약하는 것
타이머 함수에는 어떤 것들이 있나요?
- setTimeout
- setImmediate
- 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행할 수 없다.
이벤트가 과도하게 호출되어 성능에 문제를 일으킬 경우에 할 수 있는 어떤 일을 통해 해결할 수 있나요?
- 우리가 필요할 때만 이벤트 핸들러를 실행할 수 있다.
- 디바운싱
- 쓰로틀
디바운스에 대해서 알고 있나요?
- 연속적으로 이벤트가 발생할 때 일정 시간동안 이벤트 처리를 일부러 지연시키는 방법. 이 덕분에 필요한 이벤트가 필요한 시점에만 이벤트 핸들러를 실행할 수 있다. ex) 연속적으로 검색할때
쓰로틀에 대해서 알고 있나요?
- 정해진 시간 간격으로만 함수가 실행되도록 제한하는 기법. 함수 호출 사이에 최소한의 지연 시간을 강제하여, 빈번한 이벤트 발생시에도 함수가 지나치게 많이 호출되는 것을 방지할 수 있다. throttle은 스크롤 이벤트나 마우스 이동 이벤트 처리와 같은 지속적으로 발생하는 이벤트에 적합
- ex) 무한 스크롤
- Debounce와 Throttle을 적절하게 선택하는 기준
  - 디바운스는 연속적인 이벤트가 끝난후에만 함수를 실행하고 싶을때
  - 쓰로틀은 이벤트가 지속적으로 발생하는 동안 일정간격으로 함수를 실행해야 할 때 사용된다.

비동기 프로그래밍 🔥

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며. 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다.

대기 중인 태스크들은 현재 실행 중인 실행 컨텍스트가 팝되어 실행 컨텍스트 스택에서 제거되면. 다시 말해 현재 실행 중인 함수가 종료하면 비로소 실행되기 시작한다

그러므로 블로킹이 발생한다.

동기와 비동기의 차이점에 대해서 설명해줄 수 있나요? 🔥
- 한줄 요약
- 동기: 직렬 순서로 실행
  - 현재 진행중인 태스크가 끝나야 다음 태스크로 넘어간다.
  - 블로킹 된다는 단점
- 비동기: 병렬 순서로 실행
  - 현재 진행 중인 태스크가 끝나지 않더라도 다음 태스크로 넘어간다.
이벤트 루프와 태스크 큐에 대해서 알고 있나요? 🔥🔥
마이크로태스크 큐에 대해서 알고 있나요? 🔥
태스크 큐와 마이크로태스크 큐 중 어떤 것이 먼저 실행되나요? 🔥
- 이벤트 루프
  - 자바스크립트가 동시성을 지원하는 것
  - 자바스크립트가 태스크를 처리하는 루프
  - 현재 실행 중인 실행 컨택스트가 있는지, 태스크 큐에 대기중인 함수가 있는지 반복해서 확인.
- 콜스택
- 마이크로태스트 큐 (더 우선순위를 가짐) - 프로미스 후속 처리 메서드
- 매크로 태스크 - 이벤트 핸들러, 비동기 함수의 콜백 함수
  태스크 처리에 긴 시간이 걸리면, 브라우저는 태스크를 처리하는 동안에 발생한 사용자 이벤트 등의 새로운 태스크를 처리하지 못한다.
  
  그렇기 때문에 항상 마이크로 태스크의 작업이 더 먼저 처리된다.
  
  매크로 태스트: dom 이벤트 콜백, 타이머
  
  마이크로 태스크

Ajax 🔥

Ajax가 뭔가요 어떤 것을 담당하고 있죠?
- 자바스크립트를 이용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹 페이지를 동적으로 갱신하는 프로그래밍 방식
  
  브라우저에서 제공하는 XMLHTTPREQUEST 객체를 기반으로 동작한다
Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?
- (기존) 온전한 HTML 문서를 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식 (화면이 전환되면 새로운 문서를 받아 처음부터 다시 렌더링)
- 장점
  - 불필요한 데이터 통신 없음
  - 변경한 필요가 없는 부분은 다시 렌더링 하지 않음 → 화면 깜빡임 없음
  - 비동기라서 블로킹 없음
JSON 이 뭔가요?
- 클라이언트와 서버간의 HTTP 통신을 위한 텍스트 데이터 포맷
- 키와 값으로 구성된 순수한 텍스트
JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?
- JSON.stringify (JSON 객체 → 문자열. 서버에 보낼때 - 직렬화)
- JSON.parse (JSON 형태의 문자열 → JSON 객체화 - 역직렬화)
Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?
- XMLHttpRequest 객체를 사용
  - 객체 생성, HTTP 요청 초기화, 헤더 설정, 데이터 타입 설정, 요청 전송
XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요? 🔥
- 사용법이 간단하다.
- XMLHttpRequest는 프로미스를 지원하지 않음.
- 이후 작업을 이벤트를 따로 등록해줘야 함. (xhr.onload)

REST API 🔥

REST API가 뭔가요?
- 자원을 나타내는 URI과 HTTP 요청 메서드로 서버에 요청을 보내는 방식
REST API의 구성은 어떤 것이 있나요?
- 자원, 행위, 표현
REST API를 설계하는데 중요한 것이 있을까요? 1. URI는 리소스를 표현해야 한다.
1. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다.
HTTP 요청 메서드에 대해서 아는대로 얘기해보세요
HTTP 상태 코드를 아는대로 말해주세요 🔥

Promise 🔥

콜백이란 뭐라고 생각하나요? 🔥
- 어떤 함수가 실행된 후 그 결과를 다루기 위해 다시 호출되는 함수
- 콜백지옥: 각 작업의 결과를 다음 작업의 입력으로 사용해야 하는 경우 발생하는 문제. 코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만듦.
프로미스가 뭔가요? 🔥
- 콜백 지옥을 방지하기 위해서 나옴
- 자바스크립트에서 비동기 작업을 편리하게 처리할 수 있도록 도와주는 객체
- 비동기 작업의 최종 성공 또는 실패를 나타내는 값
- 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다.
  - resolve 성공한 경우 실행
  - reject 실패한 경우 실행
프로미스 생성 방법
- Promise 생성자 함수를 new 연산자와 함께 호출
프로미스의 상태를 나타내는 것은 어떤 것들이 있나요? 🔥
- 대기: 아직 처리 안됨 (기본)
- 이행: 비동기 처리가 수행 (성공) → resolve
- 거부: (실패) → reject
프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요? 🔥
- Promise.all
- Promise.race
- Promise.resolve
- Promise.reject

제너레이터와 async await 🔥

제너레이터란 뭔가요? 일반 함수와는 어떤 차이가 있죠?
- es6에 도입된 특별한 종류의 함수다
- 일반 함수와 달리, 제너레이터는 함수의 실행을 중간에 멈췄다가 필요한 시점에 다시 재개할 수 있다.
제너레이터의 구조
- 정의 방법: 제너레이터 함수는 function 키워드 뒤에 별표를 붙여 선언
- 실행 흐름 제어: 제너레이터는
async/await 가 뭔가요? 기존의 Promise와는 어떤 차이가 있죠? 🔥
- 자바스크립트에서 비동기 작업을 더 쉽게 작성할 수 있도록 es8에서도입
Promise와 async/await의 차이점 한 줄 요약 🔥
- 가독성: 비동기 코드를 마치 동기처럼 순차적으로 작성할 수 있다. 가독성이 좋다. Promise 의 then 체인은 가독성이 떨어진다
- 에러처리: async/await를 사용하면 try/catch문을 통해 에러 처리 가능.
- 디버깅: promise의 then 체인은 비동기 호출 스택이 연속되지 않아 디버깅시 추적이 어렵다.

에러 🔥

에러처리를 왜 해야 하나요?
- 엄청 많은 코드를 작성했는데, 에러가 발생하면 코드가 멈춰버림. 프로그램이 멈춰버림.
- 그래서 try-catch같은 걸로 에러 헨들링을 한다.
자바스크립트에서 에러를 처리하는 방법에는 뭐가 있을까요?
- try-catch-finally
- throw
  - 일부러 에러 던질때

모듈 🔥

모듈이 뭔가요?
- 일반적으로 애플리케이션을 구성하는 개별적 요소다
- 애플리케이션의 크기가 커지면 파일을 여러개로 분리해야하는 상황이 생기는데, 파일 하나하나를 모듈이라고 부름
- 모듈을 만들고 export/import를 사용하여 외부 모듈에 접근

모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.

→ 자바스크립트는 원래 제한적인 기능을 제공학 위해 만든 언어여서 모듈을 신경 쓸 필요가 없었음.

→ 하지만 자바스크립트의 사용처가 넓어지면서 모듈이 필요해짐

→ CommonJS로 모듈 시스템이 표준화됨

💡 모듈 레벨 스코프

동일한 모듈이 여러곳에서 사용되더라도 모듈은 최초 호출 시 한번만 실행된다.

모듈 최상위 레벨의 this는 undefined

모듈 스크립트는 항상 지연 실행된다. 마치 defer 속성을 붙인 것처럼. 따라서 모듈 스크립트는 항상 완성된 페이지를 확인할 수있다.

Hyeon

어 왜 되지? 에 대한 고찰

이전 포스트