미리보기

개발자 취준생을 위해 AI를 활용한 모의 면접 시뮬레이션 서비스입니다.

개요

• 기술 : Next.js / TypeScript / Tanstack Query / Zustand / Tailwind CSS / MSW / Jest
• 인원 : 6명 (FE 4명, BE 2명)
• 링크: 배포 / 깃허브

담당 기능

• LCP 콘텐츠가 느린 문제를 발견 후 fade-in 애니메이션을 제거하여 LCP 3.1초에서 0.8초로 단축
• 한 컴포넌트 내부에 책임이 많아지는 문제를 인지 후 합성 컴포넌트 패턴을 활용하여 가독성 및 독립성 개선
• Jest 및 Testing Library를 사용하여 유닛 테스트 구현 중, GitHub Actions를 통해 테스트 자동화를 구축하여 효율성 및 안정성 향상
• 사용자 행동 패턴 및 유입 분석을 위해 구글 애널리틱스 도입
• webkitSpeechRecognition 웹 API 사용하여 Speech To Text 기능 개발
• MediaStream 및 MediaRecorder 웹 API를 사용하여 영상 녹화 및 업로드 구현
• 늦어지는 코드 리뷰를 개선하기 위해 일일 스크럼을 통해 실시간 코드 리뷰로 지속 통합 개선

성장 포인트

• SSR, SSG, CSR, ISR의 개념을 파악하고 각각의 장단점을 비교하여, 렌더링 방식을 적용함으로써 서버 사이드 기술에 대한 지식을 학습
• 토큰 기반 인증에서 쿠키를 사용하면서 쿠키의 보안 취약점을 인지하고, 보안을 강화하기 위한 다양한 옵션을 학습하고 적용함으로써 쿠키의 취약한 보안 공격과 개선하는 방법을 학습
• LCP의 타겟 콘텐츠에는 lazy loading이나 fade-in 애니메이션을 적용하면 LCP 성능에 취약한 지식 습득

STYLED는 자신의 OOTD를 공유하며 소통하고자하는 사람들의 니즈를 충족하고자 기획된, OOTD만을 위한 패션 특화 소셜 네트워크 서비스입니다.

개요

• 기술 : React / TypeScript / Tanstack Query / Zustand / Styled Components
• 인원 : 6명 (FE 5명, BE 1명)
• 링크 : 배포 / 깃허브

담당 기능

• 초기 로딩 속도 문제 개선
  • 불필요한 lodash 라이브러리 전체를 불러오는 문제를 발견 후 트리 쉐이킹을 통해 번들 사이즈 29.68% 개선
  • 하나의 큰 번들 파일을 로드하는 문제를 코드 스플리팅을 적용하여 필요한 번들 파일만 로드하도록 개선
  • 불필요한 이미지 로드를 줄이기 위해 유저 목록 이미지 lazy loading 적용
  • FCP 7.9초에서 0.9초로 단축
  • LCP 8.1초에서 1.6초로 단축
• 이미지, 폰트 최적화
  • 용량이 큰 이미지 로드시 딜레이가 생기는 문제를 발견하여 업로드 시 react-image-file-resizer를 사용해 이미지 최적화
  • 정적 이미지 로딩 속도를 개선하기 위해 확장자 포맷 및 압축을 통해 이미지 용량 91.11% 개선
  • Speed Index 10.6초에서 1.2초로 단축
  • 폰트 로딩 속도 개선을 위해 확장자 포맷 및 subset 폰트로 최적화하여 폰트 용량 89.353% 개선
• 사용자 입력에 따른 과도한 서버 요청을 줄이기 위해 유저 목록 검색에 debounce를 적용
• 실시간 데이터 조회를 위해 폴링 방식을 사용하여, 온라인 사용자 조회, 실시간 알림 조회 구현

성장 포인트

• 초기 로딩 속도 문제를 개선하면서 SPA 환경에서 초기 로딩 속도가 느린 이유와 초기 로딩 속도를 저하시키는 요소 및 원인을 학습
• 폴링 방식을 선택하여 실시간 기능을 구현하며, 폴링 방식의 단점을 해결하는 방법 중 롱 폴링 방법을 알게 되었음
• lazy loading 시 성능적인 부분의 이점은 있지만 SEO의 단점을 가진다는 지식을 습득

계묘년을 맞아 행운 아이템을 제시해주는 정적 웹 서비스입니다.

담당 기능

• 일본어 번역 기능을 i18n 라이브러리를 사용하여 구현
• CSR에서 각 페이지 별로 Open Graph 태그를 동적으로 적용하기 위해 React-helmet 도입
• SPA에서 검색 엔진이 각 페이지의 Open Graph 태그를 읽을 수 있도록 React-snap을 도입

성장 포인트

• SPA와 CSR을 사용하면서 해당 기술이 SEO에 어려움을 겪는 이유를 이해
• 동적인 페이지가 많은 프로젝트에서 React-helmet과 React-snap의 SEO 최적화의 한계를 경험하며, SSR 기술의 필요성을 인식