Before you learn🔗 [NextJS] pagination[NextJS] Infinite Scroll (무한 스크롤)영상Why Use?무한스크롤과 페이지네이션의 사용 이유는 간단하다. 페이지를 들어갈 때마다 서버에서 해당 페이지에 대한 모든 데이터 리스트들을 받아서 보여준다면,데이터가 많으면 많을수록 서버가 한 번에 처리해야 되는 데이터 양이 많이 지므로 서버가 더욱 좋아야 할 것이며,화면을 보여주는데 시간도 오래 걸리고, 그러면 그만큼 사용자 경험도 좋지 않으며, 사용자 경험이 좋지 않으면 유저 이탈수가 증가할 것이고, 이탈수가 증가하면 그만큼 회사의 손해이기 때문이다. 흡사 캐시를 사용하는 이유도 이러하다. 캐시도 기회가 되면 한 번 알아두면 좋겠다. 동작 방식페이지네이션을 이해하고 있으면..

[React & NextJS] useFormStatus Before you learn 🔗 Server Action useFormStatus const { pending, data, method, action } = useFormStatus(); useFormStatus는 마지막 form submit의 상태 정보를 제공하는 Hook입니다. useFormStatus Hook은 form의 자식요소로 사용되어야 하며, 상위 form에 대한 정보만 반환합니다. Hook을 호출하는 동일한 컴포넌트나 자식 컴포넌트에서 렌더링 한 form의 상태 정보는 반환하지 않습니다. 예시 form의 submit 상태를 확인하는 pending을 이용하여 Log in 버튼 활성화 유무를 설정한다. // /login/page.jsx ..

[React & NextJS] useFormStateBefore you learn🔗 Server Actions useFormStateconst [state, formAction] = useFormState(fn, initialState, permalink?); useFormState는 form action의 결과에 따라 상태를 업데이트할 수 있는 Hook입니다.(useState와 유사합니다.) state는 formData와 함께 호출되는데, 처음에는 초기값 state와 함께 호출되고,그 다음부터는 이전 action에서 return 된 state와 함께 호출됩니다. 예시// /login/page.jsx"use client";import { useFormState } from "react-dom";impo..

[React & NextJS] 켈린더 만들기 (DateCalendar) (feat. Day.js) Day.js를 사용하여 만들었습니다. (날짜 라이브러리) Before you learn 🔗 Modal 만들기 🔗 날짜 라이브러리 비교 🔗 Day.js 라이브러리 영상 라이브러리 선택과 이유 ● 달력 라이브러리 1. ReactDatePicker 2. MUI ● 🔗 날짜 라이브러리 비교 처음에 완성된 달력 라이브러리를 사용하려고 하였으나, ReactDatePicker와 MUI 둘 다 React를 중점으로 사용하기에 Next.js(필자는 Next.js를 사용 중임)에서 잘 작동되지 않았다. 그리고, 기존에는 input의 type="date"를 사용하였으나, 이번 기회에 스스로 만들어 보고 싶었기에 만들어진 달력 ..