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

[JS] 날짜 라이브러리 비교 FE 개발을 할 때 빠질 수 없는 라이브러리가 바로 날짜 라이브러리입니다. 그렇기에 날짜 라이브러리의 대표 3 대장에 대해 알아보겠습니다. 표 Date-fns 🔗 링크 Size : 中 러닝커브 : 높음 실행시간 : 빠름 (398.107 ms) 러닝커브가 높으며, 모듈화 된 접근 방식을 취합니다. 모듈화 된 접근 방식으로 사용하다 보니 최종적으로 번들의 크기가 줄어듭니다. Date-fns의 함수는 특정 작업을 수행하기 위해 최적화되어 있습니다. 함수 하나가 하나의 작업만 수행하기 때문에, 불필요한 처리가 줄어들고 성능이 향상되지만, 함수 하나씩 계속 작업해야 되기에 불편할 수 도 있습니다. 국제화를 지원하지만, Day.js와 Moment.js에 비해 제한적입니다. Moment..

Before you learn 🔗 [React & Next.js] 프로필 이미지 (업로드, 미리 보기, 삭제) = 1개의 이미지 (업로드, 미리 보기, 삭제)이므로 먼저 보고 오는 것을 추천합니다. 🔗 Array.splice() 영상 [React & Next.js] 다중 이미지 (업로드, 미리 보기, 삭제) 파일 구조 register.jsx > HouseImages.jsx 미리 보기 거의 프로필 이미지(한 개의 이미지)의 미리 보기와 비슷하다. 다른 점은 Base64 Data URL로 화면에 보여줘야 하는데, File -> Base64 Data URL로 변환할 때 여러 개의 File이다 보니 한 번에 변환되지 않아 반복문(for문 등...)을 통해 하나씩 변환해 주어야 한다. (File -> Base64..