#TypeScript42개

Frontend

[RxJS] 비동기 데이터의 '수도관' 설계하기: 기초부터 실무 패턴까지

RxJS의 Observable과 Operator를 정수기에 비유해 설명하고 디바운스, 재시도 등 실무 비동기 패턴을 정리합니다.

02026. 3. 29.

Backend

[TS/JS] 직렬화와 역직렬화 깊게 파보기: NestJS와 Next.js 예시로 이해하기

메모리 객체가 네트워크나 디스크를 넘나들 때 일어나는 직렬화와 역직렬화 과정을 NestJS와 Next.js 예시로 정리합니다.

02026. 3. 29.

Backend

[NestJS] Pipe 완벽 가이드: 데이터 검증과 변환

NestJS Pipe로 입력 데이터를 변환하고 검증하는 방법을 내장 파이프, DTO 기반 ValidationPipe, 커스텀 파이프로 정리합니다.

02026. 3. 29.

Backend

트랜잭션과 격리 수준(Isolation Level): ACID부터 Prisma 구현까지

트랜잭션의 ACID 원칙과 4가지 격리 수준을 이해하고 Prisma로 안전하게 트랜잭션을 처리하는 방법을 정리합니다.

02026. 3. 28.

Backend

Raw SQL, Query Builder, ORM 비교와 Repository 패턴으로 데이터 접근 설계하기

Raw SQL, Query Builder, ORM의 장단점을 비교하고 Repository 패턴으로 데이터 접근 코드를 유연하게 설계하는 방법을 정리합니다.

02026. 3. 28.

Backend

NestJS 아키텍처 가이드: 3-Layer부터 CQRS까지 실무 패턴 정리

NestJS의 3-Layer, CQRS, 헥사고날 아키텍처의 특징과 트레이드오프를 비교하고 프로젝트 규모에 맞는 선택 전략을 정리합니다.

02026. 3. 28.

Backend

Prisma ORM 완벽 가이드: 스키마 설계부터 실무 쿼리까지

Prisma의 스키마 설계와 관계 설정, 실무 쿼리 문법, 트랜잭션 활용법까지 정리합니다.

02026. 3. 28.

Backend

TypeORM vs Prisma: Supabase 환경의 ORM 선택과 운영 전략

Supabase 환경에서 TypeORM과 Prisma를 비교하고 연결 풀링, RLS, 마이그레이션 운영 전략을 정리합니다.

02026. 3. 28.

Backend

NestJS 환경 변수 검증: Joi vs class-validator로 Fail Fast 구현하기

NestJS에서 Joi와 class-validator로 환경 변수를 부트스트랩 단계에 검증해 Fail Fast를 구현하는 방법을 비교합니다.

02026. 3. 28.

Backend

NestJS 직렬화와 역직렬화: DTO와 class-transformer 동작 원리

NestJS에서 ValidationPipe로 요청을 역직렬화하고 ClassSerializerInterceptor로 응답을 직렬화하는 방법을 정리합니다.

02026. 3. 28.

Backend

NestJS 요청 검증: DTO와 class-validator, class-transformer 활용기

NestJS에서 DTO 패턴과 class-validator, class-transformer로 클라이언트 요청을 안전하게 검증하고 변환하는 방법을 정리합니다.

02026. 3. 28.

Backend

NestJS 시작하기: Controller, Service, Module로 만드는 탄탄한 아키텍처

NestJS의 핵심인 Controller, Service, Module과 의존성 주입(DI)으로 관심사를 분리해 확장 가능한 API를 설계하는 방법을 정리합니다.

02026. 3. 28.

Frontend

React 커스텀 훅 useStateWithHistory로 Undo/Redo 구현하기

useRef와 커스텀 훅으로 상태 이력을 관리해 Undo/Redo 기능을 구현하는 방법을 정리합니다.

02022. 8. 29.

Frontend

어댑터 패턴(Adapter Pattern)이란 무엇인가? TypeScript 예제로 이해하기

서로 다른 인터페이스를 가진 클래스를 소스 변경 없이 함께 동작시키는 어댑터 패턴을 TypeScript 예제와 개방-폐쇄 원칙 관점에서 정리합니다.

02022. 7. 31.

Frontend

퍼사드 패턴(Facade Pattern)이란? TypeScript 예제로 이해하기

복잡한 코드를 하나의 메서드 뒤에 숨기는 퍼사드 패턴의 개념과 활용법을 TypeScript 예제로 정리합니다.

02022. 7. 30.

Frontend

TypeScript groupBy로 배열을 한 번에 그룹화하기

filter를 반복 호출하는 대신 groupBy로 배열을 한 번만 순회해 그룹화하고, 키로 데이터에 바로 접근하는 방법을 정리했습니다.

02022. 7. 29.

Frontend

실무에서 두루 쓰는 React 커스텀 Hook 4가지

useToggle, useTimeout, useDebounce, useUpdateEffect 등 대부분의 프로젝트에서 재사용하기 좋은 React 커스텀 Hook을 코드와 함께 정리합니다.

02022. 7. 27.

Backend

NestJS CanActivate와 커스텀 Roles 데코레이터로 권한 인가 가드 구현하기

NestJS에서 CanActivate와 커스텀 Roles 데코레이터, Reflector를 조합해 역할 기반 인가 가드를 구현하는 방법을 정리합니다.

02022. 5. 29.

Backend

NestJS 커스텀 데코레이터로 헤더의 JWT 받아오기

NestJS 인터셉터로 요청 헤더의 JWT를 가로채 디코딩하고, 커스텀 파라미터 데코레이터로 컨트롤러에서 사용자 정보를 바로 받아오는 방법을 정리합니다.

02022. 5. 28.

Backend

