# B2BS: 프레임워크보다 기본기(JS)

###### tags: `냥하`, `강의`

### topic
1. JS의 현재 상태와 위상
2. JS엔진이 동작하는 방식, 클로저
3. ES6+

### 자바스크립트의 현재와 미래
1. **표준이 ESM, 브라우저가 이 방식으로 이해함(호환성 확장 중)**

2. **자바스크립트의 미래**
- 브라우저, Node 발전에 따라 트랜스파일러(babel)의 필요성 하락
- JS가 아닌 JS: TS, WebASM, Rust등
- 독점적인 언어가 가지는 위상:: 브라우저환경에서의 JS (브라우저에서 호환되는 native한 언어가 나타난다면 긴장해야됨)
- TS: 강타입언어, 실행 전 정적분석을 통한 에러탐지,
- 새로운 번들러 등장: webpack의 독주는 언제까지?

3. **Lexical Environment**
1. 정의:
- 변수나 함수등의 식별자(변수나 함수의 이름)를 정의할 때 사용되는 명세
- 중첩된 어휘적 환경에 기반해 동작
- Environment Record와 outer속성을 포함
2. 관련 문법:
- 함수 선언
- 블럭문
- Try~Catch문의 Catch절
3. 종류
- 전역환경
- 모듈환경
- 함수환경

4. 실행 컨텍스트
1. 정의
- 자바스크립트 코드가 실행되는 환경
- 모든 JS코드는 실행컨택스트 내부에서 실행됨
2. 종류
- 전역 실행 컨텍스트
- 함수 실행 컨텍스트
- Outer가 null이 될 때까지 실행컨텍스트를 올라가면서 찾음.

5. 어휘적 범위

6. 클로저
- 처음 만들어 질 때의 어휘적 범위를 그대로 유지한 함수
- 어휘적 범위 바깥에서 해당 범위에 접근할 수 있다.

7. 엄격한 모드
1. 진입 방법
- `use strict`: 전역 영역, 함수 내에 표기
- ES2015 모듈 사용
2. 일반 모드와의 차이
- 조용한 에러(실행도 안되고, 무시된 것임) 대신 명시적 에러
- JS엔진 최적화를 어렵게하는 실수 방지
- 향후 ES2015에 포함될 예약어/문법 대비
3. 엄격한 모드 외의 엄격함
- JS의 이상한 동작은 독특한 형변환도 원인
- 일치연산차 ===(타입까지 체크) 사용의 습관화
- 명시적 형변환 활용

8. **비동기 자바스크립트**
1. **비동기 처리는 필연적**
- 기능 대부분을 외부 API에 의존하고 있기 때문
- 외부 API를 호출하고 결과를 콜백으로 전달받음
- ex) 웹페이지에서 DOM을 읽어들인 후, 코드를 실행하는 것도 비동기
- JS자체적으로는 돔이라는 개념이 없고, 웹 API에 정의된 DOM을 통해서 이 웹페이지가 언제 읽혀졌고, dom이 언제 준비가 됐는지 확인하는 것도 비동기로 해야함, 클릭이벤트 비동기.. 다 콜백처리...!
- 
2. **JS의 동작 원리**
- 자바스크립트는 싱글 스레드 언어
- 이벤트 루프와 스택을 통해 지금 내가 무엇을 업데이트 할 것 인지 스케줄링
- **UI업데이트, 사용자 이벤트도 모두 같은 스레드에서 처리** => 콜 스택이 비어있어야, 메시지 큐에 쌓인 나머지 메시지에 대한 동작(사용자의 동작)을 확인 할 수 있으므로...
- :star2: **이벤트 루프**: 자바스크립트 동시성(concurrency)처리 모델의 기본 원리
- 
- 이벤트 루프의 동작원리
- 먼저 JS 엔진만 보면 **메모리 힙**과 **콜 스택**이 있다. 메모리 힙에는 JS 코드에서 정의한 여러 객체와 값이 저장됨.
- **메모리 힙**: 애플리케이션이 직접 관리하는 영역. 필요할 때 가져다 쓰고 반환함. 상대적으로 액세스가 느리고 메모리를 직접 관리해야 하는 C와 같은 언어에서는 할당한 메모리를 적절하게 해제해주지 않으면 메모리 누수가 일어나기 쉬움. JS와 같은 스크립트 언어는물론이고 Go와 같은 최신 언어에서도 자동 관리로 가는 추세이기는 함.
- **콜 스택**: 함수를 한 번 호출하면 스택에 프레임으로 쌓이게 됨. 그러니까 프레임 하나가 함수 호출 한 번이라고 보면 됨. 함수 자체가 아니고 *함수의 실행*. JS 엔진은 나중에 들어온 것부터 처리하게 됨. 그리고는 함수가 실행을 종료하면 메모리에서 해제됨. 이 영역은 **동기식**으로 실행되는데 **한 번에 하나 밖에 실행을 못한다**는 의미임. 가장 마지막에 있는 것만 처리함.
- JS 만으로는 할 수 있는 별로 없으니까 여기 **함수에서 API를 호출**합니다. 그리고 API에서 이제 콜백 함수를 실행해야 할 때가 되면, 그러니까 사용자가 버튼을 클릭했다거나 아니면 서버로부터 응답을 받았다거나, 혹은 타이머가 설정한 시간에 도달했다거나 하는 등 **이벤트 큐에 메시지를 추가**합니다.
- 큐라는 이름에서 짐작할 수 있겠지만 이벤트 큐는 들어온 순서대로 처리가 됩니다. 여기서 드디어 이벤트 루프라는 이름이 등장하는데, 그냥 큐에 메시지가 있는지 없는지 계속 확인하고 이벤트 루프가 처리하는 과정이라고 생각하면 된다. 메시지가 있으면 처리를 하는데 결과적으로는 **콜백 함수를 실행해서 다시 콜스택에 하나 추가**하게 될 것이다. 주의할 점이 있는데 이벤트 루프는 콜 스택이 비어있을 때만 메시지를 처리함
- 주의점: 함수는 실행이 되어야 콜스택에 쌓인다.

3. **콜백 지옥은 해결된 문제**
- 더 우아한 비동기 처리 방법: `Promise`, `async await`
- 함수 분리 등의 코딩 패턴 적용

4. **promise, async, await**
1. `promise`: 비동기 처리를 위한 객체
- 참고로, then이나 .catch가 실행된 다음에는 이행 상태에 상관없이 .finally가 실행됨. 네트워크 통신을 처리할 때 유용.
- 예를 들어, 게시판 댓글에서 사용자가 전송 버튼을 클릭하면 전송 버튼을사용할 수 없게 했다가 서버에서 완료됐다는 메시지를 받으면 댓글을 화면에 추가하고 다시 버튼을 원래대로 돌려주는 UI를 생각해보자.
- 이 UI는 서버에서 실패를 반환했어도 전송 버튼을 사용할 수 있게 해야 했을 것이다. 이처럼 .then과 .catch에서 공유하는 동작이라면 .finally에서 처리하는 게더 편리할 것
=> then과 catch가 공유하는 동작은 finally에서 한 번에 처리
2. `async`
- async함수는 항상 promise를 반환한다.