프론트엔드/Next.js

Next.js 14 App router에 Auth.js v5 적용 후기

인증을 위한 오픈소스next-auth에서 버전이 올라가면서 이름을 바꿨다. 현재 v5는 beta이고 버그가 좀 많은 편이다.인증을 위해 Auth.js (v5)를 프로젝트(Next.js 14 앱라우터 사용)에 적용하며 느낀 Auth.js의 장점, 단점 그리고 문제점과 해결방법을 정리해 봤다.장점CSR 환경에 비해 Next.js를 활용한 SSR환경은 클라이언트단에 추가로 서버단 까지 인증을 다루기가 까다롭다. 이 때 인증을 다루기 편하게 해준다. 인증 관련 로직들이 잘 추상화되어 있다.다양한 Provider, Adapter들을 통해 github, kakao등 소셜 로그인, DB 접근 로그인을 지원한다.단점v5가 beta 버전이다보니 버그가 많다. 적용하면서 커스텀해줘야 하는 부분이 많고 오픈소스 코드를 직접..

데이터 목록 ui 공통 컴포넌트, 훅으로 관리하기

관리자 웹, CMS를 개발할 때 데이터 목록을 많은 페이지에서 보여준다. (예시: shadcn/ui table)Next.js 에서 이 데이터 목록 ui를 공통 컴포넌트, 훅으로 따로 빼서 중복을 줄이고 개발 시간을 빠르게 해봤다.구성데이터 목록 ui는 크게 3가지 영역으로 나눌 수 있다.필터검색어, 상태, 기간, 목록 건수 등 데이터 필터링 액션테이블데이터를 목록 형태로 보여줌페이지네이션데이터 목록 페이지 이동 액션필터, 페이지네이션 영역에서 사용자 액션이 발생 시 테이블에서 보여주는 데이터가 변경되어야 한다.react만 사용한다면 context로 3개 영역을 묶고 데이터를 공유하는 식으로 구현할 수 있다.Next.js를 사용할 때는 다른 방식을 사용할 수 있다. 사용자 액션 발생시에 url search..

Next.js 14 기초 활용법

Next.js 14의 기초 활용법을 정리해봤다. 1. 프로젝트 만들기 create-next-app 을 활용해서 간단하게 프로젝트를 생성할 수 있다. npx create-next-app 명령어 입력 후 TS 사용여부, Tailwind 사용여부, App router 사용여부 등 물음에 답하면 그에 맞게 프로젝트를 생성해 준다. 2. CSS 스타일링 원하는 스타일링 방식(CSS-in-JS, CSS Modules, Tailwind 등)을 선택해서 사용하면 된다. 2-1. Global 스타일 모든 루트에 적용될 스타일을 global.css 파일에 적어 놓는다. 해당 파일을 루트 레이아웃에서 import해서 적용한다. /* /app/layout.tsx */ import '@/path/global.css' 3. 폰트..