YG - 96년생 , 강아지 있음, 개발자 희망

React에서 react-toastify로 효과적인 알림 구현하기개발을 하다 보면 사용자에게 작업의 성공, 실패, 진행 상태 등을 알려줄 필요가 있습니다. 이런 알림(notification)을 구현하는 방법은 여러 가지가 있지만, React 환경에서는 react-toastify 라이브러리가 가장 인기 있고 사용하기 쉬운 선택지 중 하나입니다.이 글에서는 react-toastify를 설치하고 효과적으로 사용하는 방법, 그리고 Portal을 활용해 더 나은 구조로 구현하는 방법까지 알아보겠습니다.react-toastify란?react-toastify는 React 애플리케이션에서 토스트 메시지(작은 알림 팝업)를 쉽게 구현할 수 있게 해주는 라이브러리입니다. npm에 따르면 주간 다운로드 수가 230만개 이상..

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 프리티어를 활용해..

manifest.json "background": { "service_worker": "background.js" },"permissions": [ "tabs",... background.jschrome.runtime.onMessage.addListener((request, __, sendResponse) => { console.log("Received message:", request); // 메시지 처리 로직 if (request.action === "doSomething") { console.log("Action performed."); sendResponse({ status: "success" }); } else { sendResponse({ status: "..

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. vite에서 배포하고 /details/1, /edit/1 이런 :id를 받는 곳에서 새로고침을 하거나 새 탭으로 접속할 때 흰 화면이 나오면서 해당 에러가 나왔었다. 그래서 vercel 배포 문제인줄 알고 netlify로 바꾸기도 했었지만 그대로이길래 구글링을 통해서 해결방법을 찾았어요.  기존에는 base가 '.' 으로 되어있었는데 '/'으로 고치고 난 뒤 ..

맥에서 소프트웨어 업데이트를 하고 난 뒤 기존에 잘 사용하던 소프트웨어가 정상적으로 작동하지 않는 경우가 있습니다. 아래의 명령어를 통해서 해결해야 합니다 에러 메세지 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun   xcode 명령어를 터미널에 입력해줍니다.xcode-select --install     참고자료  Mac 업그레이드 후 xcrun: error: invalid active developer path 에러 해결하기MacOS 업그레이드 시 어김없이 발생하는 문제가 하나 있..