Next.js2 폴라보는 이미지를 이렇게 최적화합니다. 서비스 소개 폴라보는 DDD 웹 1팀에서 진행하고 있는 프로젝트로, 친구 혹은 연인들끼리 "보드"를 만들어 폴라로이드를 붙이면서 보드를 꾸미고 추억을 공유하는 서비스입니다. 제가 이미지 관련된 기능 개발을 담당하게 되면서, 어떤 식으로 이미지를 최적화했는지 소개해보려고 합니다. 이미지 압축을 통한 로딩 시간 개선1. browser-image-compression압축 없이 이미지를 업로드하면서 보드에서 폴라로이드 사진을 로딩하는 시간이 너무 오래 걸리는 문제가 있었습니다. 이를 해결하기 위해 S3에 이미지를 업로드하기 전에 먼저 압축하는 방법을 선택했고, 이 과정에서 browser-image-compression이라는 라이브러리를 사용했습니다.const file = event.target.files[0].. 2024. 8. 28. [Next.js] Data Mutation: Server Actions 1. Server ActionsNext.js의 server component는 hydrate되지 않은, 즉 interactive하지 않은 컴포넌트로 useState, useEffect 없이 데이터를 불러올 수 있다. 데이터를 변경시켜야 하는 상황에서는 server actions를 사용하면 API route 없이 서버 측에서 직접 DB에 접근할 수도 있고, 페이지 렌더링 과정에 참여하게 된다. 기존에 browser -> (front server ->) backend server -> DB 의 구조를 browser -> front server -> DB로 줄인 것이다. 장점- network 요청 수를 줄일 수 있다- SEO 향상- 민감한 데이터를 클라이언트 측에 노출시키지 않고 처리할 수 있다- client.. 2024. 7. 16. 이전 1 다음
