Nextjs

Next.js 13 부터 app/ 디렉토리를 기반으로 라우팅이 구성된다.app/about 이란 dir 를 만들고 page.tsx 를 생성하면 /about 이란 route 가 구성이 되는 것이다.Layout.tsx 로 레이아웃을 구성할 수 있다. /app/page.tsx

React 에서는 react-router 에서 지원하는 NavLink 를 이용하면 네비게이션에서 현재 메뉴의 상태를 쉽게 특정할 수 있었다.Next.js (현재 사용버전 14) 에서는 커스텀으로 구현해야 했다.1차 시도 방법: next/router 의 useRouter

Next.js 14, App router 사용메뉴 이동간에 콘솔에 다음과 같은 경고가 표시된다.Skipping auto-scroll공통으로 설정한 loading.tsx 컴포넌트를 특정하고 있다.이 두 스타일이 문제라는 건데...구글링을 해보니 Link 컴포넌트를 사용

css 변수 로 공통변수값을 만들어 사용하면 전역으로 사용하는 color 나 font-size 등을 관리하는데 용이하다. 이번 프로젝트에서 Styled-components 를 사용하면서 공통변수만 scss 로 정의해서 사용하는 방법을 선택했다. Styled-com

useYn 값 으로 메뉴의 사용여부를 특정함.children 안에 하위뎁스의 메뉴구조가 들어감.openMenuId : 메뉴 item 을 특정하고 현재 메뉴와 메뉴상태를 특정하기 위한 statenavRef : 메뉴 DOM 을 특정, 메뉴 DOM 외부의 이벤트를 감지하기