The RED: Back to the Basics - 프레임워크보다 기본기
===

###### tags: `석기`

---

:::info
1강, 2강은 너무 잡다한 배경 이야기라 정리하지 않았습니다.
:::

---

## Browser 웹 페이지를 표현하는 방법

### 웹 브라우저

#### 웹 페이지 로드 과정


- Prompt for unload

- 다른 페이지로 이동시 발생.
- `unload` 라는 이벤트가 발생하면, 현재 있던 페이지를 `unload`를 시킨다.
- `window.beforeunload` 함수를 통해 `페이지를 나가시겠습니까?` 대화 창이 뜨는 원리.

- Redirect

- 요청한 URL에서 redirect를 시킬때 발생.
- 노란색 부분은 전부 network단계에서 일어남. JS 동작은 없다.

- AppCache

- 실제로 서버에서 데이터를 가져오기 전에, 브라우저 캐시에 저장된 정보가 있는지 확인.

- Processing

- 웹 페이지에 필요한 정보들 파싱. 렌더링을 모두 포함한 것!
- `domInteractive`, `domComplete`
- `document.readystatechange`에 관련된 함수. 찾아보세욥.

#### 브라우저 주요 구성 요소

<img src="https://i.imgur.com/kF7xiHF.png" width='50%'/>

<img src="https://i.imgur.com/W9uzxUI.png" width='50%' />

#### 렌더링 엔진의 동작 과정


1. 파싱
- HTML를 분석하고 이해.
- script를 만나면 파싱 멈추는 이유
- `document.write` 를 통해서 HTML에 영향을 끼칠 수 있기 때문에.
- 그래서 script 태그를 맨 끝에 두라는 것임!

2. DOM, CSSOM 변환
- 변환과정.
- 문법적인 해석을 마쳤다면, 실제로 사용할 수 있도록 메모리에 객체적인 구조로 변환.
- 브라우저가 사용할 수 있도록!

3. 렌더 트리 구축
- 각 엘리먼트가 css에서 정의한 특성을 머금게.

4. 렌더 트리 배치 (Layout 단계)

5. 렌더 트리 그리기
- 픽셀 단위로 그린다. (Paint 단계)
- 여러 레이어 합성. (Compositing 단계)
- 브라우저 내부에서 화면을 몇가지 레이어로 구분하는데, 그 레이어다. (z index 아님.)

:::success
==이 모든 과정이 점진적으로 진행된다.==
- 한것들을 먼저 미리 보여주는 의미.
- 더 나은 사용자 경험을 위해!
:::

---

## HTML5은 어떤 의미인가

### Semantic HTML

- HTML 본연의 목적에 해당된다!
- ==**HTML 엘리먼트와 속성, 속성값은 특정한 의미를 지니도록 정의되어있다.**==
- 의미를 가진 태그를 사용.

**참고**

1. 점진적 향상
- 필수적인 정보

2. 우아한 성능 저하
- 꼭 필요하지 않는 정보.

---

## CSS3은 없다

<center><img src="https://i.imgur.com/RqX7qUb.png" width="50%"/></center>

### Layout

<center><img src="https://i.imgur.com/yqoC7kP.png" width="50%"/></center>

### Flex

<center><img src="https://i.imgur.com/003hicd.png" width="50%"/></center>

- 부모에 flex 속성 부여.

<center><img src="https://i.imgur.com/VDqUpiZ.png" width="50%"/></center>

- 해당 부모에 자식들은 자동적으로 flex가 먹음.

<center><img src="https://i.imgur.com/QUFw7tl.png" width="50%"/></center>

- default가 `flex-direction: row` 인데, 이 **row**는 물리적인 값이 아니라 **논리적인 값**.
- **row가 화면에서 수평방향이라고 생각하지 말자.**
- 즉, **==글쓰기 방향==과 일치한다.**

==**정리**==
<center><img src="https://i.imgur.com/JvEt55E.png" width="90%"/></center>

### 논리적 프로퍼티와 값

