인프런 커뮤니티 질문&답변
작성한 질문수
aws lambda로 lazy loading 구현
해결된 질문
작성
·
314
0
(안녕하세요. 제로초님 매번 질문드릴때마다 빠르게 답변해주셔서 정말 감사 드립니다.)
지금 useInfiniteQuery를 통해 게시물의 정보들을 한번에 모두 받아오는 것이 아닌 5개씩 나눠서 받아오도록 구현을 마쳤습니다. 그리고 여기에 한번더 최적화를 진행하기 위해 lazy loading image 기법을 도입하려고 하는데요
도입이유는 사용자가 처음 받아오는 이미지를 모두 다 볼 수 있는 형태가 아니기 때문입니다. 일반적인 모니터라면 사용자는 1개의 게시물 밖에 보지 못합니다. 그래서 이러한 점에서 나머지 4개에는 resize(50*50)정도로 사진 크기를 줄여서 전송하고 사용자가 스크롤을 하여 화면을 내리면 intersection observer를 통해 사용자가 볼수 있는 정도의 resizing된 이미지를 요청하여 화면에 렌더하려고 합니다.
그러기 위해서는 thumb파일 이외에 50* 50 사이즈의 이미지를 저장하는 파일을 한개 더 만들려고 하는데 여기서 막혔습니다.
궁금한게 aws-lambda를 한개 더 만들어야 하나요?
아니면 resizing해주는 lambda한개에서 2종류의 resizing처리가 가능한가요?
return 부분의 callback 함수에 파라미터를 어떻게 넣어야 하는지 잘 모르겠습니다..
그리고 제가 하려는 최적화 방식이 효과 있는 방식이 맞는건가요?혹시 제거 간과 하고 있는 부분은 없는지 궁금합니다..
답변해주시면 감사하겠습니다.
답변 2
1
하나 이해가 안 되는 점은 thumb이랑 50x50의 용도 차이가 무엇인가요? 차라리 blurHash를 사용하시는 건 어떤가요?
람다는 두 개 쓰셔도 되고 하나만 써서 두 가지로 구분해도 됩니다. 두 가지로 구분하려면 람다 요청 시 쿼리스트링 같은걸로 어떤 유형의 리사이징인지 구분을 해주면 될 것 같습니다. callback의 첫 번째 인수는 에러이고, 두 번째 인수는 응답 반환값입니다.
https://github.com/mcnaveen/blurhash-from-url
이런 것 등등의 오픈소스들이 많습니다. 처음에 컨텐츠 업로드할 때부터 블러해시를 생성하셔서 저장해두셔도 됩니다.
0
안녕하세요, 인프런 AI 인턴입니다.
AWS Lambda 함수를 사용해서 각각 다른 사이즈의 이미지를 생성하는 방법에 대해 질문하신 것으로 이해했습니다.
같은 문제에 대해 다른 학습자님의 질문에 강사님께서 답변해주신 내용이 있어 링크를 공유드립니다. 해당 답변에서는 Lambda 함수 하나에서 여러 종류의 이미지 사이즈 리사이징 처리가 가능한지에 대한 내용이 언급되어 있습니다. 자세한 구현 방법과 최적화 방식에 대해서는 링크를 참조해주시길 바랍니다.
강의 내용과 관련된 부분을 참고하시면 현재 구현하고자 하는 기능에 대한 해결책을 찾으실 수 있을 것입니다.
유튜브 외국 강의에서 보니깐 이미지 src를 직접 blurHash 웹사이트에 넣어서 blur처리 된 이미지를 다운 받고 그 다운받은 이미지를 활용하여 lazy laoding에서 사용하던데 실제 애플리케이션에서 이미지를 게시 할떄는 그런 번거로운 작업을 할 수 없으니 람다의 resizing기능을 이용하여 50*50 으로 만든 이미지로 blurHash를 사용하여 만든 이미지를 대체할 생각이였습니다.
혹시 이미지 src의 주소만 있으면 자동으로 blur처리해주는 방법이 있나요? 일단 제가 찾아보긴했는데 찾지를 못했습니다.
즉 처음에 보여지지 않는 이미지들은 50*50의 이미지를 다운받고 스크롤 다운을 하면 250* 250이미지를 보여줄 생각이였습니다.