Frontend13 FOUC: App Router 환경 Ant Design v5 SSR 설정 ❗ 문제 상황Next.js 15(App Router) 환경에서 Ant Design v5를 사용해 구현한 SelectBox 컴포넌트가 페이지 새로고침 시 일시적으로 스타일이 풀리는 문제를 겪었다.첫 렌더링 시 레이아웃이 깨짐잠깐 기본 스타일로 보였다가 다시 정상 적용FOUC(Flash of Unstyled Content) 증상이 발생🔍 발생 원인Ant Design v5는 전통적인 CSS 파일을 사용하는 대신 CSS-in-JS 방식으로 런타임에 스타일을 생성한다.서버에서 HTML만 내려오고 CSS는 클라이언트 JS가 실행된 뒤에야 생성되는 것이다.1. 서버 → 스타일 없는 HTML 전달2. 브라우저 → HTML 먼저 렌더링3. 클라이언트 JS 실행4. Antd 스타일 생성 및 주입이 과정에서 스타일이 없.. 2026. 2. 4. query 기반 필터 안전하게 가져오는 방법 리스트 페이지에서 PATH?category=fruit&name=apple 같은 URL query 값으로 필터 초기값을 설정했을 때, 새로고침 시 기존에 선택한 필터가 초기화되는 문제가 발생했다.이는 Next.js Page Router(pages/ 디렉토리) 환경에서 router.query를 사용할 때 자주 겪는 현상으로, 새로고침 시 query 값이 비어 있기 때문에 발생한다. import { useRouter } from 'next/router';import { useState, useEffect } from 'react';export default function TestPage() { const router = useRouter(); const [filters, setFilters] = useS.. 2025. 10. 13. 얕은 복사(shallow copy) vs 깊은 복사(deep copy) 프로그래밍을 하다 보면 객체나 배열을 복사(copy) 해야 하는 경우가 자주 발생한다. 이때 중요한 개념이 바로 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy)이다.두 가지 복사 방식이 실제 코드에서 어떤 차이를 만들어내는지 이해해야 의도치 않은 버그를 피할 수 있다.💁🏻 적용 가이드얕은 복사 먼저 고려하기 - 대부분의 UI 상태 변경은 얕은 복사로 충분하다.깊은 복사는 신중하게 - 데이터 크기가 클수록 성능 부담이 커진다.라이브러리 활용- lodash.cloneDeep() 같은 유틸 라이브러리를 쓰면 안정적으로 깊은 복사를 구현할 수 있다. ✅ 얇은 복사(Shallow Copy)얕은 복사는 한 단계까지만 복사한다.즉, 객체의 1차 속성은 새로운 메모리에 복사되지만, 그 안에 .. 2025. 9. 8. React input 포커스 풀림: key 관리 React에서 리스트를 렌더링할 때 key를 부여하는 건 필수적이다. 종종 input 요소를 map으로 뿌려야하는 경우가 있는데 이때 key를 nanoid()와 같은 랜덤한 고유값으로 주면 한 글자 입력 시 포커스가 풀리는 현상이 발생한다. 🔍 발생 원인React에서 map으로 요소를 렌더링할 때 nanoid()를 사용하면 충돌 가능성이 없는 고유한 key를 쉽게 부여할 수 있다. 하지만 nanoid()는 호출할 때마다 새로운 key를 생성하기 때문에, input을 map으로 뿌릴 때 매번 key가 바뀌게 된다. 이 경우 React는 기존 DOM을 재사용하지 않고 새로운 DOM으로 인식해 다시 그리게 되므로, 입력 중이던 값이나 포커스가 사라지는 문제가 발생한다. 즉, 해당 현상은 map 때문이 아.. 2025. 8. 27. 이전 1 2 3 4 다음
