Next.js

01. Next.js 시작하기 TypeScript : Y ESLint : Y Tailwind CSS : Y /src directory : Y App Router : Y import alias : N next 생성시 폴더 구조.png 이렇게 생성하

: 서버에서 미리 html 파일을 만든 다음에 브라우저에서 보여지는 방식: build 타임에 생성해준다.SSG 설정하는 방법은 2가지인데 하나는 위 코드처럼 fetch에 아무 옵션을 주지 않는 방법이다.두번째 방법은 fetch에 force-cache 옵션을 주는 방식이

왕! 간단하게 강의때 실습한거 코드 정리겸 복습하기🤯🔍 Loading UI 가 중요한 이유사용자 경험 개선사용자의 불필요한 행동 문제 해결향상된 SEO 및 접근성NewProductList.tsxSuspense : 비동기 작업을 처리할 때 대체 UI 제공하는 역할로딩

Page Router 방식일때는 Page 폴더 안에 이동할 경로대로 파일을 생성했다면 App Router 는 app 폴더를 기준으로 생성한다.App Router 에서는 이동할 경로의 “폴더” 를 만들어주고 그 안에 반드시 page.tsx를 넣어주어야한다.동적경로의 경

여기서 정리한 설명과 코드는 Page Router 기반으로 작성되어 있다.App Router 방식을 이해하기 앞서 어떤 점이 보완되었고 차이가 무엇인지 알기 위해 Pager Route를 간략하게 공부하였다.App Router 와 비슷하지만 조금 다른 점은 Page폴더

api key 값을 받아올 때의 트러블 슈팅과 export 할 때 default 붙임의 차이에 대해 정리하였습니다.

개인과제에서 데이터 일치여부를 구현하면서 발생한 트러블슈팅 및 해결과정입니다.

Full Route Cache에 대한 내용정리와 간단한 코드 실습을 정리하였습니다. (출처 : 한입크기로 잘라먹는 Next.js - 이정환)

아이템을 누르면 해당 아이템의 정보를 보여주는 페이지로 이동시키는 페이지를 구현하던 중 트러블슈팅이 발생했습니다. 해결하는 과정 중 디코딩,인코딩을 알게되어 관련된 내용을 정리하였습니다.

스트리밍 기능을 활용한 로딩페이지 구현 및 스켈레톤 UI 실습 내용을 정리하였습니다.

에러핸들링에 대한 내용을 간단한 코드 실습과 함께 정리하였습니다.

Next.js image 태그 사용 시 외부 이미지 데이터를 불러오는 도중에 만난 트러블슈팅과 ESM과 Common JS에 대한 내용을 정리하였습니다.

스켈레톤 UI 실습했던 내용을 실제 팀프로젝트에 적용한 과정을 정리해보았습니다.

라우트 세그먼트 옵션과 클라이언트 라우트 캐시 강의를 듣고 간단히 실습한 내용을 정리하였습니다.

팀프로젝트를 하면서 로그인, 회원가입, 마이페이지 부분을 구현해야하는데 소셜로그인 뿐만 아니라 유효성 검사를 할 수 있는 로직이 들어간 코드를 작성해야 프로젝트에 의미가 있다고 판단되었다. 그동안은 캠프에서 제공하는 api로 유효성 검사가 됐었던거라 이걸 직접 작성하려면 어떻게 해야하나 걱정이 되었다. 생각해보니 Next.js에서 React Hook F...

Server Action의 기본 개념을 정리하고 실제 사용 예시와 코드를 통해 이해하고자 하였습니다.

Zustand 전역상태관리를 사용하던 중 불필요한 리렌더링을 유발하여 무한루프가 발생하였고, 이를 useShallow를 사용해 해결하는 과정을 정리하였습니다.

useState 지옥 리뷰 폼을 React Hook Form으로 리팩토링해보자...

Progressive Partial Rendering(PPR)에 대해 정리하고 프로젝트 코드를 수정하여 차이점을 정리했습니다.