본문 바로가기

s33

REST API Response(JSON)를 CDN을 활용하여 캐싱하기 목차 - 웹서비스에서 캐싱 대상과 방법 - 캐시 대상 - 캐시 방법 - REST API Resonse(JSON)를 CDN을 활용하여 캐싱하기 - CDN을 활용한 캐싱의 장단점 - 캐싱하기 예제 (조건, 구현, Cache-Control) - 마치며 웹 서비스에서 캐싱 대상과 방법 웹 서비스에서 캐싱은 중요합니다. 사실 필수적이라고도 볼 수 있죠. 캐싱 덕분에 서버의 응답 시간과 부하를 크게 줄일 수 있습니다. 캐싱 대상 이미지, 동영상부터 html, js, css, json 등 클라이언트와 서버가 주고받는 데이터들은 모두 캐싱 대상으로 볼 수 있습니다. 컨텐츠가 자주 안 바뀌고(정적), 바뀌는(동적) 기준으로도 구분하기도 합니다. - 정적 컨텐츠(*.html, *. js, *. css, image, vid.. 2023. 5. 5.
S3에 이미지 업로드 기능 아키텍처 비교 (서버에 직접 전송, presigned URL 활용) 잘못된 내용이나 의견 있다면 편하게 말씀해주세요.🙏🏻 사이드 프로젝트를 하며 유저 프로필이나 음식점 리뷰 사진 등 이미지 업로드 기능이 필요했습니다. 처음엔 이미지를 업로드 기능을 단순하다고 느꼈지만 생각보다 고려할 것이 많았습니다.😵‍💫 떠올랐던 Check List - 이미지 업로드/삭제 , 원본 파일 크기 제한(저장 공간 제약, 비정상적인 요청 방지) - UI 마다 이미지 사이즈를 다르게 저장(리사이징) - 빠른 응답을 위한 CDN 사용 - 파일 접근 권한 (비공개 이미지에 익명의 사용자가 접근하는 문제) 이번 글에서는 이미지 업로드 기능을 구현하는 간단한 세 가지 방법(아키텍처)을 소개/비교하고자 합니다. 이미지 업로드 유저가 자신의 프로필 사진을 수정한다고 가정합니다. 이미지는 클라우드 스토리지(.. 2022. 9. 4.
GitHub Actions를 활용해 React를 S3, CloudFront를 사용해 배포하기 이 글은 AWS의 S3, CloudFront를 사용해 리액트 프로젝트를 배포한다. 이 과정을 Github Actions를 활용해 자동 배포를 소개하고자 한다. 잘못된 내용이 있다면 편하게 말씀해주세요 🙏🏻 들어가기에 앞서 배포 방법은 다음과 같다. React 프로젝트의 빌드 결과는 정적 리소스 파일(.html, .js, .css ...)이다. 이를 S3에 올린다. 정적 리소스 파일이기에 S3의 baseURL에 index.html를 연결시켜주면 클라이언트는 baseURL에 들어왔을 때 index.html를 받게 된다. 이때 보통 CSR(클라이언트 사이드 렌더링)로 작동하기에 클라이언트의 브라우저는 S3에 필요한 리소스(. js,. css...)를 요청한다. 마치 nginx가 정적 리소스 전달하는 것처럼 보.. 2022. 6. 14.