fe_study

프론트엔드 공부를 하면서 끄적이는 이것 저것

About

프론트엔드 공부를 하면서 생각 정리를 하기 위한 레포입니다.

• 모던 자바스크립트 딥다이브 🔗 : 2024.04.29 ~ 2024.05.20
• 모던 자바스크립트 디퍼 다이브 🔗: 모던 자바스크립트 딥다이브를 읽으면서 더 궁금해서 탐구한 내용들에 대한 정리
• 모던 리액트 딥다이브 🔗 : 2024.05.21 ~
• 웹성능 🔗: 성능 최적화를 위해 공부한 개념들 정리
• 네트워크 🔗
• 개발일기

모던 자바스크립트 딥다이브

🥳 3주 모던 자바스크립트 딥다이브 1회 완독 후기

분류	내용
4장 변수	✦ 변수란? ✦ 식별자란? ✦ 변수 선언 시 호이스팅이 발생하는 이유?
5장 식과 문	✦ 표현식이란? ✦ 리터럴이란? ✦ 문이란? ✦ 표현식인 문과 표현식이 아닌 문
6장 데이터 타입	✦ 데이터 타입이 왜 있어야 하나? ✦ 자바스크립트 데이터 타입의 종류 ✦ 0.1+0.2=0.3일까요? 왜 그럴까요? ✦ 자바스크립트에서 변수의 타입이 정해지는 시점은?
7장 연산자	✦ 단항 산술연산자의 연산 결과는 (++,--,-,+의 연산 결과를 데이터 타입에 따른 예시도 제시) ? ✦ 후위 단항 연산자와 전위 단항 연산자의 차이? (++, --) ✦ (==)와 (===)의 차이? ✦ typeof null의 결과는? ✦ NaN==NaN인가요? -0 == 0은요?
8장 제어문	✦ 제어문이란? ✦ switch-case문에서 폴스루 방지하는 방법은?
9장 타입변환과 단축 평가	✦ falsy한 값과 truthy 한 값? ✦ 단축 평가란? ✦ 옵셔널 체이닝이란? ✦ null 병합 연산자란?
10장 객체 리터럴	✦ 객체란? ✦ 자바스크립트 객체의 값에 접근 하는 방법 2가지? ✦ 빈 객체 person 선언시, person.last-name의 결과는? ✦ ES6에서 객체 리터럴 기능 확장된 것 3가지
11장 원시 값과 객체의 비교	✦ 객체타입과 원시 타입의 차이 3가지 (변경 가능성, 매개변수로 전달될 때 차이, 메모리에 저장되는 것) ✦ 값에 의한 전달 vs 참조에 의한 전달 ✦ call by value와 call by reference ✦ 원시값이 immutable하고 객체 데이터 타입은 mutable하다는 것?
12장 함수	✦ 함수란? ✦ 함수를 정의하는 4가지 방식 ✦ 매개변수(parameter)와 인자(argument)의 차이 ✦ 즉시 실행 함수란? ✦ 콜백함수란? ✦ 순수함수란?
13장 스코프	✦ 스코프란? ✦ 스코프 체인이란? ✦ 블록 레벨 스코프 vs 함수 레벨 스코프? ✦ 렉시컬 스코프란?
14장 전역변수의 문제점	✦ 호이스팅은 스코프 단위로 동작한다.(🅾️ / ❎) ✦ 전역 변수의 문제 4가지 ✦ 전역 변수의 사용 억제하는 방법들
15장 let, const 키워드와 블록 레벨 스코프	✦ var의 특징 3가지(함수 레벨 스코프, 중복 선언 가능성, 호이스팅) ✦ let과 const의 특징 (var과 다른점) ✦ TDZ란?
16장 프로퍼티 어트리뷰트	✦ 자바스크립트 엔진은 프로퍼티를 생성할 떄 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본적으로 자동정의합니다. (🅾️ / ❎) ✦ 데이터 프로퍼티와 접근자 프로퍼티는 뭔가요? ✦ 객체 변경 방지하는 방법?
17장 생성자 함수에 의한 객체 생성	✦ 생성자 함수란? ✦ 객체 리터럴보다 생성자 함수를 통해 객체 생성하면 좋은 점? ✦ 함수 호출 방식에 따라 함수 내부의 this는 무엇을 가르키나요? ✦ 함수도 객체인데, 일반 객체와 구분되는 특징에는 뭐가 있나요? ✦ ECMAScript 사양에서 메서드라고 인정할 수 있는 범위는 뭔가요?
18장 함수와 일급 객체	✦ 일급 객체의 4가지 조건 ✦ Object.getOwnPropertyDescriptors(객체명)은 무슨 값을 리턴하나요? ✦ __proto__는 함수의 고유 프로퍼티인가요? ✦ 함수 객체의 고유 프로퍼티 5가지?
19장 프로토타입	✦ 자바스크립트도 객체지향 프로그래밍 언어인가요? ✦ this.함수명으로 객체내에 메서드를 정의하는 것보다 객체.prototype.함수명으로 추가하는 게 나은 이유? ✦ __proto__ 접근자 프로퍼티와 함수 객체만이 소유하는 prototype 프로퍼티의 차이? ✦ 프로토타입 체인이란? ✦ 정적 메서드 vs. 프로토타입 메서드?
20장 strict mode	✦ strict mode를 사용하는 이유에는 어떤 것들이 있나요? ✦ strict mode는 전역이나 함수 단위로 설정하는 것이 좋습니다. (🅾️ / ❎) ✦ strict mode 설정 시 에러를 발생시키는 경우?
21장 빌트인 객체	✦ 객체를 3가지로 구분한다면? ✦ 전역 객체란? ✦ 빌트인 전역 프로퍼티(2)와 빌트인 전역 함수(9)에는 어떤 것들이 있나요?
22장 this	✦ this란? ✦ this 바인딩이 함수 호출 방식에 따라 달라진다고 합니다. 호출 방식에 따라 어떻게 달라지는 지 설명해주세요.
23장 실행컨텍스트	✦ 소스 코드의 타입에는 어떤 것이 있나? ✦ 실행 컨텍스트란? ✦ 렉시컬 환경을 구성하는 컴포넌트 두 가지? ✦ 실행컨텍스트의 생성 과정? (GlobalEnvironmentRecord, Object Environment Record, Declarative Environment Record과 연관지어 설명해주세요.)
24장 클로저	✦ 클로저란? ✦ 클로저의 활용 예시 ✦ 클로저에서 사용되지 않는 외부 변수는 메모리에 저장되지 않는 최적화가 발생한다. (🅾️ / ❎)
25장 클래스	✦ 클래스와 생성자 함수의 차이? ✦ 클래스의 구성 ✦ 클래스의 인스턴스 생성 과정 ✦ 수퍼 클래스를 상속하는 서브클래스 constructor에서 super() 호출을 하지 않으면 에러가 발생하는 이유?
26장 ES6 함수의 추가 기능	✦ES6에서 목적에 따라 함수를 구분짓습니다. 이 세가지에는 어떤 것들이 있나요? ✦ rest parameter의 사용 예시? ✦ 매개변수 기본값 주는 방법?
27장 배열	✦ 자바스크립트 배열의 특징? ✦ 배열 생성 방식? ✦ class와 배열 메서드를 통한 stack 구현 ✦ class와 배열 메서드를 사용한 queue 구현 ✦ 배열 메서드 중 중첩된 배열들을 모두 평탄화할 수 있는 방법?
28장 Number	✦ Number란? ✦ Number.EPSILON은 언제 쓰일까요? ✦ Number 메서드를 통해 10진법을 2진법으로 나타낼 수 있는 방법은?
29장 Math	✦ Math 메서드를 통해 수들 중 최대값을 구하는 방법은?
30장 Date	✦ 1초마다 현재 시간을 출력하는 함수를 작성해보세요.
31장 Regex	✦ 정규표현식이란? ✦ i,g,m 플래그의 의미? ✦ 정규표현식을 활용하여 slice 대신 문자열을 3개씩 자를 수 있는 방법은? ✦ [] 내의 ^와 밖같의 ^의 뜻은?
32장 String	✦ String 객체는 생성자 함수 객체이며, String 래퍼 객체는 유사배열 객체이다. (🅾️ / ❎) ✦ 2. 소문자 알파벳의 아스키 코드 배열을 반환하는 코드를 작성해주세요. ✦ replace 함수에서 교체 패턴 쓰는 방법?
33장 7번째 데이터 타입 Symbol	✦ Symbol은 무엇인가요? ✦ Symbol.for와 Symbol.keyFor의 쓰임? ✦ Well-known Symbol이란?
34장 iterable	✦ iterable과 iterator의 차이? ✦ for...of문의 내부 동작에 대해서 아시나요? ✦ 이터레이션 프로토콜은 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할을 한다. (🅾️ / ❎) ✦ 사용자 이터러블을 통해 무한 피보나치 수열을 구현해보세요.
35장 스프레드 문법	✦ 스프레드 문법이란? rest parameter과 다른 점은? ✦ 스프레드 문법을 쓸 수 있는 상황 세가지와 각각의 사용 예시
36장 구조 분해 할당	✦ 구조 분해 할당이란?
37장 Set과 Map	✦ Set으로 교집합, 합집합, 차집합, 부분집합, 상위집합 구현해보기 ✦ Map과 객체의 차이점들?
38장 브라우저 렌더링 과정	✦ 브라우저 렌더링 과정? ✦ 자바스크립트 파싱과 실행과정? ✦ 자바스크립트 스크립트 위치? ✦ script 태그의 async와 defer 차이?
39장 DOM	✦ 중요 노드 타입 4가지? ✦ HTMLCollection과 NodeList 객체의 특징? ✦ innerHTML을 사용할 경우의 단점들? ✦ HTML attribute과 DOM 프로퍼티는 같은 값을 관리하나요? 차이?
40장 이벤트	✦ 이벤트 전파란? ✦ 이벤트 위임이란?
41장 타이머	✦ 호출 스케줄링이란? ✦ setTimeout과 setInterval 함수 구현/ 차이 ✦ debounce와 throttle의 차이
42장 비동기 프로그래밍	✦ 비동기 처리란? ✦ 타이머함수, 이벤트 핸들러, HTTP 요청은 비동기적 처리된다. (🅾️ / ❎) ✦ 타이머 함수의 동작 방식?
43장 비동기 프로그래밍	✦ Ajax란? ✦ XMLHttpRequest란? ✦ GET과 POST 요청의 차이?
44장 REST API	✦ REST API 설계 원칙?
45장 프로미스	✦ 콜백 헬이란? ✦ 비동기 처리를 위한 콜백 패턴의 문제점? ✦ 프로미스란? ✦ 마이크로 태스크 큐란? ✦ fetch와 axios?
46장 제너레이터와 async/await	✦ 제너레이터의 동작방식? ✦ async/await란?
47장 에러 처리	✦ 에러 처리 방식들 ✦ 에러의 전파는 뭔가요?
48장 모듈	✦ 모듈이란?
49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축	✦ Babel과 Webpack은 뭔가요? 왜 써야하나요?

