프로젝트

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 활용한 이미지 폭, 타..

사진 공유가 메인 서비스 특성 상, 텍스트보단 이미지의 관심도가 높기 때문에 이미지를 먼저 배치하였다. 그러다보니, 우려했던대로 이미지가 로딩되고나서 텍스트가 밀리게되면서 대규모 레이아웃 현상이 발생하였다. 여러장의 이미지의 경우에 CLS 점수가 0.8로 어마어마하다... 👉🏻 placeholder로 레이아웃이 밀리는 현상을 방지하려고 한다.  ❗️ 문제점처음엔 이미지를 업로드하는 사용자 입장에서, 게시물의 이미지가 규정된 사이즈 (1:1, 3:4)을 사용하면 이미지 잘림현상이 발생하는것을 피하고 싶었기 때문에 이와 같이 이미지 사이즈를 정의할 수 없었다.하지만, 이 방식을 유지한다면 기존의 원본비율을 이미지 로딩전엔 알수가 없다보니 placeholder을 정의하기가 난감해진다placeholder만 ..

❗️firebase store에서는 부분 텍스트 검색을 지원하지 않는다. ex) 귀여운 호두라는 유저를 검색하기 위해서, 호두라고 검색하면 쿼리가 불가능하다. 접두어가 일치하도록 입력해야 찾고자하는 유저를 검색할 수 있다 이와 같은 상황이라면, 검색기능에 큰 의미가 없는것 같아 부분 문자열로 검색이 가능하도록 해결해보고자 한다.  export const cleaningText = (text: string): string => { // 특수문자 및 공백 제거, 다양한 언어 지원 const regEx = /[`~!@#$%^&*()_|+\-=?;:'",.\{\}\[\]\\\/ ]/gim; const cleanText = text.replace(regEx, "").toLowerCase(); return ..

CSR의 대표적인 초기 로딩속도를 개선하기 위한 작업들을 수행해보았다. 1. React.lazy와 Suspense 적용하기 SPA의 대표적인 단점으로, 최초 로드시 필요하지 않을 수 있는 모든 파일을 다운받기 때문에, 초기 로딩속도가 길어진다는 점이 있다. 이를 개선하기 위한 대표적인 해결방법중 하나가 lazy Loading이다. 동적 load  해당 모듈이 필요할 때만 로드 → 코드 스플리팅(code splitting)과 지연 로딩(lazy loading)을 가능 → 사용자가 특정 페이지나 기능에 접근할 때 필요한 리소스만 다운로드멍냥생활 서비스의 라우트는 다음과 같이 정의되어 있다.const PATHS = { main: "/main", logIn: "/", signUp: "/signup", f..

좋아요는 많이 사용되는 기능이기 때문에, 성능 최적화를 위해 로직을 분리하는것이 더 효율적이라고 판단하여 이에 대한 작업을 수행하였다. 게시글과 댓글, 대댓글에 좋아요가 가능하도록 구현되어 있고, 좋아요에 대한 collection 또한 분리해두고, post와 comment는 likeCount 필드를 가지고 있어서, 좋아요가 변경될때마다 쿼리를 하지 않도록 하였다.  📎 DB collection 참고https://s-organization-335.gitbook.io/meongnang Firebase DB 설계 | 성능 최적화 & 기술적 의사결정👤 User Users FieldType ㄴ Following FieldType ㄴ Follower FieldType Follow 정보를 User 테이블에서 한번..

로그인 상태 유지 로그인 상태 전역 관리firebase는 로그인이나 회원가입을 하면, 이와 같이 user정보를 리턴해준다.이 유저 정보를 통해 로그인 상태와, 프로필, 본인의 게시글/댓글 여부같은 작업들을 할것이므로 전역(zustand)으로 user정보를 관리한다.처음엔 새로고침이 발생해도 전역 상태 초기화가 발생하지 않도록, zustand의 persist 미들웨어를 사용하여 localStorage에 담아 이 로그인 상태(유저 정보 존재 여부)를 유지가 되도록 해야겠다고 생각했다.하지만, 찾아보니 firebase 인증 시스템이 사용자의 로그인 상태를 관리하기 위해, 인증 토큰을 사용하고 이 인증토큰의 시간이 약 1시간 정도이기 때문에, 이 토큰이 만료되거나 갱신에 실패하면 로컬스토리지에는 로그인상태이지만..

SSR와 CSR의 SEO CSR (React.js) CSR(ClientSide Rendering)의 경우 초기에 빈 html 문서를 전달하기 때문에, 봇이 데이터를 수집하기 어렵기때문에 SEO에 불리하다.   SSR(Next.js)하지만, SSR(ServerSide Rendering)은 클라이언트가 요청한 페이지를 서버에서 동적으로 생성해 브라우저에 보내는 방식으로, 이미 서버쪽에서 만들어진 완성된 html을 검색엔진들이 크롤링이 가능하기때문에 검색에 유리해진다. SEO 진단✅ SSR의 장점인 SEO 성능 최적화 작업하기 전, SEO checkup을 해보았다.https://pagespeed.web.dev/analysis/https-balanco-vercel-app/hxv2uh2yl9?form_factor..