프론트엔드
개발 파트 소개 - 2. 웹 프론트엔드 파트
두줄요약
인프랩 웹 프론트엔드 파트의 기술 스택, 개발·배포·모니터링 방식을 소개했습니다. VanillaJS 기반 레거시를 TypeScript·React 기반 신규 시스템으로 점진 전환하고 있습니다.
구조와 흐름
- 셀 단위 제품 개발과 파트 단위 장애·기술 공유, 스프린트·프로젝트·분기 회고 병행
- 기존 VanillaJS·Fx 기반 시스템과 TypeScript·React·Next.js 기반 신규 시스템의 병행 운영 및 점진적 이관
- 상황별 SSR·CSR 선택, API 호출·렌더링·번들링 최적화, Datadog 기반 브라우저 오류 추적
선택 이유
- 정적 타입, IDE 지원, 생태계·서드파티 호환성, 개발자 수급을 고려한 TypeScript·React 중심 신규 스택
- 레거시의 당시 제약을 존중하며 점진적 리팩토링과 전환 경험 축적
성능/운영 포인트
- PR 기반 코드리뷰와 SonarQube 정적 분석을 통한 코드 품질 관리
- Jenkins·GitHub Actions 기반 dev·master 브랜치 자동 배포
- Docker, AWS ECS, Express·Next.js 서버 환경과 Datadog 모니터링 운영
적용해볼 점
- 업무 로테이션으로 특정 서비스·업무 편중 완화
- 개발 규칙 문서화와 스터디를 통한 신규 구성원 적응 및 팀 학습 문화 강화
