1. classnames https://www.npmjs.com/package/classnames classnames A simple utility for conditionally joining classNames together. Latest version: 2.5.1, last published: 3 months ago. Start using classnames in your project by running `npm i classnames`. There are 42641 other projects in the npm registry using classnames. www.npmjs.com yarn add classnames import cx from "classnames"; const comment..
Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org 1. All time : dayjs가 엄청 밑에 있다가 모멘트쪽까지 치고 올라옴 2. Day.js > from now 사용 npm install dayjs # or yarn add dayjs # or pnpm add dayjs Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org ✅ fromNow를 사용하기 위해서는 플러인 방식이여서 relativeTime 임포트해서 사용하기 //Post.tsx import relativeTime f..
✅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..