Javascript

개요 Array.prototype.reduce는 배열을 하나의 값으로 축약하는 표준 API 배열의 각 요소에 대해 리듀서 함수를 순차 실행하고 누산기 값을 반환 집계, 변환, 그룹핑, 파이프라인 구성 등 다양한 패턴에 사용 구문 arr.reduce(callback[, initialValue]) callback에 누산 로직 정의 initialValue가 있으면 누산기의 시작값으로 사용, 없으면 배열의 첫 요소가 시작값 매개변수 callback(accumulator, currentValue, currentIndex, array) accumulator: 누산된 값 currentValue: 현재 요소 값 currentIndex: 현재 인덱스 array: 원본 배열 initialValue (옵션) 누산기의 초기값 제공하지 않으면 배열 첫 요소가 초기값이 되어 콜백은 두 번째 요소부터 시작 반환값 축약 결과로 얻은 최종 누산값 동작 방식 왼쪽에서 오른쪽으로 순회하며 callback을 한 번씩 호출 initialValue 미제공 빈 배열이면 TypeError 발생 요소가 하나뿐이면 그 요소를 그대로 반환하며 callback은 호출되지 않음 initialValue 제공 배열이 비어 있어도 initialValue를 그대로 반환하며 callback은 호출되지 않음 희소 배열의 빈 슬롯은 건너뜀 누산기는 어떤 타입도 가능하며 객체, 맵, 프라미스 등으로 확장 가능 주의 사항과 베스트 프랙티스 가능한 항상 initialValue 지정 권장 빈 배열 입력 시 예외 방지, 타입 안정성 확보 누산기 불변성 유지 권장 객체 누산 시 얕은 복사 또는 구조 분해 사용 고려 콜백은 순수 함수 지향 외부 상태 변경 최소화, 테스트 용이성 확보 읽기 어려운 과도한 축약 로직은 map, filter, for…of 등으로 분리 고려 희소 배열에서 빈 슬롯은 콜백이 호출되지 않음에 유의 오른쪽에서 왼쪽으로 처리해야 하면 reduceRight 사용 간단 예시 합계 계산 ...

개요 TypeScript의 declare 키워드는 외부에서 이미 구현된 값의 타입 정보를 컴파일러에 알려주는 용도임 실제 구현은 다른 런타임 환경이나 스크립트에 존재하고, TypeScript는 타입 검사만 수행함 선언은 자바스크립트 코드로 출력되지 않음 핵심 개념 declare function: 외부에 존재하는 함수의 시그니처만 제공하는 선언 사용 위치: 주로 .d.ts 선언 파일, 필요 시 .ts에서도 가능하지만 빌드 결과물에는 코드가 생성되지 않음 목적: 컴파일 타임에 타입을 인지시켜 오류를 줄이고, IDE 보조 기능을 활성화함 언제 사용하나 타입 정보가 없는 외부 자바스크립트 라이브러리 사용 시 글로벌로 노출된 함수나 변수를 TypeScript가 모를 때 JS와 TS 혼용 프로젝트에서 점진적 마이그레이션을 진행할 때 예시 글로벌 함수 선언 // 이미 어딘가에서 구현된 전역 함수가 있다고 가정 // my-globals.d.ts declare function myGlobalFunction(msg: string): void이렇게 선언하면 TypeScript가 함수 존재와 시그니처를 인식함 ...

개요 값 복사에서 가장 흔한 실수는 얕은 복사와 깊은 복사의 차이를 간과하는 것임 이 글은 JSON 해킹이나 라이브러리 대신 브라우저와 런타임이 제공하는 structuredClone으로 깊은 복사를 안정적으로 수행하는 방법과 주의점을 정리함 얕은 복사 JavaScript의 전개 연산자 …로 만드는 복사는 기본적으로 얕은 복사임 겉 모양과 1단계 속성은 복제되지만 중첩된 객체는 동일 참조를 공유함 const myOriginal = { someProp: "with a string value", anotherProp: { withAnotherProp: 1, andAnotherProp: true } } const myShallowCopy = { ...myOriginal } myShallowCopy.aNewProp = "a new value" console.log(myOriginal.aNewProp) // ^ logs `undefined` myShallowCopy.anotherProp.aNewProp = "a new value" console.log(myOriginal.anotherProp.aNewProp) // ^ logs `a new value` 기본형 값은 값 자체가 복사되지만 객체 같은 참조형은 레퍼런스가 복사됨 따라서 중첩된 구조를 안전하게 분리하려면 깊은 복사가 필요함 ...

개요 Ramda는 JavaScript와 TypeScript에서 함수형 프로그래밍을 실용적으로 적용하기 위한 유틸리티 모음집임 순수 함수, 불변성, 커링, 함수 조합을 일관된 인터페이스로 제공하며, 매개변수 순서를 함수 → 데이터로 통일해 조합과 부분 적용을 자연스럽게 만듦 이 글은 R.prop을 중심으로 Ramda 핵심 함수의 개념과 사용법, 타입 고려사항, 흔한 함정과 우회 전략을 정리함 R.prop 개념과 문법 목적과 동작 원리 객체의 특정 속성 값을 안전하게 조회하는 읽기 전용 도구 속성이 없거나 undefined일 수 있는 상황에서 런타임 예외 없이 undefined 반환 커링 지원으로 속성 이름을 고정해 재사용 가능한 픽커 함수 구성에 유리함 시그니처 ...

