[Javascript] 실행 컨텍스트 복습

소스코드의 평가와 실행- 소스코드 평가 - 실행 컨텍스트 생성 - 변수, 함수 등의 선언문 실행 -> 렉시컬 환경의 환경 레코드에 등록 - 소스코드 실행 (런타임) - 실행에 필요한 정보를 렉시컬 스코프에서 검색 실행 컨텍스트의 역할1. 코드 실행 순서 관리 - 실행 컨텍스트 스택으로 관리 - 현재 실행 중인 코드의 실행 순서를 변경 가능(ex 함수 호출에 의한 실행 순서 변경) 2. 스코프 관리(식별자 관리) - 렉시컬 환경으로 관리 - 선언에 의해 생성된 모든 식별자를 스코프를 구분하여 등록 - 스코프는 중첩 관계에 의해 스코프 체인을 형성 -> 상위 스코프로 이동하며 식별자 검색 가능 실행 컨텍스트 스택> 코드의 실행 순서를 관리> 소스코드 평가 -> 실행 컨텍스트 생성 -> 실행 ..

• format_list_bulleted FE/Javascript
• · 2025. 9. 7.
• textsms

[Javascript] this 복습

this 개념- 자신이 속한 객체, 자신이 생성할 인스턴스를 가리키는 식별자 (자기 참조 변수)- this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.- 자바스크립트 엔진이 암묵적으로 생성함 호출 방식에 따른 this 바인딩1. 객체 리터럴 → 메서드를 호출한 객체를 가리킨다const circle = { radius: 5, getDiameter() { return 2 * this.radius; }}console.log(circle.getDiameyer()); // 10 2. 생성자 함수 → 생성자 함수가 생성할 인스턴스를 가리킨다function Circle(radius) { this.radius = radius;}Circle.prototype.getDiameter = function(..

• format_list_bulleted FE/Javascript
• · 2025. 8. 4.
• textsms

[Javascript] 프로토타입 복습

프로토타입 개념- 자바스크립트는 프로토타입을 기반으로 상속을 구현 -> 코드 재사용에 용이- 생성자 함수는 동일한 프로퍼티(메서드 포함) 구조를 갖는 객체를 여러 개 생성할 때 유용- 생성자 함수에서 this로 할당된 프로퍼티,메서드는 인스턴스가 생성될때 할당된다.// 아래 Circle 생성자 함수의 getArea는 모든 인스턴스가 가지는 메서드 이므로 메모리 낭비가 됨function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; }}// 프로토타입을 이용한 getArea 중복 제거// 모든 인스턴스는 getArea 메서드를 공유함function Circle..

• format_list_bulleted FE/Javascript
• · 2025. 7. 29.
• textsms

[React 까보기] 5. setState (feat. dispatchAction)

useState를 호출한다는 것은 mountState 함수를 호출하는 것과 같다는 것을 이전 포스팅에서 알아보았다.따라서 우리가 잘 알고있는 setState를 통해 상태를 업데이트 하는 과정은 dispatch 함수를 분석한다면 알 수 있을 것 이다.위에서 말한 dispatch 함수에는 dispatchAction.bind() 함수의 값이 할당 되어 있으므로 dispatchAction을 분석해보겠다.1️⃣ dispatchAction 함수 function dispatchAction( fiber: Fiber, queue: UpdateQueue, action: A,) { // 3. update 소비중 다시 update 발생 // renderWithHooks 내부에서 1씩 증가시켰던 numberOfRere..

• format_list_bulleted FE/React
• · 2025. 6. 11.
• textsms

[React 까보기] 4. useState 의 구현체

이전 포스팅(3. Hook 구현체 찾아가기) 에서 renderWithHooks 내부의 ReactCurrentDispatcher.current = HooksDispatcherOnMount 를 확인하였고,HooksDispatcherOnMount 에서 mountState를 발견하였다. 이때 mountState를 분석하면아래에 나올 hook, queue, update 객체를 살펴볼 수 있다.0️⃣ mountState()function mountState( initialState: (() => S) | S,): [S, Dispatch>] { // 1번 const hook = mountWorkInProgressHook(); // 초기 state if (typeof initialState === 'fun..

• format_list_bulleted FE/React
• · 2025. 6. 11.
• textsms

[React 까보기] 3. Hook 구현체 찾아가기

1️⃣ useState가 코드로 정의된 곳은 어디일까? Reconciler 까지 찾아가기!react 코어 → ReactHooks.js 모듈 → ReactCurrentDispatcher 모듈 → current:null 인 객체가 끝?(리액트 코어 패키지는 react 요소에 대한 내용만 포함할 뿐 훅을 구현하고있지 않다.)Render Phase에서 VDOM으로 리액트 요소가 올라갈때 hook에 대한 정보를 포함하게 된다. (리액트 요소가 Fiber로 확장되기 전에는 필수적인 정보만 포함한다)VDOM에 재조정 하기 위한 과정중 하나인 Fiber로 확장하는 작업은 Reconciler가 Render Phase에서 수행하게된다.따라서 Reconciler가 hook에 대한 정보를 알 수 있을것이라 추측하고, Reco..

• format_list_bulleted FE/React
• · 2025. 4. 26.
• textsms