개발 마라톤

NextApiRequest와 NextRequest reactjs - FormData with NextJS API - Stack Overflow FormData with NextJS API I am trying to create a simple CRUD application using NextJS along with react-redux, so what it does is that it saves peoples contacts.So when adding a contact i am trying to send some data along w... stackoverflow.com NextApiRequest는 Next.js 13 버전 이전에 쓰이던 요청 객체이고, NextRequest는 Next.js 13 버전 ..

Next.js 13 미들웨어 사용 Next.js 13 master course - router handler (velog.io) Next.js 13 master course - middleware (velog.io) Next.js 13의 공식문서를 기준으로 번역해주시고 쉽게 풀어주신 윗 글을 통하여 공부해보았다. Next.js 13의 미들웨어 구조 Next.js 13의 미들웨어의 경우 express 미들웨어와 다르게 각자의 Router에 미들웨어를 use하는 것이 아닌, 윗 그림과 모든 router handler가 미들웨어를 경유하는 개념으로 이해했다. 그렇기 때문에 Next.js에서는 Router Handler를 특정하기 위한 matcher라는 개념이 존재한다. import { NextResponse ..

Next.js FormData 다루기 프론트엔드 FormData를 프론트단에서 어떻게 보내고 백엔드 단에서 어떻게 받아야 하는지 정리하려 한다. 우선 React 컴포넌트에 form 태그를 통해 FormData로 보낼 내용을 작성한다. 이메일 ... React에서 formData를 e.target으로 가져왔을때 인식하지 못하는 오류 · Issue #33 · 1004ljy980/CharFlyer (github.com) React에서 formData를 e.target으로 가져왔을때 인식하지 못하는 오류 · Issue #33 · 1004ljy980/CharFlyer React에서 formData를 API로 주고받는 도중, 현재 작성한 코드에 formData 내용이 비어있는 것을 확인함. // 폼 데이터 정의 c..

FileReader API로 이미지 프리뷰 하기 리액트에서 이미지 미리보기 만들어보기 (React Image Preview) — 찐이의 개발 연결구과 (tistory.com) 리액트에서 이미지 미리보기 만들어보기 (React Image Preview) 서론 HTML의 input 태그로 이미지를 핸들링할 때 현재 선택한 이미지를 미리 보고 싶은 경우가 있다. 라이브러리를 통해 구현할 수도 있지만 어떤 방식으로 구현할 수 있을까 고민해보았다. Web API nukw0n-dev.tistory.com FileReader API는 File, Blob 객체를 base64로 인코딩하여 사용할 수 있도록 한다. 내용 사용 예 FileReader 사용 const fileReader = new FileReader(); F..

이번에는 어려울 것 같아 미뤄왔던 (...) 이미지 업로드를 구현하려고 한다. 살짝 두렵기도 하지만, 이번에 경험해보면 색다른 성장을 할 수 있을 것 같아 기대된다. 이번 포스팅에서는 Amazon S3 Bucket을 세팅하고, 사용자 IAM을 세팅한 후, aws-sdk 를 활용하여 이미지를 업로드하는 내용을 정리해보았다. AWS SDK를 사용하여 Amazon S3 버킷에 객체 업로드 - Amazon Simple Storage Service AWS SDK를 사용하여 Amazon S3 버킷에 객체 업로드 - Amazon Simple Storage Service 이 설명서는 평가판 버전 SDK에 관한 것입니다. SDK는 변경될 수 있으며 프로덕션에서 사용해서는 안 됩니다. docs.aws.amazon.com ..