1.0.1

🛠 REFACTORING

Docker 이미지 최적화 (#12)

문제

• 백엔드 Docker 이미지 크기는 631MB이고, 프론트엔드 이미지 크기는 59.4MB이다.
• 백엔드는 프론트엔드처럼 정적파일을 만들어 배포할 수 없고, 동작하기 위해선 라이브러리가 필요하기에 사이즈가 큰 것은 어쩔 수 없다.
• 허나 비교적 종속성이 복잡하지 않고 단순한 서버 라이브러리인 node.js+express로 개발하였고, 백엔드 규모 자체도 크지 않은 프로젝트이기에 적정 사이즈는 200~400MB 사이라고 생각하였기에 줄일 필요가 있다고 생각했다.
• 목표: 백엔드 이미지 사이즈를 400MB대로 줄이는 것

개선

• 멀티 스테이지 빌드 방법을 적용하여 빌드 파일 생성용 이미지와 배포용 이미지를 분리
• 명령어 체이닝을 적용하여 레이어 수를 감소
• 레이어 캐싱 기능을 효율적으로 활용하고자 변경사항이 적은 레이어는 상단에 배치

결과

• backend이미지는 631MB -> 266MB로 줄었고, frontend이미지는 59.4MB -> 51.6MB로 감소

홈페이지 가상스크롤 적용 (#14)

문제

• 기존 무한스크롤은 데이터를 렌더링할 때 모든 데이터를 DOM에 추가하여 렌더링하였습니다.
• 이는 적은 양의 데이터를 불러왔을 때는 문제가 없었지만 약 1,000개 이상의 데이터를 렌더링하면 브라우저의 성능 저하되는 문제가 있었습니다.

개선

• 현재 ViewPort를 고려하여 꼭 렌더링해야할 데이터만 렌더링하는 가상스크롤을 적용하였습니다.

결과

• 아래는 데이터 5,000개를 불러온 결과입니다.
  가상스크롤 적용 전
  

가상스크롤 적용 후

Google Analytics 적용 (#15)

문제

• 이전에 SEO와 Open Graph를 활용하여 사용자 유입률을 높이고 접근성을 개선한 경험이 있다.
• 하지만, 이를 실제 지인들을 대상으로 테스트했기 때문에 정확한 데이터를 기록하거나 분석하지 못했다.
• 이에 따라 유입 경로, 이탈률, 사용 빈도가 높은 페이지 등 사용자 행동 데이터를 기반으로 정확한 수치를 분석할 필요가 있다는 점을 느낌.

개선

• Google Analytics를 활용
• gtag.js 스크립트를 index.html의 에 삽입하여 설정
• 각 이벤트 발생 시 dataLayer에 이벤트가 저장되고, GA로 전송되어 보고서가 작성됨

결과

• 실시간으로 최근 30분간 사용자 수, 지역, 페이지 방문, 동작 기록 확인 가능.
• 보고서를 통해 사용자 수, 평균 사용 시간, 유입 경로, 브라우저, 국가 분포, 신규·재방문 비율 등을 확인 가능.
• 주요 이벤트(page_view, scroll, session_start 등)와 활성 사용자 수를 1일, 7일, 30일 단위로 분석 가능.
  

이벤트 트레이싱 (#17)

문제

• 수치화된 사용자의 행동을 토대로 개선하고 싶은 문제를 정의하고자 함

개선

• 사용자의 행동을 수치화할 수 있게 됨

결과

• 저장 과정이 사용자의 행동 플로우에서 빈번하게 발생하며 워크스페이스에서 작업하는 과정을 끊는 것을 발견. 수동 저장을 자동 저장으로 변경하기로 결정함
  

useQuery, useInfiniteQuery -> useSuspenseQuery, useSuspenseInfiniteQuery 교체 (#19)

문제

• 기존 비동기 데이터를 불러오는 컴포넌트에서는 로딩 여부에 따라 로딩 UI 렌더링을 결정했습니다.
• 이는 명령형 프로그래밍 방식으로 React의 철학과 맞지 않았습니다.

개선

• React 철학인 선언적 프로그래밍에 맞게 useQuery, useInfinityQuery를 useSuspenseQuery, useSuspenseInfinityQuery로 변경하고 기존 로딩 여부를 판단하기 위한 if문을 삭제하고 Suspense의 fallback을 통해 로딩 UI를 렌더링하도록 변경하였습니다.

HTTP/1.1 -> HTTP/2.0 개선

문제

• 네트워킹의 흐름을 학습하며, HTTP/2.0이 제공하는 더 많은 기능을 통해 속도, 보안, 효율성을 향상시키는 개선 작업을 진행하고, HTTP/1.1과 2.0의 차이를 수치로 직접 비교해보기 위해서.
• Lighthouse 결과도 HTTP/2.0 적용을 권장

개선

• Nginx 설정 파일(default.conf)에 http2 on; 옵션 추가.

결과

• HTTP/2.0 적용 완료.
• 눈에 띄는 성능 변화는 없었지만, 멀티플렉싱과 효율적 데이터 전송으로 향후 확장성 및 최적화 기반 마련.