TypeScript2 Next.js App Router + Tailwind + Prettier + ESLint + husky 세팅하기 Next.js App Router 개발환경 세팅하기이번엔 Next.js App Router 연습도 할 겸, 새 프로젝트를 시작했다!세팅은 매번 헷갈릴 수 있어서 한 번에 정리해두려고 한다.설정하면서 기록도 남기면 나중에 다시 참고하기 편하니까 블로그에도 써보는 중 😎 0. 프로젝트 생성 (Next.js + App Router)https://tailwindcss.com/docs/installation/framework-guides/nextjs Install Tailwind CSS with Next.jsSetting up Tailwind CSS in a Next.js project.tailwindcss.com App Router 기반으로 시작했고, 타입스크립트 + Tailwind + ESLint도 한 번에.. 2025. 5. 17. 페이지네이션 초간단 구현하기 (React) 📄리액트로 페이지네이션 초간단 구현하기1. 기본 설계페이지네이션은- 현재 페이지- 전체 페이지 수- 한 페이지에 표시할 개수가 필요하다!const [currentPage, setCurrentPage] = useState(1);const itemsPerPage = 4; 2. 데이터 필터링const totalPages = Math.ceil(filteredHabits.length / itemsPerPage);const displayedHabits = filteredHabits.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage,);한 페이지 당 4개가 보여야 하기때문에 slice를 해준다!!ex) currentPage가 1일 때, (1.. 2024. 12. 23. 이전 1 다음
