next.js
1.[Next JS] 랜더링 기법
전통적인 방식로딩 시간이 길어짐브라우저에서 동작하는 JS를 통해 동적으로 페이지와 컴포넌트 렌더링단점: 초기 로딩 시 로딩 속도 늦어짐특징 • 순수 React를 사용할 때 기본 방식 • 브라우저에서 JS를 사용해 페이지를 동적으로 렌더링 • 렌더링 주체는 클라이언트장점
2.[Next JS] 이미지 Asset 최적화
Next.js에서는 이미지 성능을 최적화하기 위해 next/image 컴포넌트를 제공이미지는 일반적인 웹사이트의 성능에 큰 영향을 미치기 때문에 최적화가 필수next/image 컴포넌트는 아래와 같은 자동 최적화 기능을 제공Image 컴포넌트 자동 이미지 최적화 기능크
3.[Next js] Next.js의 Caching
Next.js는 페이지 성능을 향상시키기 위해 자동으로 다양한 캐싱 전략을 제공 \- 빌드 시점 캐싱 (Full Route Cache) \- 요청 시 데이터 캐싱 (Data Cache)Next.js의 fetch API는 브라우저의 fetch API를 확장한 것이며, 캐
4.[Next.js] errors.tsx와 global-error.tsx
Next.js에서는 error.js 파일을 통해서 중첩된 라우트에서 발생하는 예기치 못한 런타임 오류를 처리 할 수 있음클라이언트 컴포넌트에서는 처리할 방법이 많기 때문에 서버에서 다루는 방법에 대해 작성해보자.error.tsx : 특정 경로(페이지)에서 발생한 에러를
5.[Next.js] 이미지 로딩에 대해
Next.js의 이미지 로딩 이슈와 해결 방법 최근 과제를 진행하면서 챔피언 리스트에서 특정 캐릭터의 상세 정보를 확인할 때 발생하는 이미지 로딩 지연 문제를 발견했습니다. 문제 상황 상세 페이지에 들어가면 챔피언의 스킬 정보와 함께 각각의 스킬 이미지가 표시되도록 만들었다. 그런데 일부 챔피언 상세 페이지에서는 스킬 이미지가 바로 로드되는 반면, 다른 ...
6.[Next.js] next-themes로 다크모드
마운트 상태 확인의 중요성 다크모드를 추가하고 나니 에러 발생 기존코드 하지만, 초기 렌더링 시 theme 값이 아직 제대로 설정되지 않거나, 서버와 클라이언트 간의 불일치로 인해 에러가 발생 원인 Next-themes는 브라우저에서 사용자의 설정이나 OS 테마
7.[Next.js] server action과 route handler의 차이
Next.js의 새로운 기능 중 하나로, 클라이언트 컴포넌트 내부에서 서버로 직접 호출할 수 있는 서버 전용 함수1\. 클라이언트와의 긴밀한 통합클라이언트 컴포넌트 내에서 함수 호출만으로 서버 로직을 실행 가능별도의 API 엔드포인트를 구성할 필요 없이, UI와 밀접하
8.[Next.js] Parallel 라우트를 이용한 모달 구현하기
최근 Next.js 프로젝트를 진행하며 parallel 라우트를 사용한 모달 구현 방법을 적용해 보았다. 기존에 자주 사용했던 State + Portal 방식을 사용하는 모달과 비교하며 느낀 장점과 한계를 정리해보려고 한다.Parallel 라우트는 Next.js에서 제
9.macOS에서 GitHub PR 파일명 변경 충돌 해결하기 (`Header.tsx → header.tsx`)
최근 작업하던 브랜치에서 파일명을 대문자에서 소문자로 바꾸는 단순한 변경을 진행했다:변경 전: Header.tsx변경 후: header.tsx그런데 갑자기 GitHub Pull Request(PR)에서 예상치 못한 충돌(conflict) 이 발생했다.로컬에서 git s