전체 글 썸네일형 리스트형 C# 동적 쿼리 생성기: PredicateBuilder와 Specification 패턴 복잡한 검색 조건을 런타임에 조합해야 하는 상황이 빈번히 발생합니다. 이때 LINQ와 EF Core를 활용해 동적 쿼리를 만들면 코드가 깔끔해지고 유지보수가 쉬워집니다. 이번 포스트에서는 PredicateBuilder와 Specification 패턴을 이용한 동적 쿼리 생성 방법을 단계별로 살펴보겠습니다.1. PredicateBuilder 소개PredicateBuilder는 Expression>> 를 쉽게 결합할 수 있게 도와주는 헬퍼 클래스입니다. And, Or, Not 메서드를 체인 형태로 호출해 조건을 조합합니다.using System;using System.Linq;using System.Linq.Expressions;public static class PredicateBuilder{ pub.. 더보기 React 앱에 GraphQL Code Generator 적용하기 React 프로젝트에서 GraphQL API를 사용할 때, 타입 정의를 일일이 작성하면 번거롭고 실수가 발생하기 쉽습니다. GraphQL Code Generator를 활용하면 스키마와 쿼리로부터 타입‑안전한 API 클라이언트를 자동으로 생성할 수 있습니다. 이번 포스트에서는 Create React App(또는 Vite) 기반 프로젝트에 GraphQL Code Generator를 도입하고, 자동 생성된 타입을 활용해 React 컴포넌트를 작성하는 방법을 단계별로 설명합니다.1. 프로젝트 초기 설정먼저 React 앱을 생성하고, Apollo Client와 GraphQL 의존성을 설치합니다.npx create-react-app graphql-codegen-demo --template typescriptcd g.. 더보기 C# .NET MAUI로 크로스플랫폼 UI 구성하기 .NET MAUI(Multi-platform App UI)는 하나의 프로젝트로 iOS, Android, Windows, macOS용 UI를 동시에 개발할 수 있는 프레임워크입니다. 기존 Xamarin.Forms와 비교해 네이티브 컨트롤 접근성과 퍼포먼스가 향상되었습니다. 이번 포스트에서는 .NET MAUI를 이용해 기본적인 크로스플랫폼 UI를 구성하는 방법을 단계별로 살펴보겠습니다.1. MAUI 프로젝트 생성Visual Studio 2022 이상에서 "MAUI App" 템플릿을 선택하면 기본 프로젝트 구조가 자동으로 생성됩니다. CLI 환경에서는 다음 명령어로 프로젝트를 만들 수 있습니다.dotnet new maui -n MyMauiApp생성된 프로젝트는 Platforms 폴더 아래에 각 플랫폼별 시작 .. 더보기 React에서 Headless UI와 Radix UI 컴포넌트를 비교하고 선택하는 가이드 React 프로젝트에 접근성(Accessibility)과 커스터마이징을 동시에 만족시키는 UI 라이브러리를 찾고 계신가요? 대표적인 두 선택지인 Headless UI와 Radix UI를 비교하고, 언제 어떤 라이브러리를 선택해야 하는지 실무 관점에서 정리했습니다.1. 핵심 철학과 제공 범위Headless UI는 Tailwind Labs에서 만든 ‘headless’(시각적 스타일이 없는) 컴포넌트 컬렉션입니다. 기본 동작과 ARIA 속성을 구현해 주지만, 스타일링은 전적으로 개발자가 Tailwind CSS(또는 다른 CSS)로 직접 지정합니다.Radix UI는 모듈형 Primitives(기본 요소) 라이브러리로, Headless UI와 마찬가지로 스타일이 없습니다. 하지만 디자인 시스템과 무관하게 사용할 .. 더보기 C# HTTP/2와 gRPC-Web 클라이언트 구현 방법 최근 마이크로서비스와 프론트엔드 통신에서 HTTP/2와 gRPC-Web을 많이 사용합니다. 본 포스트에서는 C#으로 HTTP/2 기반 gRPC-Web 클라이언트를 간단히 구현하는 방법을 단계별로 살펴보겠습니다.1. 프로젝트 준비먼저 .NET 7 이상의 콘솔 혹은 ASP.NET Core 프로젝트를 생성합니다. gRPC와 HTTP/2를 사용하려면 Grpc.Net.Client.Web 패키지가 필요합니다.dotnet new console -n GrpcWebClientcd GrpcWebClientdotnet add package Grpc.Net.Client.Web2. gRPC 서비스 정의이미 서버가 있다면 .proto 파일을 복사해 Protos 폴더에 넣고 Grpc.Tools를 이용해 C# 코드를 생성합니다.sy.. 더보기 React와 SWR을 이용한 캐시 자동 재검증 및 재생성 전략 React 애플리케이션에서 데이터 패칭은 성능과 사용자 경험을 좌우합니다. SWR은 Stale‑While‑Revalidate 전략을 손쉽게 구현할 수 있게 해 주는 라이브러리로, 캐시된 데이터를 즉시 보여주고 백그라운드에서 최신 데이터를 가져와 자동으로 업데이트합니다. 이번 포스트에서는 SWR을 React와 결합해 자동 재검증과 재생성 전략을 구현하는 방법을 실무 중심으로 살펴보겠습니다.1. SWR 기본 사용법먼저 SWR을 설치하고 기본적인 fetcher 함수를 정의합니다. fetcher는 Promise를 반환하는 함수여야 하며, 전역 설정을 통해 재시도, 캐시 키 자동 관리 등을 할 수 있습니다.npm install swr// src/utils/fetcher.jsexport const fetcher =.. 더보기 C# 데이터베이스 트랜잭션 관리와 Unit of Work 패턴 구현 데이터베이스 작업을 안정적으로 처리하려면 트랜잭션과 Unit of Work(단위 작업) 패턴을 함께 활용하는 것이 핵심입니다. 이번 포스트에서는 ADO.NET과 EF Core 두 가지 상황을 예시로, 트랜잭션을 직접 제어하고 Unit of Work를 구현하는 방법을 단계별로 살펴보겠습니다.1. 트랜잭션 기본 개념트랜잭션은 원자성(Atomicity), 일관성(Consistency), 격리성(Isolation), 지속성(Durability)을 보장하는 DB 작업 단위입니다. C#에서는 DbTransaction 혹은 EF Core의 Database.BeginTransaction()을 통해 제어할 수 있습니다.2. ADO.NET으로 트랜잭션 관리using (var conn = new SqlConnection(c.. 더보기 React 앱에 WebSocket 대신 Serverless WebSocket (Supabase Realtime) 적용하기 실시간 기능이 필요한 React 애플리케이션을 개발할 때 보통 WebSocket을 직접 구현합니다. 하지만 인프라 관리 비용과 스케일링 복잡성을 고려하면 서버리스 기반 실시간 서비스인 Supabase Realtime을 활용하는 것이 효율적입니다. 이 글에서는 기존 WebSocket 코드를 Supabase Realtime 로 교체하는 과정을 단계별로 설명합니다.1. Supabase 프로젝트 생성 및 설정Supabase 콘솔에서 프로젝트를 생성하고, Realtime 기능을 활성화합니다. 기본적으로 public 스키마에 대한 변화가 실시간 이벤트로 전달됩니다.2. React 프로젝트에 Supabase SDK 설치npm install @supabase/supabase-js설치 후 src/supabaseClien.. 더보기 이전 1 2 3 4 ··· 65 다음