미리보기

프론트엔드 파트 구성원들의 업무효율성을 높이기위해 모노레포와 Turborepo, Cloud Remote Caching 도입으로 빌드 및 CI 시간을 단축하였습니다.

기존에 사내 Data Management 팀이 사용중이던 영상 라벨링 툴인 hVAT을 리뉴얼하는 업무를 맡아 진행했습니다.
초기 설계부터 진행하여 개발을 주도하였으며 프로젝트를 담당하는 인원이 본인포함 3명으로 증가하며 협업과 리딩을 맡았습니다.

사내 특허팀, 상표팀이 사용할수 있는 특허관련 백오피스인 PIIP Intranet 를 개발했습니다.
시작 단게에서 합류해 기획/디자인 레벨까지 참여하여 사내 구성원들이 필요한것이 무엇인지 고려하고 기여하였습니다.

웹 개발 인턴으로 사내 구성원 관리 백오피스 개발에 참여했습니다

• 모노레포 도입 및 운영

  • 개요
    • 휴톰의 여러 프로젝트를 하나의 코드베이스로 통합 관리하기 위해 모노레포를 도입
    • 패키지 매니저를 비교 분석하여 Turborepo를 도입하였고, 이를 통해 패키지 간의 의존성을 관리하고 빌드 시간을 단축
  • Trunk Based Development + Feature Flag
    • Feature Flag를 통해 각 환경(개발, 스테이징, 프로덕션)에서 기능의 제공 여부를 관리하여 Trunk 브랜치에서 항상 안정적인 배포가 가능하게 유지
    • Next.js의 미들웨어를 사용해 현재 환경에 따라 동적으로 Feature Flag를 관리하였고, 이를 통해 다양한 환경에서 안정적인 기능 제공 가능한 상태 유지

• 지속적인 통합 및 배포(CI/CD) 시간 단축

  • Cloud Remote Caching 도입
    • 불필요한 빌드와 테스트에 대해 캐시를 사용하여 CI 시간을 평균 2분대로 단축하여 프론트엔드 개발자들의 작업 시간이 단축되었고, 개발 효율성을 크게 향상시키는데 기여
  • E2E 테스트
    • Feature Flag의 안정적인 동작(예상대로 작동하는지 검증하고, 안정적인 서비스 제공을 보장)을 확인하기 위해 Cypress를 사용하여 E2E 테스트 작성

#Typescript #React.js #Jest #Zustand #ReactQuery #Nest.js #TypeORM

• 프로젝트 리드 및 개발
  프로젝트를 리뉴얼하며 기존의 문제점들을 해결해나아간 경험들을 작성한 회고가 있습니다. 자세한 내용은 에서 확인 가능합니다.

  • 프로젝트 초기 개발 및 설계 주도
    • 기존 서비스 리뉴얼을 위해 초기 설계를 진행하고 개발을 주도
    • 프로젝트를 담당하는 인원이 혼자에서 3명으로 증가하면서 협업과 리딩을 맡음
  • 협업 조직 및 작업 분배
    • 주기적인 회의를 통해 협업 방식을 논의하고, 팀원들의 역량을 파악하여 작업을 효율적으로 할당
    • 문서화 작업을 통해 프로젝트의 이해도를 높이고, 향후 유지보수를 용이하게 함
  • 칸반 보드 도입 및 운영 이슈 관리
    • Data Management(DM) 팀의 운영 이슈를 효율적으로 관리하기 위해 칸반 보드 도입
    • 실시간 작업 상태 파악과 우선순위 관리를 지원

• 프론트엔드 개발

  • Zustand와 React-Query를 도입하여 애플리케이션의 전역 상태 관리를 최적화 함
  • Zustand로 클라이언트 상태를 효과적으로 관리하고, React-Query의 Query Key 구조화를 통해 코드 가독성과 유지보수성을 크게 향상
  • OpenAPI Specification (OAS) Generator를 활용하여 API 스펙을 자동 생성하여 개발 기간을 단축하고 개발 효율성을 향상
  • GCP의 Cloud Load Balancer와 Cloud Storage를 이용한 정적 웹 호스팅 방식으로 프론트엔드 배포 전략을 개선