개요 SWC는 Rust로 작성된 초고속 TypeScript/JavaScript 컴파일러 겸 트랜스파일러 동일한 작업을 수행하는 Babel이나 tsc 대비 10~20배 수준의 성능 향상이 보고됨 Rust로 구현되어 JS 런타임 기반 도구 대비 낮은 오버헤드와 높은 병렬 처리 효율 확보 핵심 개념 목적 TS/JS 소스 코드를 목표 런타임에서 실행 가능한 코드로 빠르게 변환 특징 타입 체크 미포함, 변환에 집중해 극단적 속도 추구 적용 범위 컴파일 단계와 테스트 실행, 개발 서버 부팅, CI 빌드 가속에 유효 채택 사례 Next.js에 기본 통합됨, 서버 프레임워크에서도 선택지로 확산 중 ...

배열을 순회하는 방법은 여러 가지가 있음. 전통적인 for, Array.prototype.forEach, ES6 for…of, 그리고 객체 속성에 적합한 for…in. 여기에 forEach의 비동기 제어 한계와 값/참조 전달 의미 차이를 함께 정리함 개념/배경 자바스크립트에서 순회는 목적과 제약에 맞춰 선택하는 문제임 for 인덱스 제어, 경계 조건, 성능 미세 조정, 조기 종료 필요 시 유용 forEach 선언적 스타일, 반환값 없음, 조기 종료 불가, 비동기 완료 제어 불가 for…of 이터러블 값 순회에 적합, 인덱스 필요 없을 때 간결, await와 결합 가능 for…in 객체의 열거 가능 속성 순회용. 배열에는 권장하지 않음. 키 순서와 상속 프로퍼티 이슈 존재 이터러블과 이터레이터 프로토콜을 따르는 객체에 for…of를 적용 가능. 배열, 문자열, Map, Set 등이 대표적임 ...

개요 RxJS는 Reactive Extensions for JavaScript의 약자이며 비동기 데이터 흐름을 스트림 Observable로 다루는 라이브러리임 이벤트, API 응답, 클릭, WebSocket처럼 시간에 따라 변하는 값을 하나의 연속 흐름으로 모델링 가능 핵심 비교 Promise는 값 1개 처리 Observable은 값 0개부터 무한대까지 처리 Observable 핵심 정의 시간에 따라 변경되는 데이터를 push 기반 스트림으로 표현한 객체 구독 subscribe 시점에만 실행되는 lazy 특성 구독 해제 unsubscribe 시 리소스 정리 가능 특징 lazy 실행으로 불필요한 작업 방지 cancel 가능으로 누수 방지 0~무한개의 값 연속 처리 간단 예시 ...

개요 비동기는 강력한 도구임. 다만 배열과 스트림 같은 이터레이터와 결합되면 누가 무엇을 언제 기다리는지 불명확해지기 쉬움 핵심 포인트 세 가지 기억 완료 보장 확보했는지 동시성 제어를 명시했는지 백프레셔로 생산 속도 ≤ 소비 속도 유지했는지 비동기가 의도대로 동작하지 않는 케이스 forEach + async 사용 콜백이 반환한 프로미스를 외부가 수집하지 않음 → 완료 보장 깨짐, 레이스와 누락 가능성 증가 items.forEach(async (x) => { await doAsync(x) // 외부에서 기다리지 않음 }) map + async 이후 기다리지 않음 ...

개념/배경 객체 구조 분해 할당에서 프로퍼티 이름을 바꾸는 기본형은 { 기존프로퍼티명: 새변수명 } 형태임 사용법/예시 아래는 request 프로퍼티를 revealRequest라는 이름으로 받는 예시 const { request: revealRequest } = await client.doSomething({...})의미는 다음과 같음 doSomething이 반환하는 객체에서 request 프로퍼티 추출 추출한 값을 revealRequest 변수에 바인딩 아래 전개 코드와 동일함 const result = await client.doSomething({...}) const revealRequest = result.request왜 쓰는가 코드 간결화 필요한 프로퍼티만 선택 추출 문맥에 맞게 변수명 명확화, 의도 드러남 참고자료 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

개념/배경 한 객체의 상태 변화나 이벤트를 여러 객체가 자동으로 감지하고 반응하게 만드는 구조를 Observer 패턴이라 부름 발행자와 구독자의 관계로도 설명됨. Publisher가 이벤트를 내보내고 Subscribers가 이를 받는 흐름 핵심은 느슨한 결합과 자동 알림 흐름 유지 핵심 개념과 구성요소 Subject 또는 Observable 이벤트를 발생시키는 주체 Observer 목록을 관리 상태가 변하면 observers에 알림 전파 Observer 상태 변화를 알고 싶은 소비자 update 같은 콜백 보유 notify Subject가 모든 Observer에게 브로드캐스트하는 동작 동작 원리 Observer가 Subject에 구독 등록 Subject 상태 변화 발생 Subject가 notify 실행, 등록된 Observer의 콜백 호출 Observer는 전달된 값에 따라 자체 로직 수행 필수 인터페이스의 최소 형태는 아래와 같음 ...