v1.1.0

Improvements

lighthouse 수치 개선

• Performance (90->99)
  • JS 파일 크기 줄이기
    • 중복 코드 제거
    • deprecated 된 기능의 코드 제거
  • lazy loading 적용
    • React.lazy 및 Suspense 활용으로 초기 로딩 시간 개선
• Accesssibility (83→100)
  • aria-label 추가
    • <button> 태그에 접근 가능한 이름을 부여하여 스크린 리더 사용자 경험 개선
  • 이미지 alt 속성 추가
    • <img> 요소에 대체 텍스트를 제공하여 이미지 설명 강화
  • 텍스트 대비율 개선
    • 포그라운드와 백그라운드 색상 대비율을 조정하여 가독성 향상
• SEO(75→100)
  • 메타 설명 추가
    • <meta name="description"> 요소를 추가하여 검색 결과에서 페이지 요약 제공
  • 유효한 robots.txt 파일 작성
    • 검색 엔진 크롤러의 접근 제어를 위해 유효한 robots.txt 파일 구성

	개선전	개선후
Performance	90	99
Accessibility	83	100
SEO	75	100
FCP	1.1s	0.6s
LCP	1.3s	0.8s
total blocking time	160ms	30ms
speed index	1.2s	0.8s

docker image 용량 축소

• yarn 호이스팅을 통해 중복 node 패키지 최소화
• node 패키지만 가지고 있는 이미지를 base로 api 서버 이미지와 websocket 서버 이미지 생성하여 패키지 공유
• 멀티 스테이지 빌드 적용하여 상용 서버에 필요한 파일만 빌드
• docker image 용량 44% 감소 (4.5GB → 2.5GB)

docker 배포 환경 변경

• 패키지 docker volume 제거
• 리액트 정적 파일 bind mount 제거
• 패키지 설치 및 정적 파일 삽입을 이미지 빌드 시점에 진행

redis 낙관적 락 적용

• red lock 알고리즘을 제거, 단일 인스턴스 redis 분산 락 적용
  • redis에 있는 리소스를 데이터베이스인 postgres로 migrate하는 과정에서 해당 key에 접근을 막는 red lock 알고리즘을 사용하였으나, 단일 redis instance를 사용해서 오버 엔지니어링이라고 판단
  • redis의 자체 기능을 사용하여 분산 락을 구현
• redis 분산 락 제거, watch 사용 낙관적 락 적용
  • migrate 과정에서 redis의 key에 대한 충돌이 생각보다 적어 현재의 비관적 락은 비효율적이라는 결론을 내림
  • 현재 migrate 과정에 있는 key를 redis의 watch 기능을 사용하여 감시, 해당 key에 대한 접근이 충돌이 생겼을 때만 막는 낙관적 락 사용하게 변경

자동 배포 구현

• 로컬에서 이미지 빌드 후 docker hub에 업로드
• 원격 서버에서 이미지 가져와서 docker-compose로 container 실행

Bug Fixes

docker container에 추가된 패키지 반영되지 않는 이슈 해결

• 이전 패키지를 저장하고 있는 docker volume이 그대로 연결된 이슈
• 이미지 빌드 시점에 패키지 설치하는 방식으로 해결

What's Changed

• Refactor be #4 by @ezcolin2 in #10
• refactor: 도커 최적화 - 중복되는 볼륨 처리 by @ezcolin2 in #11
• FCP 개선을 위한 사용하지 않는 js 코드 삭제 by @baegyeong in #6
• lazy loading 적용 by @baegyeong in #12
• refactor: red lock 제거 by @ezcolin2 in #14
• red lock 알고리즘 제거 후 단일 인스턴스 redis 분산 락 직접 구현 by @ezcolin2 in #16
• refactor: LCP 개선을 위한 Suspense 적용 by @pkh0106 in #20
• lighthouse 접근성 개선 by @baegyeong in #19
• Best Practice 개선 by @pkh0106 in #24
• SEO 수치 개선 by @baegyeong in #23
• lighthouse 추가 개선 by @pkh0106 in #28
• node_modules를 가진 base 이미지로 서버 이미지 빌드 by @ezcolin2 in #29
• isLoading 상태 제거, 사용하지 않는 파일 삭제 by @baegyeong in #31
• hotfix: lint 오류 수정 by @ezcolin2 in #32
• docker 자동 배포 구현 by @ezcolin2 in #36
• redis 분산 락 제거 후 watch를 사용한 낙관적 락으로 변경 by @ezcolin2 in #41
• 로그인 여부 체크 api 구현 by @summersummerwhy in #43
• v1.1.0 release 배포 by @ezcolin2 in #44

New Contributors

• @baegyeong made their first contribution in #6
• @pkh0106 made their first contribution in #20
• @summersummerwhy made their first contribution in #43

Full Changelog: v1.0.0...v1.1.0