Sign in

dev

it dev java presignedurl cloudfront

Presigned URL과 CDN으로 이미지 업로드 & 조회 개선

들어가며안녕하세요! 요즘 플러피(Fluffy)라는 온라인 시험 제작 및 관리 서비스를 개발하고 있습니다. 보통 시험 문제에는 다양한 이미지들이 포함되어 있습니다. 플러피 서비스 또한 시험 지문에 이미지를 추가할 수 있는 기능을 만들었습니다. 처음에는 클라이언트에서 이미지를 서버로 전송하고, 서버에서 다시 AWS S3로 업로드하는 방식으로 작업했습니다. 이 방식이 궁금하신 분들은, 이전에 작성한 스프링에서 AWS S3를 이용한 이미지 업로드 방법 글을 참고해주세요. 하지만 이 방식에는 몇 가지 아쉬운 점이 있었습니다. 이미지 업로드의 경우, 이미지가 서버를 거쳐야 하기 때문에 서버의 부하가 커지고, 업로드 속도 또한 상대적으로 느립니다. 이미지 조회의 경우, S3에서 이미지를 직접 가져오기 때문에 조회 속..
wono | discuss |
it dev javascript foreach map throw

JavaScript에서 forEach, map 함수 내에서 throw Error가 되지 않을 때 해결 방법

많은 JavaScript 개발자들이 배열을 처리할 때 map 함수를 즐겨 사용합니다. 그러나 때때로 예상치 못한 문제에 부딪힐 수 있습니다. 이 글에서는 map 함수 내에서 throw Error가 작동하지 않는 상황을 해결하는 방법에 대해 알아보겠습니다. 1. 문제 상황 파악 자바스크립트의 map/forEach 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아
wono | discuss |
it dev javascript formdata

[JavaScript] new FormData(form), Object.fromEntries(iterable), how to seriazlie form data

* forms with multiple fields that have the same name * How to serialize form data with vanilla JS 1) FormData object FormData object provides an easy way to serialize form fields into key/value pairs. Form fields must have a name attribute to be includes object. Otherwise, they're skipped. Title Body Soak up the sun and swim in the ocean. Submit // Get the form let form = document.querySelector(..
wono | discuss |
it dev nextjs cors

Next.js 버전업 이후 셀프 호스팅 환경에서의 CORS

문제가 발생하는 페이지들의 CORS 에러를 확인했는데, 정기 배포 직전까지는 문제없이 동작하고 있던 곳이었어요. 특이하게도 creatrip.com 에서의 접속은 아무런 이슈가 없었지만 www.creatrip.com 도메인에서의 접속에서 문제가 발생했어요. 저희 크리에이트립에서는 Next.js 빌드 이후 생성된 정적 파일들을 Cloudfront로 제공하고…
wono | discuss |