-
Next.js active link 스타일링
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 메뉴(네비게이션)에서 현재 사용자가 들어와있는 메뉴, 즉 active link를 표시하고 싶을 때 사용할 수 있는 방법에 대해 소개해드리고자 합니다. React Router를 사용할 때는 <NavLink> 컴포넌트의 activeClassName이나 activeStyle을 사용하여 비교적 간편하게 active link를 스타일링할 수 있는데요, 이와 달리 Next.js에서는 아쉽게도 이러한 기능을 따로 제공하지는 않는다고 합니다. 이를 직접 구현할 수 있는 여러가지 방법들 중 제가 사용했던 방법에 대해 정리해보도록 하겠습니다~ 준비물 각 페이지에 공통적으로 들어가는 메뉴 컴포넌트 → MyMenu import...
-
Next.js 프로젝트에 ESLint와 Prettier 설정하기
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하는 이호균입니다. 들여쓰기가 맞지 않아도, 변수를 선언하고 사용하지 않아도, 모든 곳에 any 타입을 사용하여도 어플리케이션은 동작합니다. 동작하니까 문제가 없는 것 같아보이지만 사실 문제가 있습니다. 가독성도 나쁘고, 유지보수가 어렵습니다. any를 남발하였으니 compile time 잡을 수 있었던 문제들이 runtime까지 갑니다. 프로젝트에 ESLint와 prettier를 추가하여 최소한의 코드 품질과 일관된 코드 스타일을 보장하는 방법을 알아봅니다. 프로젝트 생성 // 생성 npx create-next-app <MY-AWESOME-APP> // config 파일 생성 touch tsconfig.json // 프로젝트 실행 npm run dev //...