🤿 모던 자바스크립트 Deeper 다이브 : 딥다이브 읽으면서 더 파본 내용들

분류	내용
자바스크립트	가비지 콜렉션 (ft. 자바스크립트 내부 동작)

⚛️ 모던 리액트 딥 다이브

분류	내용
0장 들어가며	✦ 왜 리액트를 사용하시나요? ✦ 리액트의 역사
1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트	✦ 자바스크립트 동등 비교 (ft. 동등비교를 알아야하는 이유? ✦ | 와 ?? 와 &&, 리액트에서의 동등비교) 햠수 (ft. 함수 선언 방식)✦ 클로져 (ft. 리액트를 잘 쓰기 위해 클로저를 잘 알아야하는 이유?) ✦ 이벤트 루프와 비동기 통신 (ft. 싱글쓰레드인 자바스크립트에서 비동기 처리가 가능한 이유? 마이크로 태스크 큐, 랜더링,태스크큐의 우선 순위?) ✦ 타입스크립트 (ft. any보단 unknown, instanceof/typeof/in연산자, 제너릭 활용, 인덱스 시그니처)
2장 리액트 핵심 요소 깊게 살펴보기	✦ 1. JSX ✦ 2. 가상돔과 리액트 파이버

🏃🏻‍♀️ 웹 성능

분류	내용
자바스크립트	Critical Rendering Path

🛜 네트워크

분류	내용
DNS	✦ ✦

👩🏻‍💻 개발일기

분류	오늘의 새로 알게 된 것들
디바운스	✦ setTimeout의 리턴 타입이 브라우저 환경에서는 number이고 NodeJs에서는 NodeJs.Timeout이라는 점! ✦