본문 바로가기

전체 글

React 프로젝트에서 GitHub Actions를 이용한 자동 배포와 버전 관리 워크플로우 설계 React 애플리케이션을 운영하면서 가장 많이 겪는 고민은 배포 과정의 일관성과 버전 관리입니다. 수동으로 빌드하고 서버에 업로드하면 실수 위험이 크고, 배포 로그가 흩어져 추적이 어려워집니다. 이번 글에서는 GitHub Actions를 활용해 CI/CD 파이프라인을 구축하고, 자동 버전 태깅까지 포함한 워크플로우를 설계하는 방법을 실무 중심으로 살펴보겠습니다.1. 프로젝트 구조와 사전 준비먼저, 기본적인 React 프로젝트 구조를 가정합니다. create-react-app 혹은 Vite로 생성된 프로젝트라면 별다른 설정 없이도 CI/CD를 적용할 수 있습니다.my-react-app/├─ .github/│ └─ workflows/│ └─ deploy.yml├─ src/├─ public/├─ pa.. 더보기
C# 메타프로그래밍: Roslyn 기반 코드 분석 및 자동 리팩터링 최근 C# 생태계에서는 컴파일러 자체를 API 형태로 제공하는 Roslyn이 메타프로그래밍의 핵심 도구로 자리 잡고 있습니다. 이번 포스트에서는 Roslyn을 이용해 코드 분석을 수행하고, 간단한 자동 리팩터링을 구현하는 방법을 살펴보겠습니다.1. Roslyn이란?Roslyn은 Microsoft.CodeAnalysis 네임스페이스에 포함된 C#·VB.NET 컴파일러 플랫폼으로, 구문 트리(Syntax Tree), 의미 모델(Semantic Model), 그리고 코드 변환 API를 제공합니다. 이를 통해 개발자는 런타임이 아니라 컴파일 타임에 코드를 탐색·수정할 수 있습니다.2. 프로젝트 설정먼저 콘솔 애플리케이션을 만들고, NuGet 패키지 Microsoft.CodeAnalysis.CSharp와 Micr.. 더보기
React와 VitePress를 결합해 컴포넌트 문서화 사이트 구축하기 React 컴포넌트를 팀 내외부에 공유하고 싶다면, 문서화가 필수입니다. VitePress는 Vue 기반이지만, 정적 파일 서버와 마크다운 기반 문서 작성 환경을 제공해 React 컴포넌트와도 손쉽게 결합할 수 있습니다. 이번 포스트에서는 React 프로젝트에 VitePress를 도입하고, 컴포넌트 라이브러리 문서 사이트를 만드는 과정을 실무 중심으로 살펴보겠습니다.1. 프로젝트 구조 만들기먼저, monorepo 형태로 React 컴포넌트와 VitePress 문서를 분리합니다. 예시 구조는 다음과 같습니다.my-docs/├─ packages/│ ├─ ui/ // React 컴포넌트 라이브러리│ │ ├─ src/│ │ └─ package.json│ └─ docs/ .. 더보기
C# .NET 8의 새로운 매개변수형 레코드 선언 기능 활용 .NET 8에서는 레코드 타입을 더 간결하게 정의할 수 있는 매개변수형 레코드 선언 기능이 추가되었습니다. 기존에는 레코드의 프로퍼티를 별도로 선언하고 생성자를 구현해야 했지만, 이제는 선언과 동시에 매개변수를 지정해 한 줄로 정의할 수 있어 코드가 크게 줄어듭니다.1. 매개변수형 레코드란?매개변수형 레코드는 레코드 선언부에 바로 매개변수를 넣어 프로퍼티와 생성자를 동시에 생성하는 문법입니다. 기존 레코드와 동일하게 값 기반 비교와 불변성을 제공하지만, 선언이 훨씬 간결해집니다.2. 기본 문법public record Person(string FirstName, string LastName);위와 같이 선언하면 FirstName과 LastName 프로퍼티가 자동으로 생성되고, 매개변수를 받는 기본 생성자도.. 더보기
C# 이벤트 소싱(Event Sourcing)과 CQRS 구현 사례 이 글에서는 C#으로 이벤트 소싱과 CQRS(Command Query Responsibility Segregation)를 실제 프로젝트에 적용하는 방법을 간단히 살펴봅니다. 핵심 개념과 코드 예제를 중심으로 설명하므로, 이미 도메인 모델을 갖고 있거나 새로운 마이크로서비스를 설계 중인 개발자에게 실용적인 가이드를 제공합니다.1. 이벤트 소싱과 CQRS 기본 개념이벤트 소싱은 상태 변화를 이벤트로 저장하고, 현재 상태는 이 이벤트 스트림을 재생(replay)하여 복원하는 패턴입니다. CQRS는 명령(Command)과 조회(Query)를 별도의 모델로 분리해 쓰기와 읽기 성능을 최적화합니다.2. 프로젝트 구조예제에서는 다음과 같은 레이어 구조를 사용합니다.src/│ ├─ Domain/ /.. 더보기
C# 멀티테넌시 애플리케이션 설계와 데이터 격리 전략 멀티테넌시(Multi-tenancy)란 하나의 애플리케이션을 여러 고객(테넌트)이 공유하면서도 데이터와 설정은 서로 격리되는 구조를 말합니다. C#과 .NET 환경에서 멀티테넌시를 구현할 때는 설계 단계부터 데이터 격리 방식을 명확히 정의해야 유지보수와 보안에 유리합니다.1. 멀티테넌시 모델 선택주요 격리 모델은 다음과 같습니다.단일 데이터베이스, 단일 스키마 – 테이블에 TenantId 컬럼을 추가하고 모든 테넌트가 같은 테이블을 공유합니다. 구현이 가장 간단하지만 대규모 테넌트에서는 성능과 보안 이슈가 발생할 수 있습니다.단일 데이터베이스, 다중 스키마 – 테넌트마다 별도 스키마를 두어 테이블을 분리합니다. 스키마 수준에서 격리되므로 쿼리 최적화가 용이합니다.다중 데이터베이스 – 테넌트당 전용 데이터.. 더보기
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.. 더보기