<center><img src="https://i.imgur.com/CacagzI.jpg" width="100%"/></center>

- 다국어 지원 예정인 서비스라면 무조건 고려해야하는 사항이다!

### 선택자
<center><img src="https://i.imgur.com/wOOXxVH.png" width="80%"/></center>


- 엘리먼트 선택자
- 타입 선택자: HTML를 바로 선택
- 수도 엘리먼트: **가상 엘리먼트**, 콜론이 두개!

- 속성 선택자
- 아이디 / 클래스 선택자: 직접 선정.
- 수도 클래스: 실제로는 없지만 / _특정 상황에서 적용되는 속성들._
- 속성 클래스: 해당하는 모든 태그들에 적용.

### 마진 병합

<center><img src="https://i.imgur.com/oSF0wiE.png" width="80%" /></center>

- 수직으로 인접한 마진이 더 큰쪽으로 병합되는 현상.

- 위와 같은 상황에서 `Child` 가 `Parent` 안에 들어가게 된다면 어떻게 될까?

==아마도 이렇게 예상하겠다.==

<center><img src="https://i.imgur.com/UBwjrAV.png" width="50%" /></center>

==**하지만, 실제는 아래와 같다.**==
<center><img src="https://i.imgur.com/dR9ZfKf.png" width="50%" /></center>

**아래 설명 참고**


- `Parent`의 마진이 `Child` 에 포함되었다.

---

## Javascript 자주 하는 실수부터 콜백 지옥까지

### 어휘적 환경 - Lexical Environment

<center><img src="https://i.imgur.com/xjXIbPR.png" width="60%" /></center>

- Lexical Environment: 변수나 함수, 식별자가 어떤 값을 가지고 있는지 볼 수 있는 곳.

<center><img src="https://i.imgur.com/wg9azvY.png" width="70%" /></center>

- Global Lexical Env
- 2가지 값이 존재한다.
- Env Record: 전역 식별자들의 정보들이 저장됨.
- outer: 나보다 밖에 있는 Lexical Env ... 전역이므로 null.

### 실행 컨텍스트 - Execution Context

#### 정의
- 자바스크립트 코드가 실행되는 환경.
- 모든 자바스크립트 코드는 실행 컨텍스트 내부에서 실행된다.
- 3가지 종류가 있다.

<center><img src="https://i.imgur.com/tiTdLNl.png" width="60%" /></center>

==**모든 스크립트 코드는 전역 실행 컨텍스트에서 실행된다**==

1. 전역 실행 컨텍스트
2. 함수 실행 컨텍스트
3. eval 함수 실행 컨텍스트
- 문자열로 된 자바스크립트 코드를 전달하면 수행... 없다고 생각해라

:::success
예시 코드를 보며 정리해보자.
:::

<center><img src="https://i.imgur.com/oXfPpZH.png" width="70%" /></center>


- 8번째 줄을 수행하고 나서야 비로소 `hello` 함수의 실행 컨텍스트가 생성된다.
- 그 전에는 전역 실행 컨텍스트만 존재하는 것.
- 먼저 **전역 실행 컨텍스트**가 어떤 것들로 구성되어 있는지 살펴보자.


- **모든 실행 컨텍스트의 ==구조==는 같다.**
- 실행 컨텍스트는 **3가지**로 구성되어 있다.
- Function
- 해당 실행 컨텍스트가 함수의 실행으로 만들어진 것이라면, 그 함수 객체를 가르킨다.
- 전역 실행 컨텍스트는 함수의 실행으로 발생한 것이 아니므로 `null`.
- Lexical Env
- 실행되는 환경의 정보를 가지고 있다.
- Env Record(아래 찐한 파랑색 2개 박스)와 outer(청록색 박스)로 구성되어 있다.
<img src="https://i.imgur.com/Y6o1vHA.png" width="60%"/>
- 전역 컨텍스트에서 코드를 수행할때, 2번째줄, 8번째줄처럼 변수나 함수를 찾으면, 실행 컨텍스트는 Lexical Env를 참고하여 수행한다.
- **전역 컨텍스트의 함수를 더 자세히 알아보자 (찐한 파랑 2번째 박스)**
- **함수**는, **실행 컨텍스트**를 만들 수 있는 객체이기 때문에, 특별한 것을 만든다.
- Environment라는 속성을 만든다.
- 이 공간에는 자신이 선언될때, 만들어질때 속해있던 Env record를 적어둔다.
- 즉, 전역 컨텍스트 Lexical Env와 같다.

