#이미지최적화

Next.js 이미지 최적화 방식에 대해 질문이 있습니다.

안녕하세요! Next.js 14를 사용해 프로젝트를 진행하던 중 이미지 최적화에 관해 궁금한 점이 생겨서 이 곳에 질문을 남깁니다. 프로젝트를 하며 약 500개의 이미지를 랜덤으로 추천해서 렌더링하는 기능을 구현했습니다. 현재 작업 방식은 프로젝트에서 페이지에서 이미지를 업로드 하는 기능은 필요가 없기에 MongoDB에 이미지 'URL'을 모두 저장하고 클라이언트에서 서버로 요청하면 서버에서 DB에 있는 URL을 리턴해주면 그걸 <img> 태그를 이용해서 화면에 띄우는 방식으로 구현했습니다. 하지만, 이렇게 구현하니 이미지 렌더링 속도가 조금 늦는 현상이 발생해 이를 최적화하고 싶습니다. 제가 생각했던 방법들은 다음과 같은데 어떤 방법이 좋은지, 혹은 더 나은 방법이 있는지 아시는 분이 있으면 추천해주시면 감사하겠습니다. 1. 이미지를 모두 다운받아 public 폴더에 넣고 Next/Image를 사용한다. -> 이 방법을 하려니 사진이 500개가 되고 사진마다 png,jpg 형식도 달라서 적용하는 것도 어려울 것 같고 무엇보다도 프로젝트 파일 사이즈가 커지는게 문제가 될 것 같다는 생각을 했습니다. 만약 사진이 500개가 아니라 1000개 2000개가 된다면 더더욱 그럴 것 같아서요. 이 부분에서 추가로 생각해본 방식이 파일 형식을 모두 avif로 바꾸는건데 그런 접근도 괜찮은건가요? 2. 서버에서 URL 넘어온 그대로 Next/image를 사용한다. -> 모든 파일의 url 형식이 달라서 일일이 next.config.ts에서 설정해주는 게 쉽지않을 것 같다고 생각했습니다. 그래서 모든 파일을 AWS S3에 올려놓으면 URL 주소가 같을테니 그렇게 하는 게 맞는지 궁금했습니다. 아직 제 지식이 짧아서 생각해본 방식은 위와 같은데, 추가로 좀 더 좋은 방식이나 현업에서 사용하는 방식이 있다면 알려주시면 감사하겠습니다. 긴 글 읽어주셔서 감사합니다!!!

버셀 무료 이미지 최적화 제한..

안녕하세요! 현재 next.js로 커머스 프로젝트를 진행하고 있는데, 어려움이 생겨 도움을 요청드립니다.. 저희 프로젝트에서는 외부 이미지를 3만개정도 받아와서 서버에 저장해두고 사용하고 있습니다. 아무래도 판매상품 이미지를 받아오다보니 개수가 많은데요. 버셀로 배포해놓은 상태인데, 어제보니 몇몇 이미지들이 표시되지 않더라구요. 확인 결과 버셀 무료 이미지 최적화 제한이 1000개라고 해서 해결방법을 고민중입니다 ㅠㅠ 좋은 해결 방법이 있을까요?

개발 공부를 어떻게 하는게 좋을까요? (feat. 프로젝트)

얼마 전 Next.js로 개인 프로젝트를 진행했습니다. 그런데 프로젝트를 진행해보며 제가 어떤 방식으로 개발 공부 뱡향성을 잡아야하는지 혼란스러워 질문드립니다 ,, 🙏 처음 Next.js 쓸 때는 복붙 ,, 같은 기능도 복붙해서 파일 여러 개 만들기를 하고, 서버 컴포넌트와 클라이언트 컴포넌트에 대해 잘 알지 못한채로 프로젝트를 했었습니다. (+ 상태관리나 ,, 이런 것도 아예 모르고 개발했었습니다 ,,) 이번에 제대로 공부해서 기능을 구현해보고 싶어 다시 시작해서 완성했습니다. 그런데 제가 작성한 코드를 다 이해하며 작성했지만, **제가 작성한 코드가 좋은 코드인지? 에 대한 의문이 생겼습니다.** 그래서 팀 프로젝트도 참여해보며 같은 프론트 팀원 분의 코드를 확인해보며 좋아보이는 부분은 참고도 했지만, 이 방법도 한계가 있었습니다. 더 잘해보고 싶어 빨리 보여져야하는 이미지는 이미지를 미리 로드한다거나, next/image로 이미지 최적화를 하고 최대한 코드 중복을 줄이고자 공통 컴포넌트들을 만들기 위해 노력하긴 했었습니다. (나중에 스토리북 이라는 라이브러리를 알게되어 이걸 사용해보지 못한게 아쉽긴 했습니다.) 그래도 많이 부족한거 같아 어떻게 더 나은 개발을 해야할지 잘 모르겠습니다 ,, 첫 프로젝트에서는 부트스트랩 외에는 사용해보지 않아 이번에 제대로 다양한 기술을 써보고자 시도도 해보았습니다. (> 서버 상태 관리를 위해 tansack query도 사용해보고 클라이언트 상태 관리를 위해 recoil을 사용하고, 스타일링에는 css in js가 궁금해 styled components, 직접 어느정도 깔끔한 디자인을 하고싶어 피그마 툴을 이용해보았습니다. 소셜 로그인도 넣어보고 몽고 db 사용하며 데이터베이스도 연결해보았는데 ,, 막상 완성하고 나니 제가 많이 부족하다는 생각이 들었습니다.) 🤔 제가 작성한 코드가 좋은 코드인지 ,, 더 나은 성능을 위해 어떤 개발을 하면 좋은지와 같은 부분은 제가 어떻게 학습하는게 가장 좋은 방법일까요? 또한 어떤 것을 더 배워서 적용해보는게 좋을까요? ,, (제가 생각했을 때 프로젝트를 완성은 했지만, 제 프로젝트의 매력적인 점이 없는거 같아 너무 아쉬운거 같습니다.)

