[React] Day_26 데일리 정리

 

금요일!!!! 오늘은 무조건 칼퇴지.

 

내일은 드디어 주말... 그리고 오랜만에 부모님 뵈러가는날...

(림졍은 본가에 못내려간지 벌써 1달정도 되었다.)

맛있는거 먹는 행복한... 주말보단 아마 가족행사때문에 바쁠예정이지만? (실은 집에서 굉장히 쉬고싶... 아닙니다.)

여튼 오늘은 빠르게 특강정리 하고 한주 마무리 지어보갔읍니다.

console.log (G_A_B_O_J_A_G_O);

.

.

.

// 오류! 오류!  G is not defined (ㅜㅜ)

 

 

 

 

 

싱나는(?) 특강정리 ^-^)b

 

달리기반 특강정리

클로...저... clo... sure(진짜에여?)?? ㄴㅇㄱ;

 

클로저_메커니즘에_정신이_혼미해진 림졍.jpg

 

 

실행 컨텍스트 (Execution Context)

 

 

실행 컨텍스트

 

코드를 실행에 필요한 환경 제공 객체

( = 코드 평가 및 실행에 필요한 정보를 저장하는 공간)

 

코드 동작 2가지 단계

 

complie(평가 단계): 레코드 수집(호이스팅) 및 상위 스코프(Outer) 결정

runtime(실행 단계): 함수 실행 시 Call Stack에 push → 변수에 값 할당

 

구성요소 (3)

 

- Variable Environment (VE) : 평가 단계에 필요한 환경. (변수, 메모리에 할당됨)

- Lexical Environment (LE) : 실행 단계에서 사용하는 공간. (VE를 바탕으로 변수 참조 및 값 할당)

LE 구조형태 이미지 [강의자료 참고]

• Record : 선언된 변수, 함수, class 등 기록
• Outer : 상위 스코프를 가르키고 있는 공간 (= 스코프 체인) 형성

function outerFn(param) {
  let outerVar = "Outer변수";
  console.log(param);

  function innerFn() {
    console.log(outerVar);  // outerVar를 참조
  }

  innerFn();
}

outerFn(10);

 

- this binding : 다들 아시죠 ^-^? (모르면... [ 이곳 ]으로...)

 

 

 

이벤트 루프 (Event Loop)

 

 

이벤트 루프

 

Call Stack & Queue 관리하면서 순차적인 코드 실행을 위한 비동기 처리 메커니즘 

+) Micro Task Queue(마이크로 테스크 큐)가 Call Stack Queue(콜 스택 큐)보다 높다!

이해를 돕기 위한 이미지 자료 첨부 [강의자료 참고]

 

주요 구성 요소

 

- Call Stack(콜 스택) : JS 코드 실행

- Callback Queue (콜백 큐) : 비동기 작업 완료 후 콜백 함수 대기공간

- Web APIs : 비동기 작업 처리하는 브라우저 API 모음  ( ex) setTimeout, fetch, addEventListener )

- Task Queue (태스크 큐) :  setTimeout, setInterval, fetch, addEventListener 등의 콜백함수 들어가는 공간

- Micro Task Queue (마이크로태스크 큐) : promise.then, MutationObserver 등의 콜백 함수가 들어가는 공간

- Event Loop (이벤트 루프) : Call Stack, Callback Queue 모니터링

 ( If Callback 비어 있다, Callback Queue에서 콜백 함수 가져와 실행)

 

- 예제 1)

console.log("1. Start");

setTimeout(() => {
  console.log("2. Timeout callback");
}, 0);

Promise.resolve().then(() => {
  console.log("3. Microtask");
});

console.log("4. End");

//[정답] 1 4 3 2 순으로 출력

 

- 예제 2)

console.log("1. Start");

setTimeout(() => {
	console.log("2. setTimeout")
}, 0)

fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(res => {
	console.log("3. fetch 실행완료!")
})

Promise.resolve().then(() => {
    const currentTime = Date.now();
    while (Date.now() - currentTime < 3000) {}
  console.log("4. Microtask");
});

console.log("5. End");

// [정답] 1 5 4 2 3 순으로 출력
// 2 3의 경우, fetch 응답 시간에 따라 순서 바뀔 수 있음

 

 

클로저 (closure)

 

 

클로저

 

함수와 함수가 선언된 LE(렉시컬 환경)과의 조합 (??????)

 

아니 그런게 가능하다고요???? ((웅성웅성))

 

아니 이게 가능하다고? 네. (쌉가능.)

외부 함수의 실행 컨텍스트가 사라져도 내부 함수, 외부 함수 변수에 접근가능

( = 외부 함수(변수)를 참조하는 내부 함수 )

 

예제 1)

function outerFn() {
  let outerVar = "외부함수의 변수";

  function innerFn() {
    console.log(outerVar);  // 외부 함수의 변수를 참조
  }

  return innerFn;
}

const closureFunc = outerFn();  // innerFn 반환되며 클로저 생성!
closureFunc();

 

예제 2)

function outerFn(x) {
  const outerVar = x;

  function innerFn(y) {
    return outerVar + y;
  }

  return innerFn;
}

const addFive = outerFn(5); // 클로저 생성!
console.log(addFive(3));
console.log(addFive(10));

 

 

여담 - 나름 익숙했던(?) 클로저

 

그거 아세여? 우리는 이미 클로저를 많이 이용하고 있었다는거..

엥..? 하고 싶지만 놀랍게도 진짜였다. ((동공지진))

자 아래의 예시를 보도록 하자. 뭔가 익숙할 것이다.

let a = "전역 변수";

document.querySelector(".btn").addEventListener("click", function() {
  console.log(a);  // 전역 변수 참조
});

 

진짜 프로젝트때 열심히 썼던거 같은데.. 버튼 딸깍딸깍.. 클릭클릭...

그래서 조금 신기했었다.. 뭐 여튼 그렇다고... ㅇㅅaㅇ...

 

 

추가)

여어기서 질문. 함수가 함수를 return 시, 항상 클로저 환경이 생성되는가?

nope.  내부함수가 외부 함수의 변수 or 함수 참조하고 있을때만 생성이 되니 참고하자.

 

예시) - closure 생성이 안되는 경우

function outer() {
  return function inner() {
    console.log("No outer variable accessed");
  };
}

const nonClosureFunc = outer(); // 클로저가 생성되지 않음
nonClosureFunc(); // "No outer variable accessed"
// inner, outer의 변수에 접근하지 않으므로 생성 X

 

 

 

마무리 - Goodbye JS, Hello... React! d(^-^)b

 

반가ㅇ...아니 안반가...워.. 아니 반가워.(?)

 

드디어 JS랑 안녕하는날! (이얏호) 그리고 월요일부터 리액트 배우는날 (느헝헝)

JS 가 끝나서 이제는 안하겠지 히히 하고 했더니... React의 설명이

자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용된다.

... 이런 ^-^; 그래서 열심히 JS하라고 했던거였구나..?

(아직도 잘 모르겠는데 쳇)

담주에 나가기 전까지 복습...할 수 있으면 하고

일단 이번 주말 스탠다드는 자리비움임. 암튼 그럼.

 

 

 

 

Oh-neul 의 KPT 회고

• Keep :  오늘도 빠르게 칼퇴하도록 TIL도 야무지게 작성!
• Problem : 복습을 안해서 배웠던거 자꾸 까먹는다. 그러고 맨날 나중에 아! 하는편.
• Try : 계속 보면서 코드랑 친해지기... 그리고... 복습도.. 열심히!

 

- The End -