리액트

CSR의 대표적인 단점 중 하나인 취약한 SEO 점수와 모든사람들이 사용할 수 있는 서비스를 만들기 위한 웹 접근성 개선작업을 수행해야한다.    웹 접근성과 SEO을 개선하기 이전의 점수이다.접근성은 페이지 마다 상이하지만, 가장 낮은 메인페이지의 점수가 69점, SEO 점수는 83점을 기록하였다. SEO : 검색엔진 최적화🔍 React의 SEO리액트와 같은 SPA는 SSR과는 달리, 초기에 HTML이 최소한의 내용을 포함하고, 대부분의 콘텐츠는 JS를 통해 클라이언트측에서 렌더링이 되는 방식이다. 모든 크롤러가 아닌 많은 크롤러들이 JS를 지원하지 않기 때문에 이와 같은 문제가 발생한다고 한다.(구글봇은 JS를 지원해서 SEO가 나쁘지 않다고 함)Next.js를 이용한 프로젝트에서는 별다른 작업을 ..

진행중인 프로젝트는 반려동물의 기록과 사진 공유가 주된 기능인 만큼, 이미지 최적화 작업이 중요하다고 생각했다.번들사이즈를 열심히 줄여도 KB단위지만.. 이미지는 단위부터 MB이므로, 이미지 최적화는 필수이다. Next.js의 이미지 최적화Next.js는 next/image를 통해 기본적으로 다음과 같은 이미지 최적화 작업을 수행해준다.But, 리액트는 이와 같은 이미지 최적화를 자동으로 처리해주지 않으므로, 직접 최적화 작업을 수행해야한다...!🫣  자동 resizingWebp 같은 최신 이미지 포맷 지원Lazy Loading로 페이지 로딩 속도 향상CDN 지원이미지 최적화를 위한 여러가지 방법들을 공부해면서, 적용해보았다.  1. browser-image-compression 활용한 이미지 폭, 타..