인플루언서 매칭 광고 플랫폼 개발
기여도
- 주니어 웹 개발자 3명, 시니어 개발자 2명과 협업하여 프로젝트 진행
- 프로젝트 전체 개발 화면의 15%를 설계 및 구현
주요 업무 및 역할
백엔드
- JWT 기반 인증 구현
- JWT (JSON Web Token)을 활용하여 Stateless 서버 환경 구현.
- 클라이언트-서버 간 보안 강화 및 인증 상태 관리 최적화.
- 데이터 직렬화 및 역직렬화 처리
- 데이터 모델 검증 및 전송 데이터 품질 향상을 위한 클래스 기반 설계 적용.
- 서버와의 네트워크 통신 시, class-transformer와 class-validator를 활용하여 데이터 직렬화 및 역직렬화 로직 구현.
프론트엔드
- 컴포넌트 설계 및 개발
- React를 활용하여 플랫폼, 쇼핑몰, 관리자 사이트 3개 서비스의 UI 컴포넌트를 설계 및 개발.
- 재사용성과 유지보수성을 고려한 Atomic Design 기반 컴포넌트 아키텍처 구현.
- 클라이언트 비즈니스 로직 구현
- 각 서비스(플랫폼/쇼핑몰/관리자)별 클라이언트 측 비즈니스 로직 개발.
- 모듈화된 구조를 기반으로 코드 품질과 확장성을 극대화.
- 상태 관리 및 아키텍처 설계
- View-Model 패턴을 적용하여 View와 Model 간 의존성을 최소화.
- MobX를 활용해 객체지향적 설계를 바탕으로 확장성과 유지보수성을 강화한 상태 관리 시스템 구축.
- UI 설계 및 테스트 자동화
- 일관된 UI 및 디자인 시스템을 유지하기 위해 Atomic Design 원칙을 적용.
- Storybook을 활용하여 UI 컴포넌트의 Visual/Interaction 테스트를 수행하며 협업 효율성 향상.
- Form Validation 및 상태 관리
- React-hook-form을 활용하여 폼 검증 로직과 상태 관리 최적화.
- 유효성 검사, 에러 메시지 처리 등 폼 관련 기능을 모듈화하여 반복 작업을 최소화.
- 크로스 브라우징 최적화
- Windows PC, macOS, iOS Mobile 환경에서의 크로스 브라우징 테스트를 통해 호환성 문제 해결.
- 주요 브라우저(Chrome, Safari, Edge)에서의 성능 및 UI 품질 확인.
- Server Side Rendering (SSR)
- Next.js를 활용하여 이미지와 같은 리소스의 초기 로딩 속도를 15% 가량 개선
- 서버 렌더링을 통해 SEO 최적화 및 사용자 경험 향상
