프론트엔드 공부 블로그 프론트엔드 공부 블로그

### 파트2 - Chapter 7 클로저 사용법 클로저또한 최소 노출의 원칙 (POLE)을 기반으로 한다.클로저를 사용하면, 변수를 외부 스코프에 두는 대신에 더 제한된 스코프로 캡슐화가 가능하다.이를 통해서 함수 내부에서 함수 밖 해당 변수에 계속 접근이 가능하여 변수를 더 넓은 범위에서 사용 가능클로저를 통해 참조된 스코프 변수를 기억하기 때문클로저는 함수 안에서만 일어나는 함수의 동작. 함수를 다루지 않으면, 클로저는 적용 X객체, 클래스는 클로저를 가질 수 없다. 함수만 가능 화살표 함수도 클로저가 있다.작은 화살표 함수를 사용하더라도, 클로저가 생성될 수 있다.클로저는 단순 함수의 코드에 의해 정의되는 단일 렉시컬 정의가 아니라, 함수 인스턴스에 따라 다르게 생성된다.인스턴스가 생성될 때 마다..

### 파트2 - Chapter 6 스코프 노출 제한 함수의 전용 스코프는 OK, 그렇다면 블록은 왜 스코프가 필요한가 ??정보 보호 분야에서는 최소 권한의 원칙 (POLP)가 있다. 이를 약간 변형한 최소 노출의 원칙 (POLE)이 해당 내용에 적용될 수 있다.최소 권한, 접근 최소, 노출 최소가 필요하다는 원칙이다. (방어적인 아키텍처 설계)한 구성 요소의 장애가 나머지 시스템에 미치는 영향을 최소화 -> 시스템 전체 보안의 강화POLE를 따를 때 가장 최소화 하고 싶은 것은 ?? 바로 스코프마다 등록된 변수의 노출변수가 노출되면 => 이름 충돌의 위험, 예기치 않은 작동, 의도하지 않은 종속성의 문제가 발생할 수 있다. 따라서, 가능한 한 가장 낮은 스코프에 변수/함수 선언을 숨기는 것이 중요하다...

함수 파라미터에 기본값을 넣다 보면 이런 상황을 자주 만난다.function foo(value = 10) { console.log(value);}foo(); // 10foo(undefined); // 10foo(null); // null ❓“null도 값이 없다는 뜻 아닌가?”왜 undefined는 기본값으로 초기화되고, null은 그대로 들어오는 걸까? 결론부터 말하면JavaScript에서 기본값은 undefined일 때만 적용된다null은 “값이 없음”이 아니라👉 “의도적으로 비어 있는 값을 준 것” 으로 취급된다. 기본값 문법은 언제 동작할까?ES6 함수 기본값 문법은 내부적으로 이렇게 동작한다.function foo(value) { if (value === undef..

### 파트 2 - chapter 5 변수의 비밀 생명주기 변수 선언 위치에 따른 작동 방식의 차이와 사용 여부스코프 아래에 있더라도, 스코프 시작 부분에서 변수의 가시성이 확보된다 -> 호이스팅function 함수 선언문의 경우 고유 특성인 함수 호이스팅이 있다.함수 선언문으로 함수가 선언되면, 함수 이름에 해당하는 식별자가 스코프 최상단에 선언되고, 함수 참조로 해당 값이 자동 초기화 됨따라서 함수 선언문은 스코프 내 어디서든 호출 가능함수 선언문 및 var를 사용한 선언 변수의 호이스팅 -> 이름 식별자가 블록 스코프가 아니라, 가장 가까운 함수 스코프에 등록됨 (함수 스코프가 없으면 전역 스코프) 함수 표현식에서는 함수 호이스팅이 적용되지 않음var로 선언한 변수는 호이스팅도 되고 여기에 더해서 ..

### 파트 2 - chapter 4 전역 스코프 최신 JS 프로그램에서는 대부분 코드를 전역이 아닌 함수/모듈에 작성한다다만, 렉시컬 스코프를 이해하고 전역 스코프에 접근하며 사용할 줄 아는 것도 중요하다여러 파일로 분리된 JS 파일을 JS 엔진은 어떻게 실행 시점에 하나로 연결시키는가? (브라우저 기준)ES 모듈을 사용하면, 파일을 각자 하나씩 로딩함. 로딩 후 import 문으로 다른 모듈을 참조하며 이때 스코프는 공유 X 배타적으로 협력함구축 과정에 번들러가 관여하는 경우, 파일 전체가 하나로 합쳐져 브라우저및 JS엔진에 전달된다. 브라우저 및 JS 엔진은 하나의 거대한 JS 파일만 처리한다. 이 경우엔 파일 내 코드 조각끼리 참조할 때 사용할 이름 등록 등 메커니즘이 추가로 필요해진다.번들러는 ..

### 파트 2 - chapter 3 스코프 체인 스코프와 중첩 스코프 사이에 맺어진 연결 -> 스코프 체인변수 접근 시 스코프 체인을 기반으로 변수를 찾는데, 위/밖으로만 찾음렉시컬 스코프는 컴파일 초기에 확정 -> 런타임에서는 이미 정해진 렉시컬 스코프를 활용하여 변수를 탐색한다런타임에 찾지 않기에, 효율적 👽다만, 런타임에 다른 프로그램이 변수를 전역에 선언할 가능성 등이 있기에, 런타임 도중에 스코프가 정해지는 경우도 있다따라서 완전히 확정되는 것은 런타임중이긴 함 이름은 같은 두 개의 변수가 하나의 스코프에 동시에 존재할 수는 없다같은 이름의 변수를 굳이 사용하고자 한다면, 스코프를 분리해야 한다변수를 찾는 순서는 현재 위치부터 위로 올라가기에, 동일한 이름의 변수가 지역, 전역에 모두 있는 ..

### 파트 2 - chapter 2 렉시컬 스코프 컴파일레이션 중 스코프가 결정되는 방식 -> 렉시컬 스코프스코프의 블록은 중첩이 가능한데, 스코프 버블은 부모 스코프 버블에 온전히 포함되기에, 한 스코프가 두 개의 스코프에 동시에 포함될 수는 없다.어느 스코프에 변수가 포함되는지 결정짓는 절차 -> 탐색 (이 작업은 런타임 X 컴퍼일 O 스코프에 대한 내용은 미리 확정된다.)변수가 사용된 스코프에서 변수가 선언되지 않은 경우, 바깥/위의 스코프를 찾게되는데 찾을 때 까지 이는 반복된다 (recursive) JS 엔진 내부 역할엔진: 컴파일 책임지고 JS 프로그램 실행컴파일러: 파싱 & 코드 생성스코프 매니저: 선언된 모든 변수 및 식별자의 탐색 및 목록 관리. 코드 실행 시 변수 & 식별자 접근 규칙..

웹 애플리케이션 개발에서 비동기 요청을 중간에 취소해야 하는 상황은 종종 발생한다.예를 들어, 검색창에 입력할 때마다 API 요청을 보내는데 사용자가 입력을 빠르게 바꾼다면, 이전 요청은 불필요하게 서버 리소스를 차지하게 된다.이런 경우 AbortController를 사용하면 깔끔하게 해결할 수 있다. AbortController란?AbortController는 브라우저에서 제공하는 Web API 중 하나로, fetch와 같은 비동기 작업을 명시적으로 취소할 수 있도록 지원한다.AbortController 객체는 signal 속성을 가지고 있으며, 이 signal을 비동기 요청에 전달하면, 컨트롤러에서 취소 명령(abort())을 내릴 수 있다. 기본 사용 예시const controller = new A..