미리보기

다양한 규모의 SI 프로젝트에서 프론트엔드 개발을 주도하며, 각 프로젝트의 특성에 맞는 기술 스택 선정과 아키텍처 설계, 배포 구조 구축을 담당했습니다. EC2 기반 환경에서 Serverless 아키텍처로의 점진적 전환을 이끌었고, Serverless로 배포하는 Next.js 앱이 Next.js 최신 기능 구현의 한계점을 SST 도입으로 해결하여 효율적인 배포 시스템을 구축했습니다. 공통 컴포넌트와 유틸리티 함수를 독립 라이브러리로 모듈화해 재사용성을 향상시켰습니다. Core Web Vitals 지표 개선을 통해 CLS 0.1 이하, FCP 1.5초 미만의 성능을 달성했으며, 브라우저에서 대규모 데이터 처리를 위해서 B+ 트리 기반 컬렉션 및 Virtual List를 도입하여 클라이언트 필터링 및 검색시 화면 렌더링 시간을 5초정도에서 0.9초 미만으로 단축했습니다. 이러한 기술적 성과들은 사용자 경험 향상을 위한 지속적인 학습과 노력의 결과입니다. 문제 해결 과정에서 팀원들과 적극적으로 소통하며 실질적인 개선을 이루어내고 있습니다.

• 기존 윈도우 프로그램을 Electron 기반으로 전환하고, 프로그램 내부에서 직접 데이터를 수집・분석하던 방식을 개선했습니다. 각 기능을 모듈로 분리하여 child_process에서 실행하고, ipc 통신을 통해 렌더러 프로세스와 메인 프로세스 간 데이터를 주고받도록 구현.

• NextJs에서 Chrome 56 레거시 브라우저를 지원하기 위해 transpilePackages와 Polyfill 설정으로 호환성 작업 진행

• @next/bundle-analyzer로 분석 후 모듈별로 chunk로 분리 후 lazy import 처리

• 브라우저에서 대규모 데이터 처리를 위해서 B+ 트리 기반 메모리 저장소 BlinkDB 및 Virtual List 도입하여 클라이언트 필터링 및 검색시 화면 렌더링 시간을 5초정도에서 0.9초 미만으로 최적화

• 초기 카테고리별 데이터 호출 시 8만 개 이상의 데이터로 인해 API 호출부터 렌더링까지 1분 30초가 소요되었으나, IndexedDB를 활용한 데이터 캐싱 구현으로 두 번째 요청부터의 카테고리별 로딩 시간을 대폭 단축했습니다.

• Leaflet 라이브러리를 사용해 지도 경로 추적 플레이어 기능을 requestAnimationFrame 을 사용해 구현 및 마커 최적화를 위한 마커 클러스터러 적용

• 구글 검색시 사용자 노출 확대를 위해 채용 공고에 대한 구조화된 데이터 개선

• 레이아웃 안정성 지표인 CLS(Cumulative Layout Shift)를 개선하기 위해 데이터 로딩 시 스켈레톤 컴포넌트를 도입. 이를 통해 CLS 수치를 0.25에서 0.1 이하로 개선.

• 초기 콘텐츠 표시 속도인 FCP(First Contentful Paint)를 개선하기 위해 리소스 우선순위를 지정하고, SSR과 미디어 파일의 뷰포트 기반 지연 로딩을 적용했습니다. 또한 사용자 상호작용 이후에 필요한 자바스크립트 파일은 상호작용 후 지연로딩하는 방식을 도입하여 초기 로딩 속도를 개선

• 번역 담당자와 효율적인 작업을 위해 Google Sheets API를 연동하여 번역 워크플로우 자동화

• 아임포트를 통한 본인인증 구현 및 NFT 작품 결제 시스템 개발

• 모바일 전용으로 웹을 JavaScript MediaQuery를 활용하여 데스크탑 모드를 지원 할 수 있게 확장. 이를 통해 고객사의 요구사항을 시간과 비용 측면에서 효율적으로 구현

• 사용자 상호작용이 필요한 컴포넌트들을 지연 로딩(lazy import)으로 처리하여 초기 번들 크기를 최적화

• React Hook Form와 Yup를 활용한 멀티페이지 폼 개발로 개발 및 검증 효율성 향상

• Redux를 통해 API 관리하던 로직을 SWR을 적용해서 API 로직 분리

• Intersection Observer 기반 호출로 불필요한 호출 방지하여 리스트 성능을 개선

• EC2에서 serverless-nextjs를 통해 AWS Lambda@Edge에 Next.js 배포 방식을 전환하였고, 배포 방식도 간소화

• bitbucket pipelines을 이용해서 Next.js 앱 배포 자동화

• jQuery 기반 백오피스를 Next.js 기반으로 전환

• Jquery 기반 백오피스 개발

• Jquery 기반 백오피스 개발

• 웹 소켓을 활용하여 공연장의 실시간 입장, 출입 현황 및 티켓 확인 정보를 데이터 시각화

• 공연장 내 티켓 확인 시스템에서 네트워크 통신 장애로 인한 입장 지연 문제가 빈번하게 발생하였고 이를 해결하기 위해 웹 기반 시스템을 일렉트론으로 전환

• 데스크톱 애플리케이션 마이그레이션을 위해 체계적인 계획을 수립하였고 우선순위가 반영된 체크리스트를 작성하여 주간 진행 상황을 점검하며 이슈를 문서화. 이를 통해 팀원들과 효율적으로 소통하며 예정된 일정 내에 마이그레이션을 성공적으로 완료.

• Server Side Rendering으로 구현된 웹사이트에서 트래픽 증가로 인한 운영 비용 상승과 서버 다운 문제가 발생했습니다. 이를 해결하기 위해 Static Site Generation을 적용하여 서버 다운 문제를 해결하고 서버 자원을 절약했습니다.

• AWS Cloud Front를 활용한 CDN 캐싱으로 추가 개선 진행

• 복잡한 비즈니스 로직의 안정적인 관리와 코드 재사용성 향상을 위해 TypeScript를 도입하고, 공통 비즈니스 로직을 모듈화한 관리 시스템을 구축

• 웹뷰로 구현된 페이지와 네이티브 앱 간의 효율적인 통신을 위한 브릿지 인터페이스 구현