프로그래밍 공부/javascript & typescript(7)
-
[Functional Programming] 2장: iterator 함수 range 구현하기
함수형 유틸리티를 만들 때 빠질 수 없는 기본 도구 중 하나는 바로 range입니다.range는 원하는 숫자 범위를 순차적으로 생성해주는 반복기(iterator)이며, 지연 평가와 매우 잘 어울리는 함수입니다.이 장에서는 TypeScript에서 제너레이터와 함수 오버로드를 이용해 range 함수를 구현하고, 이를 테스트하는 과정을 설명합니다.range 함수란?range는 Python을 비롯한 많은 함수형 언어에서 기본 제공되는 기능입니다. range(5) → [0, 1, 2, 3, 4]range(2, 5) → [2, 3, 4]range(0, 10, 2) → [0, 2, 4, 6, 8]range(5, 0, -1) → [5, 4, 3, 2, 1]이러한 형태를 TypeScript에서 구현하면서도 이터러블을 ..
08:00:04 -
[Functional Programming] 부록: 테스트 커버리지와 GitHub Workflows
자동으로 커버리지를 측정하고, PR마다 뱃지를 생성해주며, 커버리지 변화량을 댓글로 알려주는 개발 환경을 만들자지연 평가(lazy evaluation)와 이터러블 기반 연산자의 안정성을 위하여 테스트 코드를 작성합니다. 테스트 코드와 더불어 테스트 커버리지를 기록하기 위해 github workflows를 작성합니다.Jest기반 테스트 코드 작성coverage-final.json을 파싱하여 SVG 뱃지 생성변경된 뱃지가 있을 경우 GitHub에 자동 커밋PR에 커버리지 변화량을 자동으로 댓글로 남기기1. jest 세팅테스트 프레임워크로 Jest를 사용합니다. 타입스크립트 환경에서는 ts-jest 프리셋과 타입 정보를 함께 설정합니다.// jest.config.tsimport type { Config } f..
2025.04.20 -
[Functional Programming] 1장: 기본 배열 함수 구현하기
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..
2025.04.19 -
[Functional Programming] 0장 들어가며: 타입스크립트 함수형 프로그래밍
함수형 프로그래밍을 공부하다 보면, Lodash나 Ramda과 더불어 최근에 공개된 es-toolkit 같은 라이브러리를 통해 여러 개념을 체험하게 됩니다.Functional Programming 시리즈에서 타입스크립트 기반으로 함수형 유틸리티 라이브러리 fx를 직접 설계하고 구현해보고자 합니다.1. 함수형 프로그래밍이란?함수형 프로그래밍은 수학적 함수 개념에 기반하여, 상태 변화와 부작용(side effect)을 최소화하고 데이터 흐름을 함수 조합으로 표현하는 프로그래밍 패러다임입니다.중심 개념은 다음과 같습니다:불변성 (Immutability): 데이터는 변경되지 않고, 항상 복사본을 리턴순수 함수 (Pure Function): 같은 입력에 대해 항상 같은 결과를 리턴고차 함수 (Higher-orde..
2025.04.17 -
[NextJS] nodemailer 이용하여 email 보내기
구글 계정 관리 > 보안 > Google에 로그인하는 방법 > 2단계 인증 > 앱 비밀번호 생성된 앱 비밀번호를 .env에 MAILER_AUTH_PASS 로 저장 내 구글 계정은 MAILER_AUTH_USER 에 저장 // .env MAILER_AUTH_USER=test@gmail.com MAILER_AUTH_PASS=phfrwscwiwdfhxqt import { NextRequest, NextResponse } from "next/server"; import nodemailer from "nodemailer"; const transporter = nodemailer.createTransport({ host: "smtp.gmail.com", port: 465, secure: true, auth: { us..
2023.10.22 -
[Javascript & Typescript] Textarea의 값을 엔터키로 제출할 때 엔터가 입력되는 현상 해결
react를 이용한 textarea의 값을 엔터키를 이용해서 제출하는 로직을 작성하는 와중에 엔터를 통해서 값이 제출은 잘 되지만 textarea에 엔터가 한 번 더 입력되어 사용자 경험이 나빠지는 현상이 발생하였다. 물론 전송 버튼(button)을 통한 제출에서는 text가 빈 문자열로 잘 적용되었다. 해결 방법 코드 생략... const handleKeyPress = (event: any) => { if (event.key === "Enter") { event.preventDefault(); // ✅ 이 코드를 추가하여 엔터키를 방지한다. handleSubmit(); // 필요에 따른 로직을 추가. } }; 생략... return ( 생략... {/* styled-component로 선언한 texta..
2023.04.13