본문 바로가기

전체 글

React cache 함수 사용법: 서버 컴포넌트 요청 중복 제거 한 줄 요약: React cache 함수는 서버 컴포넌트에서 같은 인자로 호출한 비동기 함수의 결과를 한 번의 서버 요청 동안 재사용하게 해 줍니다. 컴포넌트마다 같은 데이터를 요청해도 DB 조회는 한 번만 일어나므로, props를 깊게 내리지 않고도 중복 요청을 줄일 수 있습니다. 컴포넌트 바깥에서 한 번만 감싸고, 인자는 문자열이나 숫자 같은 원시값으로 넘기는 것이 핵심입니다.React cache 함수란 무엇인가요?React cache는 함수의 결과를 인자 기준으로 메모이제이션하는 React의 API입니다. 서버 컴포넌트(React Server Components) 전용으로 설계되어 있고, 캐시는 서버 요청 하나가 끝나면 무효화됩니다. 즉 사용자 A의 요청에서 만든 결과가 사용자 B의 요청에 섞이지 .. 더보기
C# async void 주의점: 예외가 잡히지 않는 이유 한 줄 요약: C# async void 메서드는 호출자가 await 할 수도, 예외를 try-catch로 잡을 수도 없습니다. 이벤트 핸들러가 아니라면 항상 async Task를 반환하세요. 이벤트 핸들러에서 쓸 때는 핸들러 내부에서 직접 예외를 처리해야 합니다.async void란 무엇인가요?async void는 반환 타입이 void인 비동기 메서드입니다. Task를 돌려주지 않기 때문에 호출한 쪽에서는 작업이 끝났는지, 실패했는지 알 방법이 없습니다. 그래서 흔히 "불을 붙이고 잊는(fire-and-forget)" 메서드가 됩니다.C# 언어가 async void를 허용하는 이유는 void를 요구하는 이벤트 핸들러 시그니처에 async를 쓸 수 있게 하기 위해서입니다. Microsoft Learn의 비.. 더보기
React Server Actions 사용법: use server 폼 처리 한 줄 요약: React Server Actions는 'use server' 지시어로 표시한 서버 함수를 에 직접 연결해, 별도 API 라우트 없이 폼 제출과 데이터 변경을 처리하는 기능입니다. 서버 함수는 공개 HTTP 엔드포인트처럼 호출될 수 있으므로 인증과 입력 검증은 반드시 함수 안에서 직접 해야 합니다.이 글에서는 React Server Actions 사용법을 Next.js App Router 기준으로 정리합니다. 기본 폼 처리, useActionState로 검증 결과 보여주기, 보안 주의점, 자주 하는 실수까지 순서대로 다룹니다.React Server Actions란 무엇인가요?Server Actions는 클라이언트에서 호출하지만 서버에서 실행되는 비동기 함수입니다. React 19에서는 이 .. 더보기
C# PeriodicTimer 사용법: Task.Delay 루프 대체하기 한 줄 요약: C# PeriodicTimer는 일정한 간격으로 비동기 작업을 반복할 때 쓰는 .NET 6+ 타이머입니다. while (await timer.WaitForNextTickAsync(ct)) 루프 한 번으로 Task.Delay 반복 루프의 주기 밀림과 콜백 겹침 문제를 피할 수 있고, BackgroundService의 주기 작업에 가장 잘 맞습니다.C# PeriodicTimer란 무엇인가요?PeriodicTimer는 System.Threading 네임스페이스의 클래스로, 지정한 주기마다 한 번씩 "틱"을 발생시키고 이를 await로 기다릴 수 있게 해 주는 타이머입니다. 콜백을 등록하는 방식이 아니라 비동기 루프 안에서 다음 틱을 기다리는 방식이라, 예외 처리와 취소 처리가 일반 async 코.. 더보기
React 19 Actions 사용법: useTransition으로 비동기 처리 한 줄 요약: React 19부터 startTransition에 async 함수를 넘길 수 있고, 이렇게 실행되는 비동기 함수를 Action이라고 부릅니다. useTransition이 돌려주는 isPending으로 요청이 끝날 때까지의 pending 상태를 직접 만들지 않고 처리할 수 있습니다. 단, await 뒤의 state 업데이트는 startTransition으로 다시 감싸야 합니다.이 글에서는 React 19 Actions가 무엇인지, useTransition으로 비동기 저장 버튼을 만드는 방법, 오류 처리와 흔한 실수를 코드로 정리합니다.React 19 Actions란 무엇인가요?Action은 Transition 안에서 실행되는 함수를 부르는 이름입니다. React 18까지는 startTrans.. 더보기
C# ValueTask vs Task 차이와 사용 기준 정리 한 줄 요약: C# ValueTask는 결과가 이미 준비된 경우가 많은 비동기 메서드에서 Task 힙 할당을 줄이기 위한 구조체입니다. 대부분의 코드는 Task를 그대로 쓰고, 캐시 적중처럼 동기 완료 비율이 높고 호출이 매우 잦은 경로에만 ValueTask를 고려하면 됩니다. ValueTask는 한 번만 await해야 한다는 제약을 꼭 기억하세요.ValueTask란 무엇인가요?ValueTask는 TResult 값 자체, Task, 또는 IValueTaskSource 중 하나를 감싸는 구조체(struct)입니다. 비동기 메서드가 동기적으로 끝나면 힙에 Task 객체를 만들지 않고 값을 그대로 돌려줄 수 있어서, 호출이 매우 잦은 경로에서 GC 부담을 줄일 수 있습니다. 제네릭 ValueTask는 .NET.. 더보기
React useEffect 줄이는 법: 파생 상태와 key 리셋 정리 한 줄 요약: React에서 useEffect를 줄이는 핵심은 props와 state로 계산할 수 있는 값은 Effect가 아니라 렌더링 중에 바로 계산하는 것입니다. 파생 상태, 사용자 이벤트 처리, props가 바뀔 때의 state 초기화는 Effect 없이 처리하는 편이 코드도 짧고 불필요한 리렌더링도 줄어듭니다.불필요한 useEffect란 무엇인가요?불필요한 useEffect란 React 바깥 시스템과 동기화할 일이 없는데도 state를 갱신하려고 작성한 Effect를 말합니다. react.dev는 Effect를 네트워크, 브라우저 API, 서드파티 위젯 같은 외부 시스템과 컴포넌트를 맞추는 "탈출구"로 정의합니다. 외부 시스템이 관여하지 않는다면 Effect가 필요 없는 경우가 대부분입니다.Ef.. 더보기
C# Keyed Services 사용법: .NET 8 키 기반 DI 정리 한 줄 요약: C# Keyed Services는 같은 인터페이스를 구현한 여러 클래스를 문자열이나 enum 같은 키로 구분해 DI 컨테이너에 등록하고, [FromKeyedServices] 특성이나 GetRequiredKeyedService로 원하는 구현체를 골라 주입받는 .NET 8의 기능입니다. 팩토리 클래스나 Dictionary로 직접 구현해야 했던 "이름으로 서비스 고르기"가 프레임워크 기본 기능이 되었습니다.Keyed Services란 무엇인가요?Keyed Services(키 기반 서비스)는 서비스 타입과 키(key)의 조합으로 의존성을 등록하고 조회하는 DI 기능입니다. Microsoft.Extensions.DependencyInjection 8.0, 즉 .NET 8부터 기본 제공됩니다. 키는 .. 더보기