property get lengthclass Fx implements Iterable { /** * @description evaluates the iterable and returns the length of the array (O(n)) * @returns {number} the length of the array */ get length(): number { return this.toArray().length; }}Fx 클레스에 length 프로퍼티를 추가합니다. length 프로퍼티에 접근하게 되면 평가가 진행되어 O(n)의 시간 복잡도를 가지게 됩니다.왜 O(n)의 시간복잡도를 유지하는가?github copilot의 코드리뷰입니다.src/Fx.ts:62Using toArra..

이번 장에서는 함수형 유틸리티의 대표적인 고급 함수 중 하나인 group 함수를 구현하고,기존에 하나로 묶여 있던 Fx 클래스와 각 함수들을 모듈 단위로 분리하는 리팩토링을 진행했습니다.1. group 함수란?group은 주어진 키 생성 함수에 따라 데이터를 그룹핑하여 Map 형태로 반환하는 함수입니다.기본적으로 다음과 같은 역할을 수행합니다.group([{ age: 20 }, { age: 30 }, { age: 20 }], x => x.age)// Map {// 20 => [ { age: 20 }, { age: 20 } ],// 30 => [ { age: 30 } ]// }함수형 프로그래밍에서는 reduce를 사용해서 구현할 수도 있지만,이번에는 이터러블 기반 구현 + 타입 안정성을 고려해 gr..

자동으로 커버리지를 측정하고, PR마다 뱃지를 생성해주며, 커버리지 변화량을 댓글로 알려주는 개발 환경을 만들자지연 평가(lazy evaluation)와 이터러블 기반 연산자의 안정성을 위하여 테스트 코드를 작성합니다. 테스트 코드와 더불어 테스트 커버리지를 기록하기 위해 github workflows를 작성합니다.Jest기반 테스트 코드 작성coverage-final.json을 파싱하여 SVG 뱃지 생성변경된 뱃지가 있을 경우 GitHub에 자동 커밋PR에 커버리지 변화량을 자동으로 댓글로 남기기1. jest 세팅테스트 프레임워크로 Jest를 사용합니다. 타입스크립트 환경에서는 ts-jest 프리셋과 타입 정보를 함께 설정합니다.// jest.config.tsimport type { Config } f..

0. 프로젝트 구조 및 라이브러리├── jest.config.ts├── package.json├── tsconfig.json├── /src│ ├── index.ts│ └── index.spec.ts사용한 라이브러리 (devDependency)"@types/jest": "^29.5.14","jest": "^29.7.0","ts-jest": "^29.3.2","ts-node": "^10.9.2","typescript": "^5.8.3"1. Fx 클래스 도입export class Fx implements Iterable { constructor(private iterable: Iterable) {} [Symbol.iterator]() { return this.iterable[Symbol.ite..

함수형 프로그래밍을 공부하다 보면, Lodash나 Ramda과 더불어 최근에 공개된 es-toolkit 같은 라이브러리를 통해 여러 개념을 체험하게 됩니다.Functional Programming 시리즈에서 타입스크립트 기반으로 함수형 유틸리티 라이브러리 fx를 직접 설계하고 구현해보고자 합니다.1. 함수형 프로그래밍이란?함수형 프로그래밍은 수학적 함수 개념에 기반하여, 상태 변화와 부작용(side effect)을 최소화하고 데이터 흐름을 함수 조합으로 표현하는 프로그래밍 패러다임입니다.중심 개념은 다음과 같습니다:불변성 (Immutability): 데이터는 변경되지 않고, 항상 복사본을 리턴순수 함수 (Pure Function): 같은 입력에 대해 항상 같은 결과를 리턴고차 함수 (Higher-orde..

react를 이용한 textarea의 값을 엔터키를 이용해서 제출하는 로직을 작성하는 와중에 엔터를 통해서 값이 제출은 잘 되지만 textarea에 엔터가 한 번 더 입력되어 사용자 경험이 나빠지는 현상이 발생하였다. 물론 전송 버튼(button)을 통한 제출에서는 text가 빈 문자열로 잘 적용되었다. 해결 방법 코드 생략... const handleKeyPress = (event: any) => { if (event.key === "Enter") { event.preventDefault(); // ✅ 이 코드를 추가하여 엔터키를 방지한다. handleSubmit(); // 필요에 따른 로직을 추가. } }; 생략... return ( 생략... {/* styled-component로 선언한 texta..