- **8번째 줄에서 `hello` 함수를 실행했을때, 아래처럼 동작한다.**
<center><img src="https://i.imgur.com/vWiSuXs.jpg" width="70%"></center>
- `hello` 함수 내부의 Function은 자기 자신을,
- `hello` 함수 실행 컨텍스트의 Lexical Env의 outer는 전역 컨텍스트의 Lexical Env를 가르킨다.

- Variable Env

### 어휘적 범위 - Lexical Scope


- 5번째 줄에서 `greeting` 변수에 접근 할 수 없다.
- 해당 변수는 2 ~ 4번쨰 줄에서만 접근 가능하니까.

### 클로저 - Closure


- 9번째 줄에서 `hello` 함수를 사용하게 된다면 `hello` 실행 컨텍스트가 생성된다.


- `hello` 함수는 익명 함수를 반환한다.
- 반환된 함수는 전역 컨텍스트의 `say` 에 저장된다.
- 즉, ==9번째 줄 `hello` 함수가 반환하는 4~6번째 줄이 `say` 에 저장된다.==

#### 그 `say` 함수를 실행한다면?
- 해당 함수의 env 속성은 say 실행컨텍스트의 outer이다.


- 10번쨰 줄에서 함수가 실행되면,
- 4~5 번째 줄이 실행된다.
- greeting 변수를 찾는다.
- 하지만 현재 `say` 함수의 실행 컨텍스트에는 `greeting` 변수가 존재하지 않는다.
- 그래서 `outer` 를 참고한다.
- `outer`는 `hello` 실행 컨텍스트이기 때문에, 해당 실행 컨텍스트에서 찾는다.
- 정상적으로 출력된다!

#### 주의할 점

- 함수의 실행 컨텍스트는, 해당 함수가 실행하면서 발생하고, 함수가 종료되면 사라진다.
- 따라서 `hello` 실행 컨텍스트는 9번째 줄에서 `hello` 를 실행하고 사라져야함.
- 하지만 그렇지 않다.
- 왜?) `say` 라는 전역 컨텍스트에 `hello` 실행 컨텍스트가 참조되어 있기 때문에 없어지지 않는다.
- 10번째 줄에서 `say` 를 수행하며 참조한다.

#### 신기방기

- 11번째줄에서 `hello` 를 또 실행해도, 10번째 줄에서 생성한 실행 컨텍스트와 다르다.
- 함수의 실행 컨텍스트는 함수를 실행할때마다 새롭게 생성되기 떄문이다.

#### 정리

- 함수는 자기 자신이 선언될떄의 Lexical env를 env 변수에 저장하고 있다가
- 실행 컨텍스트를 생성할때 outer에 그걸 넣어둔다.
- 따라서 자기가 속해있던 실행 컨텍스트를 참조할 수 있다.

### 비동기 자바스크립트

- 자바스크립트의 동작 원리
- 싱글 스레드 언어.
- 이벤트 루프를 통해 비동기 처리.
- 콜백 지옥

#### 이벤트 루프

- 동시성 처리 모델의 기본 원리.
- [이 곳](https://velog.io/@ghdtjrrl94/FE-%EC%A7%80%EC%8B%9D5.-Callstack%EA%B3%BC-Event-Loop)에 잘 정리해 두었음.

#### Promise, async, await

##### Promise


- 역시 콜백을 쓰지만, 콜백 지옥을 완화해준다.
- then은 성공시, catch는 실패시에 쓰도록 하자.
- then에서 2번째 인자로 실패시 사용은 가능하다.