프로젝트 기술을 선택할 때, 폴더 라우팅같은 장점들 때문에 ssr을 사용하지 않고 Next를 이용하는 것이 타당한 이유가 될까요?

<프로젝트에 대한 설명을 간단히 드리자면...> 동아리 프로젝트입니다. 학교 학우들을 대상으로 하는 고정 타겟층이기에, ssr을 통해 SEO를 높일 필요가 없고, 서비스 크기가 작은 서비스를 만들려합니다.(앱 내의 웹뷰로만 이용자가 접근 가능하게 하려합니다.) <next를 선택한 이유는 아래와 같습니다.> 1. 이미지 최적화와 같은 자동 최적화 기능과 폴더 구조를 통한 직관적 라우팅 등의 이유 (인터렉션이 많아서 서버 컴포넌트보단 클라이언트 컴포넌트의 사용 비중이 더 높을 것 같습니다.) 2. 채용 공고에서 기업들의 next.js 사용 경험에 대한 선호도 (많은 기업들이 next에 대한 경험을 이력에 요구하기 때문에, 괜스레 next를 실제 서비스에서 한 번쯤을 활용해봐야 하는것은 아닌가 조바심도 듭니다.) <제가 고민하는 부분은...> next를 사용하는 가장 큰 이점은 ssr이라고 생각이 됩니다. 선택한 기술의 가장 큰 이점을 사용하지 않고 다른 이점들을 이유로 기술을 선택했다라는게 이력서를 확인한 면접관 입장에서 과연 수긍할 수 있는 부분일까 의문이 듭니다. 개발을 시작한지 2년이 채 안되가기에, 기술 선택에 있어 확신이 없는 것 같습니다. 현업자 분들의 조언이 정말 큰 도움이 될 것 같습니다!

NextJs에 따로 백엔드를 두는경우

안녕하세요. 토이프로젝트로 글, 댓글, 로그인 기능을 포함한 블로그를 만들어보고있습니다. 원래 프론트엔드는 ReactJs, 백엔드는 Golang으로 만들려고 했는데, 글 기능을 구현하던 중 글기능은 SEO가 필요한데, React는 그게 잘 안되서 원래 React프로젝트 구조를 유지하고 SSR로 렌더링 하기 위해서 NEXTJs로 바꾸려고 합니다. 또 이미지 최적화 기능이나 폴더기반때문에 편하기도 하고요. 근데 Next로 프론트엔드만 바꾸고 GO 백엔드는 유지하려고 하는데, NEXTJS를 프론트로 사용하고 따로 백엔드를 두는게 많이 쓰이는 방식인가요..? NEXT가 백엔드기능까지 제공하는 풀스택 프레임워크로 알고있는데 백엔드서버를 따로 두는게 바보같은 방식인가 궁금합니다.

Nextjs를 정적 웹 호스팅(dothome)으로 배포하게 될 때 문제점

안녕하세요. 이번에 맡게된 프로젝트에서 SEO가 중요하다고 판단되어 Nextjs를 사용하여 개발하였습니다. 그런데 저희 팀이 사용하고 있는 웹 호스팅 서버가 dothome입니다. dothome은 정적 웹 사이트 호스팅 서버라고 알고 있는데, 이 서버로 호스팅하게 되면 몇 가지 문제점이 있다고 판단되어 질문을 남기게 되었습니다. 1. dothome에 배포하기 위해 정적 빌드를 하게 되면, 서버 사이드 렌더링(SSR) 기능을 사용할 수 없게 되는데, 이는 NextJS를 사용해서 얻을 수 있는 SEO 측면의 이점을 얻을 수 없게되는 건가요? 그렇게 된다면 SEO를 개선하는 방법이 있을까요? 2. Nextjs에서 제공하는<Image> 태그가 서버 측에서 이미지 최적화기능을 제공하는 것으로 알고 있는데, 정적빌드를 사용하게 되면 일반적인 img 태그와 다를 바가 없어지는 걸까요? 3. 마지막으로 Nextjs를 사용하기 위해서 웹 호스팅을 변경하는 것이 좋을지, 변경해야한다면 어떤 것을 추천하지는 시 여쭤봅니다.

Next 가 sharp를 기본 세팅 안하는 이유

Next 에서는 이미지 최적화모듈로 squoosh 를 사용하고 있는데 정작 sharp 를 설치하는 것을 권장하고 있습니다. 그러면 처음 세팅할 때 sharp를 다운로드 하는게 더 귀찮은 설명을 제공안해도 될 것 같은데 그러지 않는 이유가 궁금해졌습니다. 단순히 squoosh 가 설치가 빨라서 그런 것인가요? 다른 이유가 있을까요?

Next.js 배포 어떻게 해야할까요?

안녕하세요 프론트엔드 취준생입니다. 사이드프로젝트를 vercel로 배포해두었는데 많은 이미지를 처리하다보니 vercel 측에서 제공하는 이미지 최적화 무료횟수를 초과하여 배포가 중단이 되버렸습니다 ㅠ 그래서 이번기회에 새로운 배포방법을 배워볼려하는데 어떤조합으로 해야할까요? S3는 정적배포이기때문에 next의 서버함수들을 사용하지못한다고 알고있습니다