본문 바로가기
반응형

react12

Next.js 15에서 동적 라우트가 간헐적으로 깨진다? 어떤 문제가 생기는 걸까?저는 /post/[slug]/page.tsx 구조를 쓰고 있었습니다.tsx복사편집export default function PostPage({ params }: { params: { slug: string } }) { console.log(params.slug); } 그런데 어떤 상황에서는 params.slug가 undefined로 들어오거나,심지어 \u0000 같은 이상한 가비지 값이 찍히는 경우도 있었습니다.dev 모드에서는 정상특정 페이지에서만 간헐적으로 발생로그 상으로는 캐시된 페이지에서 빈 파라미터로 들어옴🕵️‍♂️ 왜 이런 일이 생기는 걸까?공식 문서엔 해당 이슈가 명확히 기재되진 않았습니다.그러나 커뮤니티에서는 다음과 같은 원인이 유력하게 언급되고 있습니다.1. 빌.. 2025. 7. 26.
Next.js 15.4.2 업데이트, 지금 꼭 알아야 할 변화는? 오늘은 따끈따끈하게 릴리스된 Next.js 15.4.2 버전의 핵심 내용을 살펴보려 합니다.이번 릴리스는 기능 추가보다는 버그 수정과 안정화에 집중되었지만,실제 서비스 운영에 꽤 유의미한 변화들이 반영되었어요.특히 메타데이터와 관련된 개선은 많은 개발자들이 기다리던 부분이기도 하죠.그럼 하나씩 살펴볼까요?🧩 Next.js 15.4 시리즈, 어떤 흐름이었나?이번 15.4.2는 15.4 버전의 후속 안정화 패치입니다.7월 중순에 공개된 15.4 시리즈는 다음과 같은 흐름으로 전개됐어요.✅ Turbopack 통합 빌드가 본격적으로 안정화✅ React 19 호환성을 기반으로 다양한 내부 리팩토링✅ 차세대 기능(캐시 컴포넌트 등)의 사전 준비 시작15.4에서 소개된 새로운 방향성은 Next.js 16으로 이어질.. 2025. 7. 21.
Next.js 15.3.4 업데이트 Next.js를 사용하는 개발자라면 한 번쯤 겪었을 겁니다.generateMetadata()가 왜 이렇게 여러 번 불리는 건지,정적으로 만든 Open Graph 태그가 잘못 반영돼 소셜 공유가 꼬이는 문제 말이죠.이번 Next.js 15.3.4 버전은 그런 문제로 골머리를 앓던 많은 개발자들의 가슴을 뻥 뚫리게 할 만한 업데이트입니다.15.3.3과 비교해 기능은 그대로지만, 실무에서 진짜 걸리던 부분들이 보완됐어요.📌 업데이트 개요📅 배포일: 2025년 6월 19일🧩 버전: next@15.3.4📦 핵심 키워드: generateMetadata, Open Graph, App Router, SEO 안정성🔍 15.3.3까지의 문제: 메타데이터 신뢰도 부족Next.js 15.3부터 도입된 app/meta.. 2025. 6. 24.
[지속 가능한 Frontend개발] Component Component는 의존적이지 않고(independent), 재사용이 가능한(reusable) 고립(isolation)된 단위를 말한다. 이 정의에 맞춰서 Component를 개발하는 것이 가장 지속 가능한 Component가 나온다. 이 정의에 맞추기 위한 글들이 여러가지가 있지만 여기서도 한번 살펴보겠다. 독립성 다른 Component에 의존되지 않는 것을 말한다. 개발자는 최대한으로 의존적이지 않게 해야 하지만 개발하다 보면 항상 독립적으로 만들기가 쉽지 않다(언젠간 의존성을 가진 Component를 만들게 될 것이다) 이런 경우엔 아예 코드 자체에서 최대한으로 의존성을 노출해줘야 한다. 독립적인 Component를 만든다는 것이 결국 재사용을 위함인데 재사용 시 개발자에게 '나 여기에 종속돼요!'.. 2022. 11. 20.
[React] React Hook Form으로 Form Validation 쉽게 하기 웹 개발, 특히 프론트앤드 개발을 하다 보면 Form Control을 할 일이 자주 있다. 로그인, 회원 가입, 게시물 작성 등 꽤 자주 활용하게 된다. 보통 Form에 입력된 값들은 DB에 넣거나 조회하는 등 할 때 사용되는데 Submit 하기 전에 입력을 제대로 했는지, 빠진 값들은 없는지 하는 Validation 과정을 거친다. 이런 일련의 과정들을 매우 쉽게 구현할 수 있는 것이 있어 소개하고자 한다. "React Hook Form" 이다. React Hook Form 의 장점은 1. 코드 량이 적다. 2. Validation이 강력하다. 3. Error 잡기 좋다. 4. Input Control 유용하다 5. 이벤트를 신경쓰지 않아도 된다. 6. Input 처리가 간편하다 그럼 React Hoo.. 2022. 3. 13.
[React] IIS 서비스 환경에서새로고침 시404 에러 방지법 React를 IIS에서 구동했을 떄 새로고침 시 404에러가 뜨는 경우가 있다. SPA 특성상 새로고침 시 Router에서의 URI 인식 등으로 인해 404 에러가 뜰 것이다. 물론 서버단에서 새로고침 요청 시 잘 만들면 되겠지만 IIS의 web.config를 아래와 같이 설정하면 방지할 수 있다. 2022. 1. 10.
반응형