🤓 Introduction

안녕하세요😃

문제를 해결하기위해 다양한 시각에서 접근하여 가장 최적화된 방법을 도출하여 적용하기를 즐기는 프론트엔드 개발자 김민석입니다.

🛠 Skills

2023.07 - 2024.01

[문제 상황: 반복되는 QA 실수]

팀원 모두가 배포 전날 함께 모여 QA를 진행하였습니다. 하지만 앱의 복잡도가 커질수록 QA양이 늘어났고 팀원 모두가 참여함에도 불구하고 배포이후 문제가 발견되곤 하였습니다.

[해결 방안: E2E 테스트를 통한 QA 자동화]

[문제 상황: 오픈그래프 정보의 부재]

[해결 과정: 부분적 서버 사이드 렌더링 적용]

부분적으로 공유하기 기능에만 Next.js를 도입하기로 하였습니다.
Next.js를 이용하여 메타데이터를 서버에서 pre-rendering하여 사용자가 접속 시 실제 페이지로 리다이렉트하는 방식을 통해 공유하기 기능을 구현했습니다.
이를 통해 사용자 경험 향상 뿐만 아니라 검색엔진최적화 효과도 얻을 수 있었습니다.

[문제 상황: 비효율적인 수동 배포 프로세스 및 접근 제한]

수동으로 S3에 빌드 파일을 드래그 앤 드롭하는 방식은 시간이 많이 소요되었고, 잠재적으로 위험한 작업이었습니다.
또한, 교육 기관에서 관리하는 AWS Access Key에 접근하지 못하여, Github-Action을 사용한 자동 배포에 어려움을 겪었습니다.

[해결 과정: EC2를 이용한 자동배포 파이프라인 구축]

이 문제를 해결하기 위해, EC2 인스턴스에 AWS CLI를 설치하고, Access Key 없이도 S3에 빌드 파일을 자동으로 배포하는 파이프라인을 구축했습니다.
이 방식은 배포 과정을 크게 단순화하며, 배포의 안정성과 생산성을 모두 향상시켰습니다.

[문제 상황 및 해결 방법]

앱의 기능이 확장됨에 따라 번들의 크기도 커져 로딩성능이 좋지 못하는 문제를 마주하였습니다.
- Minify, Tree shaking, Code splitting 등의 웹팩 번들 최적화를 통해 초기로딩속도 개선 (Lighthouse Performance 72점 → 89점)
이미지가 서비스의 큰 비중을 차지하는 만큼 이미지의 로딩속도는 사용자 경험에 큰 영향을 미쳤습니다. 하지만 천차만별한 이미지 크기로 인해 각 이미지간 로딩속도 편차가 컸고, 이는 사용자경험에 좋지 못하였습니다.
- S3, CloudFront를 이용한 CDN 구축을 통해 로딩속도 개선 (LCP 14.2s → 2.4s)
- jpeg에서 webp로 이미지 변환 및 gzip 압축을 통해 이미지 크기 120kb 이하로 축소
Light House로 웹 성능을 측정한 결과 CLS가 0.14로 Layout shift개선이 필요한 수준이었습니다.
- Suspense를 활용하여 Fallback UI로 크기가 동일한 Skeleton UI를 보여줌으로써 Layout shift 개선
- Font preload를 통해 폰트가 뒤늦게 적용되는 문제 및 Layout shift 개선

MSW
- Mock 서버를 구축하여 개발서버 의존성 분리 및 개발 생산성 증진
- 랜덤하게 실패/성공 응답을 내보내는 로직을 구현하여 성공 및 에러케이스 대응
Zustand, Tanstack Query
- 클라이언트/서버 상태 관리 및 보일러플레이트 개선 (코드 줄 30% 축소)
StoryBook
- 스토리북 배포링크
- UI 테스트, 엣지 케이스 확인을 통한 정확하고 빠른 개발을 위해 컴포넌트 단위의 Storybook 작성
- 공통 컴포넌트 20개, 조합 컴포넌트 9개를 제작하여 컴포넌트 테스트 및 문서화