전체 글 썸네일형 리스트형 React hydration 오류 해결: 418·425 원인과 수정법 React hydration 오류는 서버가 미리 만든 HTML과 브라우저가 처음 렌더링한 결과가 서로 다를 때 발생합니다. 원인은 대부분 렌더링 중 Date.now()나 Math.random() 호출, window와 localStorage 같은 브라우저 전용 값, 잘못된 태그 중첩 중 하나이며, 값을 마운트 이후로 미루거나 서버와 같은 초기값을 주면 고칠 수 있습니다.React hydration 오류란 무엇인가요?hydration은 서버에서 만든 HTML에 React가 이벤트 핸들러를 붙여 살아 있는 앱으로 만드는 과정입니다. React 공식 문서의 hydrateRoot 페이지는 서버 렌더 결과와 클라이언트의 첫 렌더 결과가 같아야 한다고 설명하며, 이 둘이 어긋나는 것을 hydration 오류(mism.. 더보기 C# 14 확장 멤버 사용법: extension 블록과 this 확장 메서드 차이 C# 14 확장 멤버(extension members)는 static 클래스 안의 extension 블록으로 확장 메서드뿐 아니라 확장 속성, 연산자, 정적 확장 멤버까지 선언하는 문법입니다. 기존 this 확장 메서드와 호환되며, C# 14는 .NET 10 SDK에서 사용할 수 있습니다.이 글에서는 extension 블록의 기본 문법, 기존 this 확장 메서드와의 차이, 실행 가능한 예제 2개, 이미 쓰고 있는 확장 메서드를 옮기는 순서, 컴파일 오류가 나기 쉬운 지점을 차례로 정리합니다.C# 14 확장 멤버란 무엇인가요?C# 14 확장 멤버는 기존 타입의 소스 코드를 수정하거나 상속하지 않고 메서드, 속성, 연산자를 추가하는 문법입니다. extension(수신 타입) 형태의 블록 안에 멤버를 선언하.. 더보기 React Activity 사용법: 화면을 숨겨도 상태 유지하기 (19.2) React Activity는 React 19.2에 추가된 내장 컴포넌트로, mode를 hidden으로 바꾸면 자식 UI를 화면에서만 숨기고 state와 DOM을 그대로 보관합니다. 언마운트하지 않기 때문에 탭을 오가도 입력 중이던 글과 스크롤 위치가 유지됩니다.React Activity란 무엇인가요?Activity는 자식 UI를 visible 또는 hidden 두 모드로 나누어 관리하는 React 19.2 컴포넌트입니다. 공식 문서 기준으로 hidden이 되면 자식은 display: "none"으로 가려지고, 자식의 Effect는 정리(cleanup)되며, 숨김 중에 들어온 업데이트는 화면의 다른 작업보다 낮은 우선순위로 처리됩니다. visible로 돌아오면 이전 state가 복원되고 Effect가 다시.. 더보기 C# DateTime.ParseExact 오류 해결: 날짜 형식 맞추기 C# DateTime.ParseExact는 문자열이 지정한 형식과 정확히 일치해야 DateTime으로 바꾸고, 어긋나면 FormatException을 던지는 메서드입니다. 형식 문자열을 입력값과 똑같이 맞추고 CultureInfo.InvariantCulture를 명시하면 대부분의 날짜 변환 오류를 막을 수 있으며, 입력 형식이 여러 가지라면 배열 오버로드나 TryParseExact를 사용합니다.DateTime.ParseExact란 무엇인가요?DateTime.ParseExact는 날짜 문자열을 지정한 형식 문자열(format)과 대조해 DateTime 값으로 바꾸는 정적 메서드입니다. 공식 문서는 "The format of the string representation must match a specifi.. 더보기 React Zustand 사용법: 전역 상태관리 시작하기 한 줄 요약: React Zustand는 Provider 없이 create 함수 하나로 전역 상태 스토어를 만들고, 컴포넌트에서는 selector로 필요한 값만 구독해 불필요한 리렌더링을 줄여 주는 가벼운 상태관리 라이브러리입니다. 설치 후 스토어 파일 하나와 훅 호출만으로 시작할 수 있어 Context API보다 보일러플레이트가 적습니다.Zustand란 무엇인가요?Zustand는 React용 소형 전역 상태관리 라이브러리입니다. 상태와 상태를 바꾸는 함수를 하나의 스토어에 모아 두고, create가 반환하는 훅으로 어디서든 꺼내 쓰는 방식입니다. React 18 이상에서 동작하는 v5 기준으로 설명합니다.React 상태관리를 처음 고민할 때는 props drilling 문제가 가장 먼저 나옵니다. Co.. 더보기 C# Lock 클래스 사용법: .NET 9 새 lock 객체 정리 한 줄 요약: C# Lock 클래스(System.Threading.Lock)는 .NET 9에서 추가된 전용 잠금 객체로, 기존 lock (object)와 같은 상호 배제를 더 명확하고 가볍게 제공합니다. 필드를 private readonly Lock _lock = new();로 선언하고, C# 13에서는 lock (_lock) 문법을 그대로 쓰면 컴파일러가 Lock.EnterScope() 호출로 바꿔 줍니다.이 글에서는 .NET 9 Lock 클래스의 정의, 기존 lock 문과의 차이, EnterScope와 TryEnter 사용법, 그리고 await와 함께 쓸 때 주의할 점을 예제로 정리합니다.C# Lock 클래스란 무엇인가요?Lock 클래스는 System.Threading 네임스페이스에 있는 .NET 9.. 더보기 React useEffectEvent 사용법: Effect 재실행 줄이기 한 줄 요약: React useEffectEvent는 Effect 안에서 호출되지만 의존성에는 넣지 않아도 되는 함수를 만드는 Hook입니다. Effect를 다시 실행하지 않고도 props와 state의 최신 값을 읽을 수 있으며, React 19.2부터 stable로 사용할 수 있습니다. 단, 의존성을 숨기는 용도로 쓰면 버그가 생기므로 "Effect 안에서 발생하는 이벤트" 로직에만 사용해야 합니다.React useEffectEvent란 무엇인가요?useEffectEvent는 Effect에서 분리된 이벤트 로직을 담는 React Hook으로, Effect 안에서 호출할 수 있는 Effect Event 함수를 반환합니다. Effect Event는 호출되는 시점에 렌더링된 최신 props와 state를 .. 더보기 C# SearchValues 사용법: IndexOfAny 빠르게 검색하기 한 줄 요약: C# SearchValues는 .NET 8에서 추가된 "미리 최적화해 둔 값 집합"으로, IndexOfAny·ContainsAny 같은 다중 문자 검색을 반복 호출할 때 사용합니다. 집합을 static readonly 필드로 한 번만 만들어 두고 재사용하면, 문자를 하나씩 비교하는 루프나 매번 새 배열을 넘기는 방식보다 단순하면서도 빠른 검색 코드를 만들 수 있습니다.SearchValues란 무엇인가요?SearchValues는 불변(immutable)이고 읽기 전용인 값 집합을 검색에 최적화된 형태로 미리 가공해 둔 .NET 8의 타입입니다. 공식 문서도 "한 번 만들고 여러 번 사용"하는 용도를 전제로 설명하며, System.Buffers 네임스페이스에 있습니다. 문자(char)와 바이트.. 더보기 이전 1 2 3 4 ··· 76 다음
