
Next.js에서 파일을 업로드할 때, 기본적으로 요청 크기 제한이 1MB로 설정되어 있어 대용량 파일을 업로드하면 문제가 발생할 수 있습니다. 저도 AWS S3에 이미지를 업로드하는 과정에서 'Body exceeded 1MB limit' 오류를 만났는데요. 🤯 이 문제를 해결하는 방법은 여러 가지가 있습니다. 저는 1) Next.js의 API 요청 크기 제한을 늘리는 방법과 2) Presigned URL을 활용해 S3에 직접 업로드하는 방법을 시도해봤습니다. 각각의 방법을 비교하고, 최종적으로 어떤 방식을 선택했는지 공유해보겠습니다! 🚀 해결방법 1 Nextjs는 기본적으로 !MB의 요청 크기 제한을 가지고 있는데요. 이를 늘리려면 bodyParser 설정을 변경해주면 됩니다. 기존 코드에서 e..

AWS S3에 이미지를 업로드할 때 사용하는 패키지 종류가 2개가 있어서 비교해봤는데요. @aws-sdk/client-s3와 @aws-sdk는 모두 AWS SDK를 사용하는 패키지이지만, 사용하는 방식과 포함된 기능이 달랐습니다. @aws-sdk/client-s3와 @aws-sdk의 차이 패키지목적특징@aws-sdk/client-s3S3 전용 클라이언트S3 객체 업로드, 삭제 등 S3 관련 기능만 포함@aws-sdkAWS SDK v3의 상위 모듈S3뿐만 아니라 DynamoDB, Lambda 등 다양한 AWS 서비스 지원 aws-sdk/client-s3 설치 저는 S3에 대한 기능만 사용할거라서 @aws-sdk/client-s3를 설치하기로 했습니다. @aws-sdk/client-s3AWS SDK fo..

저번 글에서 1년만에 프로젝트를 AWS의 EC2와 RDS를 이용해서 배포했는데요. 복구하고보니 이미지를 업로드하거나 불러올 때 Cloudflare를 사용했었는데 지금은 요금을 따로 내고있지 않아서인지 속도가 느렸고, 업로드도 되지 않았습니다. Cloudflare 이미지 업로드, 비용 문제가 생기다 Cloudflare가 얼마일까 알아봤습니다. 매달 5달러 정도면 충분히 이용할 수 있지만 AWS 프리티어 기간이기 때문에 AWS의 S3, CloudFront로 비용 절감을 하면서 기능을 살려볼까 합니다. 그리고 추후 비디오 기능도 넣을 수도 있는데, Cloudflare에서는 비디오 요금제에서도 5달러를 따로 결제해야 하는 부분에서도 별로라고 생각했습니다. AWS 프리티어로 대체할 수 있을까?Amazon S3 (..

예전에 진행했던 포트폴리오 사이트 프로젝트를 이어가려 하는데, 오랜만에 'coDDink' 프로젝트를 다시 살펴봤습니다. 1년 동안 방치된 프로젝트였지만, 다시 살려보고 싶어졌어요. 프로젝트를 다시 살리려고 보니 첫 번째 난관에 부딪혔습니다. 기존에 사용하던 PlanetScale이 2024년 4월부터 Hobby 플랜을 중단했다는 소식이었죠. 무료로 사용할 수 있었던 서비스가 이제는 유료로만 이용 가능하다니, 학생이나 취준생의 입장에서는 꽤나 부담스러운 변화였습니다. Hobby tier deprecation - FAQ — PlanetScaleLearn how to use PlanetScale to power your application.planetscale.com 고민 끝에 AWS 프리티어를 활용해..

1. vite 설치하기 Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev npm create vite@latest 저의 경우 React를 사용하기에 React를 선택했습니다. 타입스크립트를 설정해 줍니다. 기본과 swc 둘 중 어느 것을 선택해도 상관없습니다. 2. src를 만들고 패키지로 만들 코드를 보관할 폴더인 lib를 만들어줍니다. 패키지가 여러 개라면 다음과 같이 작성했습니다. src/lib/index.tsx export { default as Container } from './Container'; export { default as Flex } from './Flex'; export { default as Grid } from './Grid'; export { defau..

문제점 netlify로 배포 시 node 버전이 다르다고 배포 실패가 나옴. 7:21:12 AM: error 08_link_data@0.1.0: The engine "node" is incompatible with this module. Expected version "16.13.2". Got "16.19.0" 7:21:12 AM: error Found incompatible module. 버전이 다르다는 뜻.. 어떻게 해결해야 할지 몰랐지만 조금 검색해보니 나왔습니다. 해결방법 배포 프로젝트의 delpoy 셋팅에 들어가서 왼쪽 탭 Environment variables를 눌러줍니다. 그리고 Add a variable을 눌러줍니다. NODE_VERSION 고생하셨습니다. 사이트가 정상적으로 배포가 되었네..

시작 heroku에서 무료 티어 버전을 폐지한 것을 알고 fly.io로 이사를 시도하였다가 실패하게 되어서 cloudtype.io로 이사하게 되었습니다. 모두의 플랫폼팀, 클라우드타입 클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다. cloudtype.io 1. 로그인 2. 배포하기 깃 허브 계정을 연결 후 원하는 레포지토리를 설정해 줍니다. 3. 서버 커맨드 설정하기 프로젝트에 들어와서 설정을 누릅니다. 들어오시면 start command가 기본적으로 npm start로 되어있는데 각자 환경에 맞춰서 node 파일명. js로 설정해주시면 됩니다. 또한 install command에서 npm ci --production을 입력해주시면 packa..

각종 토이프로젝트와 원티드 프리온보딩을 하며 json-server을 이용해서 개발하였는데 이때 사용된 히로쿠 웹서버가 freetier을 지원하지 않게됨으로써 이사를 해야했다. 우선 저는 WSL2 환경입니다. FLY.io 설치 방법 여기서부터 막혔는데 WSL2는 linux 기반이기에 linux 커맨드를 이용해서 설치했습니다. curl -L https://fly.io/install.sh | sh 이 때 별다른 설정을 하지 않으면 command not found가 나오게 되는데 The Fly Global Application Platform Documentation and guides from the team at Fly.io. fly.io 로그인 방법 flyctl auth signup The Fly Glob..
- Total
- Today
- Yesterday
- Storybook
- C언어
- 윤성우 열혈C프로그래밍
- nextjs
- 프론트앤드
- 북클럽
- NextRequest
- 스토리 북
- 원티드
- CLASS
- createPortal
- env
- nodejs
- NextApiRequest
- 노개북
- TopLayer
- 아차산
- 위코드
- javascript
- electron
- WSL2
- React
- import/order
- 프리온보딩
- jest
- 우아한테크코스
- error
- 초보
- 노마드코더
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |