REFACTORING
🛠 CICD 개선 (#16)
문제
- 기존 Github Actions workflow 코드는 3가지의 문제점이 있었다.
- build 과정에서 올린 docker hub image를 deploy에서 쓰고 있지 않는다는 점
- docker hub 사용 자체를 못하고 있었다는 점
- pr올릴때도 deploy가 동작한다는 점
- workflow 코드 작성법을 제대로 학습하지 않고, 코드를 짜집기 하여 배포가 자동으로 되게끔만 작성했던 것이 cicd 속도를 느리게 하고, 불필요한 스크립트를 동작시키게 한 원인이었다.
- 아래 두가지 목표를 이루어 cicd 스크립트를 개선하고자 한다.
- cicd 소요시간 1분대로 줄이기 (기존 - 약 2분 30초 ~ 3분 소요)
- pr / push 별, 브랜치 별 시나리오를 분리하여 불필요한 스크립트 실행 없애기
개선
- 3가지 빌드 및 배포 시나리오를 짜 속도를 비교하였다.
- DockerHub를 사용하지 않고 로컬(서버)로 ssh접속해서 docker 빌드 및 배포하기 => 총 44초 소요 (build step: 33s / deploy step: 11s)
- DockerHub 사용하여 빌드 및 배포(캐싱x) => 총 1분 50초 소요 (build step: 1m 28s / deploy step: 22s)
- DockerHub 사용하여 빌드 및 배포(캐싱o) => 총 54초 소요 (build step: 39s / deploy step: 15s) (해당 시나리오는 어느 레이어가 캐싱되었느냐에 따라 다르기에 build step의 소요 시간이 일관되지는 않음)
- 3가지 버전 중 3번째 방식이 이후 버전관리나 확장성에 대비하여 docker hub를 사용하고, 캐싱기능도 있어 빌드 시간은 적기에 3번째 방식을 선택하였다.
- dev/main 브랜치에 따른 스크립트 파일을 분리하였고, pr/push 에 따라 실행되는 스텝도 분리해두어 pr 작성 시 빌드 테스트 시간을 감축하였다.
결과
- build 단계 약 40초 / deploy 단계 약 20초로 빌드 및 배포까지 약 1분대로 소요시간 감축
🛠 리렌더링 개선 (워크스페이스 페이지) (#35)
문제
- CSS 툴팁 컴포넌트 렌러딩 시 모든 CSS 속성 선택 컴포넌트가 리렌더링되는 문제 발생
- CSS 속성 편집 시 워크스페이스 헤더, 워크스페이스 캔버스 및 관련 없는 컴포넌트들이 리렌더링되는 문제 발생
개선
- CSS 툴팁 위치 계산 시 활용하던 전역 상태 대신 물음표 아이콘의 위치를 local 상태로 관리하고, 해당 상태를 활용함
- CSS 속성 관련 상태를 활용할 때 구조분해할당을 통해 상태를 구독하는 방식에서 useStore((state) => state.props) 와 같은 방식으로 필요한 상태만 구독하도록 변경
결과
- CSS 툴팁 렌더링 시 모든 CSS 속성 선택 컴포넌트의 리렌더링이 일어나지 않음
- CSS 속성 편집 시 모든 컴포넌트에서 리렌더링이 발생하는 문제를 해결함
|
BEFORE 
|
BEFORE 
|
|
AFTER 
|
AFTER 
|
🛠 HTTP 1.1 → 2.0 → 3.0 개선 (#27)
문제
- 우리가 만든 서비스는 http/1.1을 사용하는걸 볼 수 있었다.
- Lighthouse에서도 2.0을 사용하라고 권장했다.
- 목표: HTTP에 대한 전반적인 이해와 서비스를 프로토콜을 2.0, 3.0으로 순차적으로 개선해 나가면서 수치를 비교
개선
- HTTP에 관한 전반적인 역사와 네트워킹 개념 학습
- Nginx 설정에 HTTP 2 적용
- QUIC를 기반으로 한 HTTP 3 설정 코드 추가
결과
- HTTP의 흐름을 순차적으로 공부해나가면서 어떤 방법으로 개선되어 나갔는지 학습.
- 2.0과 3.0으로 개선하면서 최신 웹 표준 프로토콜을 적용하며 보안을 높임.
- 성능면으로는 기존에도 좋았기 때문에 큰 차이는 없었음.
🛠 “Code 하이라이팅” 코드 품질 개선 (#36)
문제
- 코드 하이라이팅 관련 코드가 복잡하고 가독성이 떨어져, 코드의 의도를 파악하기 어려웠습니다.
- 명확한 코드 품질 기준을 정립하고, 이를 점수로 수치화 후 개선하여 유지보수성을 높이고자 했습니다.
- 목표: 코드 품질 기준을 확립하고 이를 통한 점수화 후 개선하여 100점 만들기.
개선
- 여러가지 SonarCloud, Code Climate, DeepSource 등등 측정 도구를 사용하지 않고, 직접 품질 기준을 확립함.
- “중복 및 불필요한 코드”, “파일 구조 및 명명”, “유지보수성”, “가독성”, “성능 및 안정성” 이 5가지를 품질 기준으로 잡고 점수를 배분함.
- AI에게 해당 기준을 기반으로 점수 측정을 요청 -> 87/100점
- customHook, 유틸 함수로 분리하여 단일책임 원칙 준수 , 매직넘버 상수화 등의 개선 작업.
결과
- 추상화, 중복 코드 제거, 파일 구조 정리, 유지보수성 향상, 가독성 개선
- 코드 품질 점수 100점으로 향상
- 유지보수성, 가독성 향상으로 “변경하기 쉬운 코드”로 개선.
🛠 리렌더링 개선 (사용자 가이드) (#37)
문제
- 사용자 액션에 따라 관련없는 컴포넌트 대부분이 리렌더링되고 있다.
- 렌더링 성능은 서비스 규모가 커지고 사용자가 많아질수록 직접적인 영향을 미치는 중요한 요소이다.
- 목표: 불필요한 렌더링을 줄이고, 효율적인 컴포넌트 업데이트 방식을 학습하며 전반적인 성능 개선
개선
- 렌더링 빈번한 컴포넌트 위주로 해결하려고 하였지만, 리렌더링이 만연해 담당했던 파트인 사용자가이드부터 개선하였다.
- 리렌더링되는 컴포넌트들의 공통점이 zustand를 활용한 전역상태를 활용한다는 점이었다.
useShallow를 활용하여 저장된 모든 전역상태가 아닌 사용되는 특정 상태만 가져오도록 개선하였다. - 개별 컴포넌트들은 메모이제이션을 적용시 리렌더링이 필요한 경우에만 적용되도록 메모이제이션 커스텀 콜백을 설정하여 제어하였다.
결과
- 사용자가이드 단계 이동시 더이상 헤더 리렌더링되지 않는다.
- 헤더 내 버튼들을 하이라이팅해야 하는 4단계만 리렌더링한다.
🛠 자동저장 도입 및 저장 시간 감소 (#38)
문제
- MixPanel을 활용한 사용자 행동 분석 결과, 34.78%의 사용자가 저장하지 않고 이탈
- 일부 사용자로부터 작업 손실에 대한 피드백 접수
- 저장 시간은 약 1.5~1.7초가 소요되며, 블록 수가 증가할수록 저장 시간이 기하급수적으로 증가하고, 저장 진행 중 UI 멈춤 현상 발생
- 목표:
(a) 자동 저장을 통해 의도하지 않은 데이터 유실 및 사용자의 실수 방지 + 작업 흐름을 개선
(b) UI 멈춤으로 인해 사용자가 저장 과정에서 불편을 겪고 이탈하는 것을 방지
개선
- 자동 저장 기능 도입
- 사용자의 작업 변화를 감지해 자동 저장을 수행하도록 결정.
- zustand 상태 관리 라이브러리를 활용하여 작업 변경 여부를 전역 상태에서 Boolean 값으로 관리, 변경이 감지되면 저장 로직 수행. - 성능 문제 분석 및 개선
- 자동 저장 적용 후에도 UI 멈춤 현상 지속.(평균 1.51.7초 소요, 최대 69초 이상 발생)
- 원인 분석을 위해 크롬 브라우저 아키텍처 및 렌더링 프로세스 학습 및 main thread의 역할 이해
- 개발자 도구의 Performance 탭을 활용해 JS 작업이 main thread를 블로킹하는 것을 확인
- 어떤 JS 작업이 블로킹하는지 파악하기 위해 performance.now()로 저장 과정의 각 단계별 소요 시간 분석
1. 저장 과정 중 썸네일 생성을 위해 html2canvas를 활용한 웹페이지 캡처가 가장 큰 성능 저하 요인(평균 1.5초 소요)
2. 캡쳐 이미지 만들기 위해 canvas -> blob으로 변환 과정이 두 번째로 많은 시간 소모(평균 0.3초 소요) - 성능 최적화 조치
- html2canvas 최적화: 라이브러리 옵션을 사용해 불필요한 DOM 요소의 스타일 계산 제외
- Web Worker 및 OffscreenCanvas 도입, blob 변환 및 이미지 생성 작업을 별도 스레드에서 처리
결과
- 최적화 적용 후 전체 저장 시간 6
9초 → 0.20.3초로 단축 - 자동 저장 기능 도입으로 수동 저장 버튼 클릭 단계 제거, 사용자 인터랙션 간소화