2024.06 - 2024.07
Skill Keywords
- 프로그래밍 언어: TypeScript
- 프레임워크 및 라이브러리: React 18, Next 12, React-Hook-Form
자유여행 전시 화면 폼 관리 라이브러리 도입
노랑풍선/프론트 개발
담당 역할
- 폼 관리 라이브러리 도입 결정 및 구현 주도
- 폼 관리 라이브러리와 기존 시스템 간의 통합 개발
- 기술적 방향성 제시 및 팀원 간의 협업 지원
업무 내용
- 다양한 공급사별 폼 개발 요구사항에 유연하게 대응하기 위해 React-Hook-Form 라이브러리를 도입하여, 폼 상태 관리 및 검증 로직을 일원화했습니다.
- 라이브러리를 통해 상태 관리 및 Validation Check를 통합하고, 포커스 이동 등의 반복적인 로직을 자동화하여 코드 복잡도를 감소시키고 개발 생산성을 향상시켰습니다.
- 기존 제어 컴포넌트 방식에서 비제어 컴포넌트 방식으로 전환하여 불필요한 화면 리렌더링을 줄이고, 사용자 인터페이스 반응 속도를 개선했습니다.
- 도입된 폼 관리 시스템을 다른 도메인에도 점진적으로 적용할 계획을 수립하여, 장기적인 유지보수 및 확장 가능성을 높였습니다.
관련 자료 :
폼 관리 라이브러리 도입
2024.03 - 2024.04
Skill Keywords
- 프로그래밍 언어: TypeScript
- 프레임워크 및 라이브러리: React 18, Next 12, Next/Image, Sharp
자유여행 전시 화면 이미지 최적화
노랑풍선/프론트 개발
담당 역할
- 이미지 최적화 솔루션 평가 및 도입
- 성능 개선 목표 설정 및 결과 분석
- 프로젝트 문서화 및 최적화 전략 전파
업무 내용
- 자유여행 전시 화면에서 이미지 로딩 속도 문제를 해결하기 위해 Next.js의 Image 컴포넌트를 활용하여 Lazy Loading 방식을 적용, 페이지 로딩 속도를 50% 향상시켰습니다.
images.minimumCacheTTL 설정을 최적화하여 이미지 캐싱 기간을 늘리고, 이를 통해 사용자 경험을 개선하고 서버 요청을 30% 감소시켰습니다.- WebP 및 AVIF 포맷을 도입하여 이미지 용량을 평균 25% 줄이고, 이미지 품질을 유지하면서 네트워크 비용을 절감했습니다.
- 최적화 작업을 통해 CLS (Cumulative Layout Shift) 지표를 크게 향상시켜, 페이지 안정성을 강화했습니다.
관련 자료 :
Next/Image 최적화 시키기
2024.01 - 2024.02
Skill Keywords
- 프로그래밍 언어: TypeScript
- 프레임워크 및 라이브러리: React 18, Next 12, Redux, React-Query
자유여행 전시 화면 성능 개선
노랑풍선/프론트 개발
담당 역할
- Lighthouse를 통한 성능 분석 및 개선 주도
- Pre-fetching 기술 도입 및 최적화 관리
- 성능 개선 지표 설정 및 지속적 모니터링
업무 내용
- B2C 사이트의 성능을 진단하기 위해 Lighthouse 도구를 활용하여 페이지 로딩 시간과 사용자 경험을 평가하고, 이를 기반으로 성능 개선 계획을 수립했습니다.
- Next.js의 Pre-fetching 기술을 통해 주요 콘텐츠를 사전 로드하여 페이지의 DOMContentLoaded 및 Load 시간을 평균 50% 단축시켰습니다.
- 성능 최적화 결과, Lighthouse 점수를 59점에서 87점으로 향상시켰으며, 사용자 이탈률을 15% 감소시키고 페이지 반응성을 크게 개선했습니다.
- 성능 지표를 지속적으로 모니터링하고, 발견된 문제들을 신속하게 해결하여 사용자에게 빠르고 안정적인 웹 경험을 제공하고 있습니다.
관련 자료 :
웹 페이지 성능 개선
2023.09 - 2023.10
Skill Keywords
- 프로그래밍 언어: TypeScript
- 프레임워크 및 라이브러리: Angular 12, Rxjs, NgRx, Angular Universal, Express
자유여행 로그인 쿠키 프로세스 변경
노랑풍선/프론트 개발
담당 역할
- 클라이언트 및 서버 사이드 쿠키 관리 프로세스 설계
- 보안 강화 요구사항 반영 및 HTTP Only 쿠키 전환 주도 개발
- Express 기반 서버 아키텍처 설계 및 구현
업무 내용
- 기존 클라이언트 측에서 관리하던 쿠키를 HTTP Only 쿠키로 전환하여 보안을 강화하고, Express를 활용하여 서버 사이드 렌더링 환경에서 안전하게 쿠키를 관리하는 구조를 구축했습니다.
- 쿠키 제어 방식을 동기에서 비동기 방식으로 변경하여 로그인 프로세스의 효율성을 개선하고, 사용자 인증 속도를 30% 향상시켰습니다.
- 클라이언트에서 서버 사이드로 쿠키 제어 로직을 이관하여, 보안성과 효율성을 동시에 높인 안전한 쿠키 관리 시스템을 구현했습니다.
2023.02 - 2023.08
Skill Keywords
- 프로그래밍 언어: TypeScript
- 프레임워크 및 라이브러리: Rxjs, NgRx, React 18, Next 12, Redux, React-Query
- CI/CD:
Nginx, Docker, Docker-Swarm
- 기타 기술: Day.js, Styled Components, Jest, Figma
자유여행 호텔 상품 전시 마이그레이션
노랑풍선/프론트 개발
담당 역할
- 기존 호텔 도메인 분석 및 신규 시스템 설계 및 개발
- 프로젝트 초기 개발 환경 세팅 및 팀 협업 주도
- 결제 프로세스 설계 및 PG사 연동 개발
업무 내용
- 유지보수가 되고 있지 않는 Angular 프로젝트를 분석 및 정리하여 Figma에 프로세스 정리를 했습니다.
- 시스템 별 프론트엔드 기반을 통일화하여 업무 능률을 높이기 위해 중장기적 목표로 자유여행 시스템 프론트 영역을 Angular에서 React로 마이그레이션을 진행하고 있습니다.
- 현 시스템의 무분별한 Store 사용으로 밀집되어 있는 코드를 풀기 위함과 신규 라이브러리(React-Query)를 도입하여 쿼리 인스턴스를 공유하고 API 요청 Request를 캐싱하여 불필요한 Fetching을 줄여 성능 개선을 했습니다.
관련 내용 : https://fit.ybtour.co.kr/hotel/hotel-main