이틀 걸음 | JS Deep Dive, 클로저에서 익숙한 리덕스가 느껴진다

✅ 이틀의 요약

- JS Deep Dive : 왜 JS를 탄탄히 해야 하는지를 피부로 느낀 이틀이었다. 자바스크립트를 공부하니 리액트, 리덕스의 실행 원리가 느껴진다.

 

- 쭉 한 번 훑어보고 있는데, 스스로 개념 정리는 이틀에 걸쳐 진행해야겠다.

---

✍🏻 오늘의 개발 공부 키워드

1. (23장) 실행 컨텍스트 : 코드를 가지고 실행 컨텍스트 그릴 수 있어야 한다.

- (p 360) 평가 단계에서 실행 컨텍스트를 생성한다

- (p 364) 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역.

- (p 364) 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리, 코드 실행 순서는 실행 컨텍스트의 스택으로 관리

- (p 367) 렉시컬 환경 = 환경 레코드 (현재 컨텍스트에서 선언된 변수들 정보 수집) + 외부 렉시컬 환경 참조 (상위 스코프 참조하는 객체)

- 실행 컨텍스트 생성, 코드 실행 결과 관리 등은 계속 익숙해지자.

2. (22장) this

- (p 343) this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. this 바인딩은 함수를 어떤 식으로 호출하냐에 따라 달라진다.

- (p 346) 일반 함수에서, 메서드에서, 생성자 함수(constructor) 내에서, 화살표 함수에서, 이벤트가 일어날 때 this가 어떻게 바인딩되는지.

 : 일반 함수 -> 전역 객체 window

 : 메서드 : 메서드 호출한 객체

 : 생성자 함수 : 생성자 함수가 생성할 인스턴스(새로 생성되는 객체)

 : 화살표 함수 : 바로 바깥쪽의 인스턴스(상위 스코프의 this)

 : 이벤트 일어날 때 (이벤트 리스너) : 이벤트가 동작하고 있는 곳 (e.currentTarget)

3. (24장) 클로저

- (p 388) 함수가 선언될 시점에 클로저가 생긴다.

- (p 393) 외부 함수, 내부 함수가 존재하는 경우에,

 : 내부 변수를 참조하는 함수가

 : 외부 함수의 실행 컨텍스트가 종료되었음에도 참조할 수 있는 경우를 클로저라고 한다.

 : 외부 함수는 이미 끝나고 실행 컨텍스트 스택에서 pop 되어 제거되었는데

 : 내부 함수의 [[Environment]]가 outerLexicalEnvironment를 바라보고 있으니

 : 이미 스택에서 pop 된 외부 함수의 변수를 참조할 수 있다.

- (p 395) 어떻게 그럴 수 있는가!!!!

 : 외부 함수의 렉시컬 환경이 내부 함수의 [[Environment]] 내부 슬롯에 의해 참조되고 있기에,

 : 외부 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서는 제거되지만

 : 외부 함수의 렉시컬 환경까지 소멸하는 것은 아니다.

 

- (p 401) 클로저는 상태(state)를 안전하게 변경/유지를 위해 사용한다.

 : 상태를 안전하게 은닉(information hiding)하고, 특정 함수에게만 상태 변경을 허용하기 위해 사용

 

- (p 405) 변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있다.

불변성을 지향하는 함수형 프로그래밍에서 오류를 피하고 프로그램의 안정성 높이기 위해 클로저 사용된다.

 : 리덕스가 이 개념을 따온 건가 봐!!!!!!!!!!

 : 변수를 직접 접근하는 것이 아니라, 보조 함수를 전달해서 호출함

 : 여기서 보조 함수는, 상태 변경을 관리한다. 이 보조 함수를 통해서만 변수의 상태를 변경할 수 있다!

 

=================

(아래는 내일 정리하기)

4. (25장) 클래스

5. (27장) 배열

6. (28, 29장) Number, Math

7. (30장) Date

8. (31, 32장) RegExp (정규표현식), String

9. (33장) Symbol

10. (38장) 브라우저 랜더링 과정

11. (39장) DOM

---

💭 생각 넓히기

- 오늘의 생각

나무가 자라기 위해서는 씨앗을 심는 행동을 하고 기다려야 한다.

다만, 토양의 상태에 따라 씨앗이 자라나는 결과는 천차만별이다.

 

항상 아이들에게 강조하던 개념이었는데 정작 내가 놓치고 있었던 부분이 참 부끄러우면서도 깨닫게 되어 기쁘다.

왜 씨앗이 잘 자라지 않는지만 조바심을 내며 새싹을 잡아당기려고만 하진 않았는지.

 

면접 준비를 하며 부족했던 부분을 채우고자 했던 부분이, 내가 놓치고 있었던 본질을 다시금 알려주는 시간이었다.

- 그에 대한 나의 생각

이 책(모던 자바스크립트 딥 다이브)을 6월에 처음 접했을 땐 너무 어렵다고만 생각했는데,

약 3~4개월이 지난 지금의 시점, 많이 성장한 내가 느껴진다 :)

단순히 자바스크립트의 동작 원리만 아는 것을 넘어,

왜 리액트와 리덕스가 그렇게 움직일 수밖에 없었는지를 조금 더 이해하는 시간이 되고 있다.

 

불과 2주 전만 해도 리덕스 때문에 골치가 아팠던 나는....

오모나 오모나 나를 그렇게 힘들게 한 친구가.....

 

얼른 1 회독 마무리하고 다시 리액트와 리덕스를 바라보면 어떻게 보일지 정말 설렌다.

- 내가 바라는 것

🍊 무엇이든지 이해하고 설명할 수 있는 나.

나에게 주어진 시간이 얼마 남지 않았다. 집중해서 나아가자!

---

💖 가치 높이기

- 잘한 점 칭찬하기 : 집중력을 높이기 위해 중간중간 자주 쉬어주기! 
- 아쉬운 점 : 오늘도 시간을 아쉽게 쓴 점은 없이 만족스러운 하루였다! :) 
- 어떻게 개선할 수 있을까? : 의식적으로 머리를 환기시키는 부분이 만족스럽다. 주말 간 더욱 바쁘게, 기본에 충실하며 해낼 수 있다는 마음으로 나아가자! 내일 공부하고 나면 또 얼마나 성장해있을지가 기대되는 요즘이다.🍊