• 백엔드 개발

  • 도메인 객체 생성 시 발생할 수 있는 사이드 이펙트를 분석하고, 유닛 테스트 케이스를 설계하여 사이드 이펙트를 최소화
  • 비즈니스 로직을 리팩토링하여 코드의 가독성과 유지보수성을 향상시켰으며, 지속적으로 테스트 자동화 도구를 활용하여 유닛 테스트를 실행
  • **OpenAPI Specification (OAS)**를 활용하여 프로젝트 초기부터 API 엔드포인트, 요청 및 응답 형식 등을 명확히 정의하고 관리
  • GCP의 Compute Engine에서 웹 애플리케이션 서버 배포 방식을 GCP Cloud Run 및 Cloud Build를 이용한 서버리스 아키텍처로 전환

• 인프라 서비스 관리

  • 개발, 스테이징, 프로덕션 환경으로 구분하여 프론트엔드와 백엔드를 서비스 구축.
  • IAM을 활용하여 수술 영상 등의 프라이빗 자원 접근을 안전하게 관리.
  • 콜드스타트 문제를 해결하기위해 Cloud Scheduler를 활용하여 특정 서비스의 인스턴스를 워킹 타임에 맞춰 가동.

#Next.js #Javascript #GraphQL #Antd #Jest

• 개발 환경 개선

  • 자주 변경되는 기획으로부터의 안정성 향상을 위해 단위 테스트를 도입했습니다. 자세한 내용은 블로그에서 확인 가능합니다.

• 프론트엔드 개발

  • Next.js를 활용하여 클라이언트 및 어드민 프로젝트에 참여하였고 사용자 경험 개선 및 렌더링 최적화에 기여
  • Lerna를 사용한 Monorepo 환경에서의 프론트엔드 개발을 주도하여 코드 공유와 관리의 효율성을 높이고, 일관성을 유지하면서 다양한 프로젝트에 참여
  • Apollo Client와 GraphQL을 통한 데이터 관리에 중점을 두었고 필요한 데이터만을 효율적으로 요청하여 오버페칭과 언더페칭을 방지
  • Ant Design와 styled-components를 결합하여 일관된 UI를 제공
  • 클래스컴포넌트를 함수 컴포넌트로 리팩토링 업무 수행

#Next.js #Javascript #GraphQL #Antd

• 프론트엔드 개발

  • Next.js를 활용하여 클라이언트 및 어드민 프로젝트에 참여하였고 주로 사용자 경험을 개선하고 효율적인 렌더링을 위해 Next.js를 활용
  • Lerna를 사용한 Monorepo 환경에서의 프론트엔드 개발을 주도하여 코드 공유와 관리의 효율성을 높이고, 일관성을 유지하면서 다양한 프로젝트에 참여
  • Apollo Client와 GraphQL을 통한 데이터 관리에 중점을 두었고 필요한 데이터만을 효율적으로 요청하여 오버페칭과 언더페칭을 방지
  • Ant Design와 styled-components를 결합하여 일관된 UI를 제공

#PHP #LarLarvel #Jquery

• 백오피스 개발

  • Linux Crontab을 이용하여 연차(휴가) 관리 모듈의 일정 관리 및 자동화 알림 기능 개발
  • Laravel 프레임워크와 MySQL 데이터베이스를 활용하여 안정적이고 확장 가능한 서버 개발
  • 프로젝트를 MVC 패턴에 기반하여 설계 및 개발하였으며 이를 통해 코드의 모듈화와 유지보수성을 강화
  • 사용자 경험을 고려하여 퍼블리싱 및 클라이언트 사이드 작업을 수행하였으며 jQuery를 활용하여 동적이고 직관적인 사용자 인터페이스를 제공

• 스터디의 멘토로 참여하여, 스터디원들의 리액트 프로젝트 및 코드에 대한 코드리뷰를 수행
• 개인적인 면담을 통해 스터디원들의 취업과 이직에 관한 상담을 진행
• 개발 경험을 바탕으로 스터디원들에게 적절한 개발 방향성을 제시하고, 기술적인 도움과 조언을 제공

• 스터디의 멘토로 참여하여, 스터디원들의 리액트 프로젝트 및 코드에 대한 코드리뷰를 수행
• 개인적인 면담을 통해 스터디원들의 취업과 이직에 관한 상담을 진행
• 개발 경험을 바탕으로 스터디원들에게 적절한 개발 방향성을 제시하고, 기술적인 도움과 조언을 제공