미리보기

전자결재

Next.js -> React.js 마이그레이션

기술 스택 : TypeScript, React.js, TanStack Router, Vite

• Next.js 기반의 웹 애플리케이션을 React.js로 마이그레이션

• 서비스 진입 시 인증, 레이아웃 API 요청이 SSR 렌더링 지연을 유발하던 구조를 CSR로 전환하여, FCP 속도 약 54% 및 서비스 간 이동 속도 개선

• 배포 이후 관련 CS 인입 0건, 안정적인 운영 성과 달성

• 영어 원문의 오픈소스 공식 문서를 한글로 번역, 배포하여 팀원들과 학습 및 공유

• 사용한 오픈소스에서 발생한 오류를 내부 코드 분석을 통해 해결하고, 직접 코드에 기여하여 개선

PHP -> Next.js 마이그레이션

기술 스택 : TypeScript, React.js, Next.js, Tailwind CSS, Zustand, React-Hook-Form, i18-next, Nginx, PM2, Github Actions

• PHP 기반 레거시 코드에서 React.js와 Next.js 기반 코드로 마이그레이션하는 프로젝트 참여

• GitHub Actions 기반 배포 자동화 전략을 구축해 배포 자동화의 중요성 체감

• Nginx와 PM2를 활용하여 Blue/Green 방식으로 무중단 배포 전략을 설계 및 구현

자원예약

자원예약 서비스 런칭

기술 스택 : JavaScript, React.js, SCSS, Redux, Redux-toolkit, FullCalendar, i18-next, Webpack

• 내 예약 현황 페이지, 자원 유형 페이지, 자원 페이지 등 주요 화면 설계 및 구현

• 프로젝트 기한 내 MVP 기능 개발 완료

• 초기 사용자들로부터 17건의 개선 문의를 처리하며 서비스의 품질과 사용성을 지속적으로 개선

• 배포 이후 발생하는 이전 버전의 정적 파일을 유지하는 문제를 분석하고, Cache-Control 수정을 통해 해결

Task
Webpack -> Vite 번들러 교체

기술 스택 : TypeScript, React.js ,Vite

• Webpack에서 Vite로 번들러 교체하는 작업을 주도적으로 기획하고 실행

• chunk 파일 분리, 컴포넌트 정적 import 등 성능 최적화 작업으로 FCP 속도 약 58% 개선

• 개발 시 코드 변경 사항 반영 속도 향상 및 개발 생산성 증가

• 팀의 프론트엔드 개발자 전원이 개발 속도 향상에 도움을 받았다고 응답

JavaScript -> TypeScript 마이그레이션

기술 스택 : TypeScript, React.js

• 타입 안정성을 위한 JavaScript 기반 서비스를 TypeScript로 마이그레이션하는 작업을 주도적으로 기획하고 실행

• 코드베이스 100% 타입스크립트로 전환, 런타임 오류 약 90% 감소

• 팀 내 프론트엔드 개발자 전원이 개발 속도가 향상되었다고 응답

‘사용자의 건강 분석을 통한 영양제 추천 웹 서비스, PILLGOOD' 구현 프로젝트에 참가, 대상 수상

• React.js를 활용하여 설문조사, 설문결과 페이지 설계 및 구현

• AWS EC2 기반 서버 테스트 및 배포(Nginx, PM2, Route53 사용)