[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..

[NextJS] Server Actions Next.js 13.4 버전 이상에서만 사용가능합니다. // /login/page.jsx export default function LogIn() { async function handleSubmit(formData){ 'use server'; console.log(formData) // 유저가 입력한 값 전체 console.log(formData.get('email')) // 유저가 입력한 email 값 console.log(formData.get('password')) // 유저가 입력한 password 값 } // 이렇게 작성해도 된다. // const handleSubmit = async(formData) => { // 'use server'; // co..

[NextJS] Route Handlers 설정 // app/api/route.ts import { NextRequest } from "next/server"; export async function GET(request: NextRequest) { } app 디렉터리 내의 route.ts (js) 파일로 정의됩니다. app 디렉터리 내에서 route.ts로 파일이름을 설정하면 NextJS가 알아서 API Router로 인식합니다. 라우터 핸들러는 app 디렉터리 내에서만 사용할 수 있습니다. HTTP 메서드 POST, GET, PUT, PATCH, DELETE, OPTIONS,... 등이 지원됩니다. 지원되지 않는 메서드를 호출하면 405번 에러가 발생합니다. (Method Not Allowed) 예시..

[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"를 사용하였으나, 이번 기회에 스스로 만들어 보고 싶었기에 만들어진 달력 ..