전체 글

FP에서 함수 분리 단위

회사에서 일하던 중 기존 함수를 재사용하는 게 낫지 않냐는 말을 들었다. 나는 두 가지 이유 때문에 새 함수를 만들어야 한다고 생각했다. 첫째, 필요로 하는 데이터가 다르다. 새로 만들어야 할 함수는 기존 함수의 반환값의 부분집합이다. 따라서 인터페이스를 최소화하고 싶었다. 둘째로, 함수가 두 곳에서 쓰이면 추후 한 곳만 수정해야 할 때 수정이 힘들기 때문에, 즉 결합되어 있음, 새 함수를 만들어야 한다고 생각햇다. 이때 FP에서는 이런 경우에 어떻게 할까? 함수를 재사용해야 할 때 어떤 단위로 함수를 분리해야 할까라는 의문이 들었다. OOP에서는 다형성, 메소드 오버라이드 등을 통해 메서드를 재사용하고, SRP처럼 클래스의 변경 사유는 오직 하나여야 한다는 분리 단위가 정해져 있는 것 같기 때문이다...

[JS] Javascript에서의 Closures

1. 클로저란 클로저는 외부 함수에서 선언된 변수를 참조하는 내부 함수에서만 발생하는 현상이다. 클로저의 정의에 대해선 매체마다 저자마다 다르다. MDN에선 클로저를 "함수와 그 함수가 선언된 Lexical Environment의 조합"라 정의한다. 내가 생각하는 클로저의 제일 정확한 정의는 'A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).'이다.Lexical Environment는 함수가 선언될 당시의 모든 지역 변수를 포함한다. 선언된 당시의 Lexical Environment이란 실행 컨텍스트의 구성 ..

React 톺아보기 4. reconciler (2)

function performWorkOnRootViaSchedulerTask( root: FiberRoot, didTimeout: boolean,): RenderTaskFn | null { if (hasPendingCommitEffects()) { root.callbackNode = null; root.callbackPriority = NoLane; return null; } // Flush any pending passive effects before deciding which lanes to work on, // in case they schedule additional work. const originalCallbackNode = root.callbackNode; co..

React 톺아보기 3. scheduler (1)

reconciler에서 work를 microtask를 통해 schedule할때, scheduleCallback함수를 통해 performWorkOnRootViaSchedulerTask를 schedule하는 것을 보았다.const newCallbackNode = scheduleCallback( schedulerPriorityLevel, performWorkOnRootViaSchedulerTask.bind(null, root), ); react의 reconciler는 react element를 fiber로 확장시키는(mount, reconcile) 역할을 한다. 해당 fiber를 dom으로 이식하는 work를 schedule하는 것은 scheduler package가 하게 되는데, 이번..

React 톺아보기 2. reconciler (1)

react dom에서 render를 호출하면 reconciler의 updateContainer 함수가 호출되는 것을 보았다. function updateContainerImpl( rootFiber: Fiber, lane: Lane, element: ReactNodeList, container: OpaqueRoot, parentComponent: ?React$Component, callback: ?Function,): void { /* */ const update = createUpdate(lane); update.payload = {element}; // 반환된 root는 FiberRootNode const root = enqueueUpdate(rootFiber, update..

React 톺아보기 - 1. ReactDom

import React from 'react'import ReactDOM from 'react-dom/client'import App from './App'const rootElement = document.getElementById('root')const root = ReactDOM.createRoot(rootElement!)root.render( )먼저 시작은 ReactDOM.createRoot이다.리액트로 앱을 만들 때는, HTML 파일 안에 있는 특정 DOM element를 React의 루트로 삼아야 한다. 일반적으로는 처럼 HTML의 최상단에 위치한 element를 사용하지만, 꼭 그럴 필요는 없다.리액트는 앱 전체를 통째로 구성하는 경우가 많지만 페이지 일부만 리액트로 구현할 수도..

debounce와 throttle의 차이점

서론프론트엔드 개발을 하다 보면 스크롤 이벤트, 입력 처리, 윈도우 리사이즈 등 짧은 시간 내에 반복적으로 발생하는 이벤트를 효율적으로 제어할 필요가 생긴다. 이럴 때 가장 많이 사용하는 도구 중 하나가 lodash에서 제공하는 debounce와 throttle 함수이다. 프로젝트를 진행하며 성능 최적화를 위해 정확히 어떤 조건에서 실행되는지 궁금해졌고, 결국 실제 lodash 소스를 분석해보게 되었다. 이번 글에서는 그 분석을 바탕으로 두 함수의 동작 원리와 차이점을 정리해본다.Debounce 분석 lodash의 debounce와 throttle은 내부적으로 모두 debounce 함수를 기반으로 구성되어 있다. 따라서 먼저 debounce 함수의 흐름을 분석해보았다. function debounce(f..

ES2021에서 추가된 신기능 5가지

서론 JavaScript는 지속적으로 발전하는 언어로, 새로운 기능이 정기적으로 추가된다. ES2021에서는 보다 직관적이고 효율적인 코드를 작성할 수 있도록 다섯 가지 주요 기능이 도입되었다. 이번 글에서는 ES2021에서 추가된 기능들을 하나씩 살펴보고, 어떻게 활용할 수 있는지 알아본다.추가된 기능1. 논리 할당 연산자 (&&=, ||=, ??=) 기존에는 변수를 조건에 따라 할당할 때 if 문이나 삼항 연산자를 사용해야 했다. ES2021에서는 논리 연산자와 할당 연산자를 결합한 &&=, ||=, ??=가 추가되어, 보다 간결한 코드를 작성할 수 있다.&&= : 기존 값이 true일 때만 새로운 값을 할당한다.||= : 기존 값이 false일 때만 새로운 값을 할당한다.??= : 기존 값이 nul..