주얼리 고객사 내부용 ERP
기여도
- 주니어 개발자 3명, 시니어 개발자 2명과 협업하여 프로젝트를 진행
- 프로젝트 내 전체 개발 화면의 15% 설계 및 구현
주요 업무 및 역할
백엔드
- Express를 활용한 로직 직접 구현
- Express.js를 사용해 서버 API와 클라이언트 간 요청 처리 로직을 직접 설계 및 개발
- RESTful API 설계를 통해 확장성과 유지보수성을 강화
- 사용자 인증, 데이터 검증 등 비즈니스 로직 구현
- 토큰 기반 인증
- JWT (JSON Web Token)을 활용하여 확장성 높은 토큰 인증 방식 설계
- Stateless 서버 아키텍처 구현을 통해 인증 처리 성능 및 보안성을 향상
- 직렬화 및 역직렬화 작업
- 서버와 클라이언트 간 네트워크 통신에서 class-transformer와 class-validator를 통해 데이터 직렬화 및 역직렬화 처리
- 데이터 모델 검증 로직을 설계하여 통신 데이터의 신뢰성과 품질을 보장
프론트엔드
- 컴포넌트(UI) 설계 및 개발
- React를 활용하여 관리자, 고객사, 홈페이지 3개 사이트의 공용 및 개별 UI를 설계 및 제작
- Atomic Design 기반의 재사용 가능한 컴포넌트를 개발하여 유지보수성을 높임
- 기능 개발
- 플랫폼, 쇼핑몰, 관리자 사이트의 클라이언트 측 비즈니스 로직 설계 및 구현
- 비즈니스 로직의 모듈화와 최적화를 통해 클린 코드 유지
- 프론트엔드 상태 관리
- MobX를 활용하여 View와 Model 간 의존성을 제거한 View Model 설계
- 객체지향 설계를 기반으로 확장성과 유지보수성을 강화한 상태 관리 로직 구축
- UI Testing
- Storybook을 통해 UI 컴포넌트의 Visual 및 Interaction 테스트 진행
- 컴포넌트 단위 테스트로 UI 일관성과 동작 안정성을 확보
- Form Validation
- React-hook-form을 이용하여 유효성 검증과 폼 상태를 관리
- 폼 검증 로직과 상태 관리를 모듈화하여 반복 작업을 줄이고 확장성을 높임
- SSR (Server Side Rendering)
- Next.js를 활용하여 이미지와 같은 리소스의 초기 로딩 속도 개선
- SEO와 사용자 경험을 고려한 서버 사이드 렌더링 적용
- 의존성/패키지 관리
- 모노레포 아키텍처를 도입하여 프로젝트를 구성하고, 각 서브 패키지 간 의존성을 체계적으로 관리
- 공유된 컴포넌트와 로직을 효율적으로 관리해 코드 중복을 최소화
- 크로스 브라우징 테스트
- Windows, macOS, iOS Mobile 환경에서의 크로스 브라우징 테스트를 통해 호환성 문제를 해결
- 주요 브라우저(Chrome, Safari, Edge)에서 안정적인 사용자 경험 제공
- 검색 엔진 최적화(SEO) 및 접근성 향상
- meta tag 삽입, a 태그를 통한 페이지 이동, 이미지 alt 속성 추가 등 작업을 통해 접근성과 SEO를 강화
- SEO 향상 작업으로 검색 노출 최적화와 사용자 경험 개선
