전체 글 썸네일형 리스트형 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.. 더보기 C# 다중 언어 로컬라이제이션을 위한 IStringLocalizer 사용법 ASP.NET Core에서 다국어 지원을 구현하려면 IStringLocalizer를 활용하는 것이 가장 간편합니다. 이번 포스팅에서는 프로젝트 설정부터 실제 코드 적용까지 단계별로 살펴보겠습니다.1. 프로젝트 초기 설정먼저 Microsoft.Extensions.Localization 패키지를 프로젝트에 추가합니다.dotnet add package Microsoft.Extensions.Localization그리고 Startup.cs(또는 Program.cs)에 로컬라이제이션 서비스를 등록합니다.builder.Services.AddLocalization(options =>{ options.ResourcesPath = "Resources"; // 리소스 파일 폴더 지정});builder.Services... 더보기 React에서 React Refresh와 Fast Refresh를 활용한 HMR 최적화 방법 React 개발 시 코드 변경을 저장할 때마다 브라우저를 새로고침하면 작업 효율이 크게 떨어집니다. Hot Module Replacement(HMR)는 이런 불편을 해소해 주는 핵심 기능이며, React 17 이후 기본으로 제공되는 Fast Refresh는 기존 React Refresh보다 더 빠르고 안정적인 경험을 제공합니다. 이 글에서는 React Refresh와 Fast Refresh를 설정하고, 실제 프로젝트에 적용해 HMR 성능을 최적화하는 방법을 실무 중심으로 살펴보겠습니다.1. React Refresh와 Fast Refresh 개념 정리React Refresh는 React 컴포넌트의 상태를 유지하면서 모듈을 교체할 수 있게 해 주는 라이브러리이며, Webpack 플러그인(react-refre.. 더보기 C# 애플리케이션에서 Feature Flag 구현과 관리 Feature Flag(기능 플래그)는 배포 시점과 기능 활성화 시점을 분리하여 운영 리스크를 최소화하는 기법입니다. C# 애플리케이션에 적용하면 새로운 기능을 코드에 포함시키면서도 운영 환경에 따라 동적으로 켜고 끌 수 있습니다.1. Feature Flag 기본 개념Feature Flag는 크게 두 가지 역할을 합니다.배포 시점에 코드가 이미 포함되어 있어야 하므로 Continuous Deployment가 가능해집니다.운영 시점에 플래그 값을 조정해 특정 사용자 또는 환경에만 기능을 노출할 수 있습니다.2. 간단한 구현 방법가장 기본적인 형태는 설정 파일(appsettings.json)이나 데이터베이스에 플래그 정보를 저장하고, 런타임에 이를 조회하는 방식입니다. 아래 예제는 appsettings.js.. 더보기 React 프로젝트에 ESLint와 Stylelint를 통합한 일관된 코드 스타일링 파이프라인 구축 React 애플리케이션을 팀 단위로 개발할 때 가장 중요한 요소 중 하나는 일관된 코드 스타일입니다. ESLint는 JavaScript/JSX 문법을, Stylelint는 CSS/SCSS 문법을 검증해주므로 두 도구를 함께 사용하면 코드와 스타일 모두를 자동으로 관리할 수 있습니다. 이번 포스팅에서는 Create React App(CRA) 기반 프로젝트에 ESLint와 Stylelint를 통합하고, Git Hooks를 활용해 커밋 전 검증까지 자동화하는 방법을 실무 중심으로 살펴보겠습니다.1. 프로젝트 초기 설정먼저 CRA 로 프로젝트를 생성하고, node 버전은 >=14를 권장합니다.npx create-react-app my-app --template cra-template-eslintcd my-app.. 더보기 C# 단일 책임 원칙을 지키는 도메인 서비스 설계 단일 책임 원칙(SRP)은 객체가 하나의 책임만 가져야 함을 강조합니다. 도메인 로직을 구현할 때 서비스 클래스를 어떻게 설계하면 SRP를 유지할 수 있는지 살펴보겠습니다.1. 도메인 모델과 서비스의 역할 분리도메인 모델은 비즈니스 상태와 핵심 로직을 담당하고, 도메인 서비스는 여러 모델에 걸친 협업 로직을 담당합니다. 따라서 모델 내부에 복잡한 협업 로직을 넣지 않는 것이 SRP를 지키는 첫 번째 방법입니다.2. 책임이 명확한 인터페이스 정의서비스는 인터페이스를 통해 외부에 공개됩니다. 인터페이스는 하나의 작업만 수행하도록 메서드를 설계합니다. 예를 들어 주문 처리와 결제 처리를 같은 서비스에 넣지 말고, 각각 IOrderService, IPaymentService 로 분리합니다.3. 구현 예시publ.. 더보기 React와 RxJS를 결합해 반응형 스트림 기반 상태 관리 구현하기 React 애플리케이션에서 전역 상태를 관리할 때 Redux, Recoil, Zustand 등을 많이 사용합니다. 하지만 복잡한 비동기 로직이나 이벤트 흐름을 다루는 경우, RxJS의 스트림 기반 접근이 더 직관적일 때가 있습니다. 이번 포스트에서는 React와 RxJS를 결합해 반응형 스트림 기반 상태 관리를 구현하는 방법을 실무 중심으로 살펴보겠습니다.1. 왜 RxJS와 React를 함께 사용하나요?RxJS는 Observable 스트림을 통해 데이터 흐름을 선언적으로 표현합니다. 이를 React와 결합하면 다음과 같은 장점을 얻을 수 있습니다.비동기 이벤트(네트워크, UI, 타이머 등)를 하나의 스트림으로 통합데이터 변환, 필터링, 결합 등을 연산자로 간결하게 구현구독 관리가 명확해져 메모리 누수 위.. 더보기 C# 의존성 주입 컨테이너와 스코프 관리 고급 기법 의존성 주입(Dependency Injection, DI)은 현대 C# 애플리케이션에서 구조적 설계와 테스트 용이성을 높이는 핵심 기술입니다. 기본적인 서비스 등록·해결은 물론, 복잡한 스코프 관리와 컨테이너 확장까지 다루는 고급 기법을 살펴보겠습니다.1. 스코프란 무엇인가DI 컨테이너는 크게 Singleton, Scoped, Transient 세 종류의 라이프타임을 제공합니다. 여기서 Scoped은 요청 단위(예: ASP.NET Core의 HttpContext) 혹은 사용자 정의 범위 내에서 하나의 인스턴스만 존재하도록 보장합니다.2. 기본 스코프 사용법ASP.NET Core 기본 컨테이너에서는 services.AddScoped();와 같이 등록하고, 미들웨어 파이프라인에서 자동으로 스코프가 생성됩니다.. 더보기 이전 1 2 3 4 ··· 64 다음