☁️ 프론트엔드의 한계에 부딪혔을 때, AWS 친구들을 부르는 법
구버전 브라우저에서 PDF 뷰어 문제가 계속 발생해서 S3 + Lambda를 활용해 PDF를 이미지로 자동 변환하는 서버사이드 솔루션으로 근본적으로 해결했고, 프론트엔드 개발자도 백엔드/인프라까지 알아야 진짜 문제 해결이 가능하다는 걸 깨달았다는 이야기
2025년 8월 27일
제 블로그에 오신 것을환영합니다!
기록들
React Query의 무한 스크롤
무한 스크롤은 사용자가 페이지를 내릴 때마다 자동으로 데이터를 추가로 불러와 보여주는 UX 방식이다.Intersection Observer와 React Query의 useInfiniteQuery 훅을 활용하면 효율적으로 무한 스크롤을 구현할 수 있다. 핵심은 관찰 대상이 뷰포트에 들어오면 다음 페이지 데이터를 불러오고, 마지막 데이터까지 자연스럽게 이어주는 것이다.2023년 4월 17일
간단하게 사용해보는 React Query
React에서 데이터 패칭과 상태 관리는 복잡해질 수 있는데, React Query를 사용하면 데이터 패칭, 캐싱, 동기화, 뮤테이션 등을 간편하게 처리할 수 있다. useQuery와 useMutation 훅을 활용하면 로딩, 에러, 최신 데이터 반영 등 다양한 요구사항을 쉽게 구현할 수 있으며, invalidateQueries, Optimistic Updates 등 고급 기능도 지원한다. 적절한 옵션 설정과 쿼리 키 관리로 효율적인 데이터 최신화와 캐싱이 가능해진다.2023년 2월 20일
(AWS)S3, CloudFront 간단한 사용기
AWS S3는 대용량 데이터를 저장하는 객체 스토리지 서비스로, 버킷을 생성해 정적 웹사이트를 호스팅할 수 있다.CloudFront는 전 세계에 분산된 CDN 서비스로, S3와 연동해 정적 웹사이트의 콘텐츠를 빠르고 효율적으로 전달한다.S3 버킷 정책과 퍼블릭 엑세스 설정, CloudFront 배포 설정을 통해 웹사이트 성능과 접근성을 높일 수 있다.2022년 6월 17일