✅useSelectedLayoutSegment 정리본 #03 Next App Router : useSelectedLayoutSegment (현재 위치한 path 찾기) 1️⃣ 클라이언트 컴포넌트 훅인 useSelectedLayoutSegment() 사용해서 현재 위치한 path 가져오기 가능 2️⃣ Active Link를 적용하여 해당 위치 강조 가능 : 다른 페이지로 이동이 가능한 사이드바 (Link)를 zerotonine2da.tistory.com 💡위치 문제 1. layout에서 import한 컴포넌트에서 사용하기 2. page에서는 무조건 null export default function NavMenu() { const segment = useSelectedLayoutSegment(); cons..
1️⃣ 클라이언트 컴포넌트 훅인 useSelectedLayoutSegment() 사용해서 현재 위치한 path 가져오기 가능 2️⃣ Active Link를 적용하여 해당 위치 강조 가능 : 다른 페이지로 이동이 가능한 사이드바 (Link)를 클릭했을때, 현재 페이지가 active 상태, 다른 페이지들은 active 아닌 상태를 가진 링크 [css] * 왼쪽 오른쪽 사이즈가 다를때 가운데 정렬하는 방법 = 각각에 flex-grow:1 https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment Functions: useSelectedLayoutSegment | Next.js API Reference for the useSel..
▼ 모달창 : Parallel Routes + Intercepting Routes ▼ #01 Next App Router 모달창 : Parallel Routes (@) + Intercepting Routes(.) 1. Next.js App Router로 모달창 구현하기 1️⃣ Parallel Routes (@) - layout.tsx에서 사용 -->{children},{modal} 이런식으로 - 페이지의 주소가 각각 다름 (url) - 페이지1과 페이지2가 같은 폴더에 속해 있어야함 - zerotonine2da.tistory.com @ Parallel Routes로 같은 화면에 띄우기 (.) Intercepting Routes로 가로채기 : i/flow/login으로 했지만, (.)i/flow/login..
* 코드 스플리팅 하는 이유 : 현재 필요한 파일만 다운받기 위함 ▼ 코드 스플리팅을 위한 라이브러리 (lazy) ▼ lazy – React The library for web and native user interfaces react.dev 1. lazy + Suspense > MarkdownPreview = 컴포넌트명 > 웹팩이라는 모듈번들러가 별도의 chunk 파일로 만들어겠다! > JS엔진이 위에서부터 아래로 읽다가 lazy 이 부분은 나중에 다운로드함 > MarkdownPreview 컴포넌트를 만났을때, 다운로드 함 > 다운받는 동안은 fallback에서 Loading 컴포넌트를 보여줌 끝.
1. FOIT (Flash Of Invisible Text) - block > 폰트 다운로드 전까지 아무런 글자 안보여줌 > 다운로드 후에 적용된 글자를 보여줌! (1) 웹폰트 자체가 중요 + 사용자가 기다릴 수 있겠다! @font-face { font-display:block; } > 3초동안 아무것도 안 보여주다가 폰트 보여주기 (ㅁ 👉🏻 웹폰트) > 3초 이후에는 기본폰트 보여준 후 다운로드 완료되면 폰트 보여주기 (ㅁ 👉🏻 기본폰트 👉🏻 웹폰트) 2. FOUT (Flash Of Unstyled Text) - swap > 폰트 다운로드 전에 기본 폰트 적용된 글자 보여줌 > 다운로드 후에 적용된 글자로 변경해서 보여 (1) 사용자에게 빠른 컨텐츠 노출이 중요 ( 기본폰트 👉🏻 웹폰트 ) @font-..