목록next.js (18)
FrontEngineer JungBam
보호되어 있는 글입니다.
보호되어 있는 글입니다.
next.js로 개발하는 것이 편해지기 시작하니까 최적화가 필요없는 작은 규모의 프로젝트가 아니고서는 next.js를 사용하지 않을 이유가 없다. 왜 그렇게 생각하는지에 대해서 하나씩 정리를 해볼텐데, 기본적으로 next.js로 시작하기에서 다뤘던 데이터 패칭이나 SEO최적화 같은 부분들이 아닌 실제로 next.js 프레임워크 내에 내재된 기능들을 살펴보면서 어떤 점에서 react와 차이가 있는지 알아보자. 1. Link의 prefetch 먼저 이 Link라는 친구가 어떤 점이 좋은지 정리를 해보자. 기본적으로 next.js에서 프리패칭이라는 기능이 있다. 백그라운드에서 이루어지는 것으로 해당 페이지를 프리패칭하는 것이다. 이러한 프리패칭 기능이 이 Link의 속성 중에 있다. 바로 prefetch라는 ..
어느 페이지에 들어가려고 할때 로그인 된 경우에만 들어갈 수 있도록 하고 싶다... 라는 생각으로 React에서도 private route를 Router 컴포넌트에 만들어줬었는데 next.js에서도 동일한 기능을 하는 HOC를 만들어보자. 정말 간단하게 이 페이지를 들어갈때에 로그인되어 있어? 를 물어봐주는 HOC를 만들면 된다. 진짜 간단하게 생각나는대로 아래의 코드를 만들었다. 만들고 동작해보니 정상적으로 동작하지만, 렌더링 과정에서의 상태 변화로 인한 경고창이 발생했다. 렌더링 과정에서? 컴포넌트를 렌더링하기 전에 withAuth를 통해서 router.push를 하는 과정에서 발생한 문제다. 로그인이 되어있지 않아서 router.push를 실행하는 과정에서 상태값의 변동이 있고 이것을 하지 말라는 ..
홈페이지의 마스코트 같은 개념의 파비콘을 next에서는 어떻게 넣는지 알아보자. 이전에 알아본 것 같이 layout중에 RootLayout은 html과 head, body 태그를 다룰 수 있는 유일한 layout이다. 우리가 next.js가 아니더라도 메타데이터를 다루고 파비콘을 설정하기 위해 했던 것과 같이 head 태그 안에 설정을 해주면 간단하게 파비콘이 적용된다. Metadata Files: favicon, icon, and apple-icon | Next.js Using App Router Features available in /app nextjs.org
next/navigation에서 제공하는 useSearchParams()와 usePathname()에 대해서 알아보자. 두 함수 모두 현재주소창에 있는 값들에 대해서 접근하고자 할 때 사용하는 함수이나 각각의 쓰임이 다르다. query와 path에 대해서 다들 알고 있겠지만 쉽게 이야기를 하면 useSearchParams는 query에 대한 값을 가져오는 함수이고 usePathname은 path를 가져오는 함수이다. Functions: useSearchParams | Next.js Using App Router Features available in /app nextjs.org Functions: usePathname | Next.js Using App Router Features available in..
redirect 가 무엇인지부터 정리해보자. redirect란 경로를 재설정해주는 것인데, 두가지 방법이 있다. 각각 어떻게 사용하고 어떤 때에 각각의 방식이 효율적일지 생각해보자. 1. next.config를 통한 경로 재설정 프로젝트의 설정 자체를 건드림으로써, 어떤 경우에 대한 처리가 아니라 프로젝트에서의 경로를 재설정하는 방법으로, 기존에 있던 경로가 변경되었을 때에 이전의 경로로 접근하더라도 404에러를 발생시키는 것이 아니라 재설정된 경로로 접근할 수 있도록 해주는 방식이다. source에 있는 경로로 접근하면 destination으로 경로를 재설정해주는데 404코드가 아닌 308코드를 보내주어 해당 경로가 잘못된 경로가 아니라 재설정되었으니 여기로 보내줄 것을, 그리고 캐싱을 해도 됨을 알려..
이전 글에서 loading UI에 대해서 설명했는데, loading UI는 React 18버전에서 제공하는 Suspense를 통해서 구현된다고 설명했다. 그렇다면 이 Error UI는 어떻게 동작하는 것인지도 간단하게 설명하고 지나가겠다. 이 기능 또한 React에서 제공하는 기능을 통해 구현된 것인데 바로 Error Boundary를 활용한 것이다. React 16버전에 추가된 Error Boundary는 컴포넌트의 자식 컴포넌트에서 Error가 발생하면 Error Boundary의 fallback에 제시된 컴포넌트를 Error UI로 제공한다. 즉 next.js에서 해당 경로에 제시된 error.tsx를 layount.tsx의 Error Boundary fallback에 사용하는 것이다. 아래 코드는..