미리보기

• 로봇 서비스를 관제하고 작업 현황을 파악할 수 있는 기능에 중점을 두고 물류센터 자동화에 기여하는 프로덕트를 개발하고 있어요. 빠르게 변하는 요구사항을 반영하고 다양한 방식으로 제품의 사용성을 개선하고 있어요.

• 유지보수성을 향상시키기 위해 꾸준하게 노력하고 있어요. 가독성이 좋지 않은 코드는 리팩토링하고, 테스트 코드를 작성하기 쉬운 환경을 구축하고, 반복 작업은 자동화시키려고 해요.

주로 두 명이 함께 개발하던 프로젝트였지만 최근에는 혼자 개발하고 있어요.

• 기능 개발:

  • 로봇의 실시간 위치, 작업 상태 등을 다양한 시각 정보로 나타내는 지도 및 대시보드 화면

  • 엑셀 파일 업로드를 통한 물류센터 작업 지시, 파일 내 데이터의 유효성 검증

  • 여러 생산성 지표를 다양한 차트로 확인할 수 있는 통계 화면 등 전반적인 기능 개발

• 사용성 개선:

  • 대용량 지도 이미지를 캐싱하여 로딩 속도 개선(로딩 90% 이상 감소)

  • 메모이제이션을 통한 렌더링 최적화로 대량의 개체를 포함하는 지도의 성능 개선(버벅임 현상 개선)

• 인프라 관리:

  • S3를 통한 정적 웹 호스팅으로 SPA 배포 및 CloudFront의 뷰어 및 캐시 정책 관리

  • 단일 버킷에 여러 형상을 배포하고 접근 경로에 따른 배포 형상을 보여줄 수 있도록 개선하여 운영 비용 절약

• 자동화:

  • 모노레포에서 각 패키지에 따라 동작하는 CI/CD, 팀 컨벤션에 맞는 시멘틱 버저닝, 노션 패치노트 생성

  • CI/CD 실패 알림, 배포 공지 슬랙 메세지

• 유지보수성 개선:

  • 자바스크립트였던 프로젝트 코드를 모두 타입스크립트로 작성

  • 단위 및 통합 테스트 코드 작성(0%에서 현재 약 70%)

  • MSW, Storybook 도입으로 테스트 환경 개선

  • 모노레포로 통합된 개발 환경을 구축하고 Yarn PnP 도입으로 패키지 설치 시간 단축(약 3분에서 20초 미만으로 감소)

  • FSD(Feature Sliced Design) 적용으로 프로젝트 아키텍쳐 개선

• Stack: Vite, TypeScript, React, GraphQL, Apollo Client, Zustand, Jest, Storybook, Sass

주로 혼자 개발했던 데스크탑 애플리케이션이에요.

• 송장 바코드를 스캔하면 송장 유형에 따라 미리 설정된 프린터로 미리보기 없이 출력되는 기능 구현

• 로그인, 바코드 스캔, 프린터 설정, 송장 내역 등의 화면 개발

• 송장의 다양한 디자인 요구사항에 빠르게 대응할 수 있도록 레이아웃 모듈화

• API 인터페이스 변화에 빠르게 대응할 수 있는 어댑터 계층 구현

• 송장 출력 애플리케이션 및 라벨 프린터 세팅 가이드 작성 및 제공

• Stack: Electron, Vite, TypeScript, React, GraphQL, Apollo Client, Jest, Sass

개인 위키를 개발하고 운영하고 있습니다. 터미널에서 VimWiki로 문서를 작성하고 바로 배포할 수 있는 파이프라인을 구축했어요. 공부한 것들을 조금씩 올리고 있습니다.

• 모바일까지 고려한 반응형 디자인 적용

• 라이크/다크 모드 구현

• 검색 엔진 최적화 고려

• VimWiki 인덱스 페이지 자동 생성

• 계층화된 문서 구조에 따라 경로 생성

• 문서에서 상위, 하위 문서 확인 및 네비게이션 가능

• 각 문서에서 변경 이력 확인 가능

• Stack: TypeScript, React, Gatsby, Styled Component