NestJS DTO에서 중첩 객체(nested object) 검증하기: ValidateNested와 Type

NestJS DTO에서 @ValidateNested와 @Type 데코레이터로 객체 안의 객체, 즉 중첩 객체 배열을 검증하는 방법을 정리했습니다.

02022. 5. 28.

Backend

Nest.js에서 dto를 사용하여 validation과 데이터 변형 시켜보기

Nest.js에서 DTO로 요청 데이터를 검증하고 인터셉터로 응답 데이터를 변형하는 방법을 정리합니다.

02022. 5. 22.

Frontend

TypeScript 객체 업데이트: Spread 연산자와 Pick·Partial 유틸리티 타입 활용법

Spread 연산자와 Pick, Partial 유틸리티 타입을 조합해 불변성을 지키며 객체를 안전하게 업데이트하는 방법을 정리합니다.

02022. 5. 20.

Frontend

Interface에서 어떠한 key의 value를 타입으로 만드는 방법

타입스크립트 인터페이스 내부 특정 key의 value를 인덱스드 액세스 타입으로 추출하는 방법을 알아봅니다.

02022. 5. 20.

Frontend

Union Type Guard 하는 방법

타입스크립트에서 유니온 타입을 안전하게 좁히는 타입 가드 함수를 작성하는 방법을 알아봅니다.

02022. 5. 20.

Frontend

프로그래머스에서 베스트 앨범 풀어보기

해시 테이블을 활용해 프로그래머스 베스트 앨범 문제를 타입스크립트로 풀어봅니다.

02022. 5. 16.

Frontend

LeetCode에서 Symmentric Tree 풀어보기

재귀 함수로 이진 트리의 대칭 여부를 판별하는 LeetCode Symmetric Tree 문제를 풀어봅니다.

02022. 5. 14.

Frontend

LeetCode에서 Binary Tree Inorder Traversal 문제 풀어보기

트리의 중위 순회 개념을 정리하고 스택을 이용해 이진 트리 중위 순회 문제를 풀어봅니다.

02022. 5. 13.

Frontend

Leetcode에서 Climbing Stairs 문제 풀어보기

동적 프로그래밍과 피보나치 점화식을 이용해 LeetCode의 Climbing Stairs 문제를 풀어봅니다.

02022. 5. 13.

Frontend

Leetcode에서 Maximum Subarray 풀어보기

카데인 알고리즘으로 최대 부분합을 O(n)에 구하는 Maximum Subarray 문제 풀이를 정리합니다.

02022. 5. 12.

Frontend

Leetcode에서 Search Insert Position 풀어보기

이진 탐색을 활용해 정렬된 배열에서 삽입 위치를 찾는 Search Insert Position 문제를 풀어봅니다.

02022. 5. 12.

Frontend

LeetCode에서 Merge Two Sorted Lists 풀어보기

연결 리스트 자료구조를 이용해 두 정렬 리스트를 병합하는 Merge Two Sorted Lists 문제를 풀어봅니다.

02022. 5. 12.

Frontend

LeetCode의 올바른 괄호문제 풀어보기

스택 자료구조를 사용해 LeetCode의 Valid Parentheses 올바른 괄호 문제를 풀어봅니다.

02022. 5. 12.

Frontend

LeetCode Two Sum 풀이: 이중 반복문과 해시 테이블로 시간 복잡도 비교하기

LeetCode의 Two Sum 문제를 이중 반복문과 해시 테이블 두 가지 방식으로 풀고 시간 복잡도를 비교합니다.

02022. 5. 11.

Frontend

소수 구하기 공식

단일 숫자 소수 판별과 에라토스테네스의 체로 특정 범위의 소수를 구하는 방법을 정리합니다.

02022. 5. 10.

Frontend

마틴 파울러의 리팩터링: 단계 쪼개기와 다형성을 이용한 계산 로직 개선

단계 쪼개기와 다형성으로 조건문을 대체해 계산 로직과 출력 로직을 분리하는 리팩터링을 다룹니다.

02022. 5. 7.

Frontend

마틴파울러의 리팩터링 개정 2판과 함께 클린코드 잘짜는법 배워보자!!(1/2)

마틴 파울러의 리팩터링 2판을 따라 함수 추출과 변수 인라인으로 클린 코드를 실습합니다(1/2).

02022. 5. 7.

Frontend

꼭 Enum을 사용해야하는 경우가 아니라면 union 타입을 사용해야하는 이유!!

Enum이 컴파일 후 번들 크기를 키우는 이유를 살펴보고 Union Type 사용을 권장하는 근거를 정리합니다.

02022. 5. 4.

Frontend

Interface type guard 하는 방법

in 연산자와 사용자 정의 타입 가드로 인터페이스 타입을 좁히는 두 가지 방법을 예시로 알아봅니다.

02022. 5. 3.

Frontend

JavaScript 정규표현식: 생성자 함수(RegExp)로 동적 패턴 완벽하게 다루기

런타임에 결정되는 동적 패턴을 RegExp 생성자 함수로 안전하게 다루는 방법을 정리합니다.

02022. 4. 29.

Frontend

타입스크립트에서 여러 객체를 상속받을 수 있는 Mixin 패턴을 알아보자!

타입스크립트에서 여러 객체를 동시에 상속받을 수 있게 해주는 Mixin 패턴을 알아봅니다.

02022. 4. 29.

Frontend

esbuild로 react app 만들어보기!

CRA 없이 esbuild로 처음부터 React 프로젝트를 구성하며 번들 속도를 직접 확인해봅니다.

02022. 4. 27.

Frontend

타입스크립트 Function Overloading을 알아보자!

여러 경우의 매개변수와 반환 타입을 하나의 함수로 처리하는 타입스크립트 함수 오버로딩을 알아봅니다.

02022. 4. 27.