프론트엔드 개발자로서 AI관련 프로젝트에서 UI설계 및 유지보수 담당

- 사용자 시나리오 및 UI/UX 기획 - 사내 신규 프로젝트를 위한 팀이 구성되어 AI 화면 분석 서비스 웹을 구상 - 사내 AI 세미나 교육을 통한 AI 프로세스 이해 - Draw.io를 이용한 UI/UX 기획 - 와이어프레임을 가지고 디자이너에게 디자인 요청 후 웹에 적용 - 모노레포 (npm workspace를 활용) 도입으로 불필요한 개발/배포 환경을 개선 - 도로 돌발감지, 좌회전 감지, 횡단보도 사람 인식 등 3개의 프로젝트를 만들 때 마다 개발환경과 배포환경을 세팅해야 되는 문제 파악 - 3개의 프로젝트를 공통된 개발환경에서 진행하기 위해 모노레포 도입 - 공통으로 사용될 컴포넌트는 패키기화하여 재사용성 향상 - 3번의 개발환경 세팅을 1번으로 단축 - 아토믹 디자인 패턴 도입 - 산재되어 있는 여러 컴포넌트 스타일을 디자인 시스템 도입으로 개선 - 여러 곳에서 수시로 사용되는 Atom, Molecule, Template 단위의 컴포넌트는 그 자체로 상태를 가지면 안된다고 판단 - 상태는 Organism, Page 단위에서 관리하고 하위 컴포넌트로 내려주는 방식으로 개발 - 이를 통해 재사용 가능한 컴포넌트를 만들 수 있고 유지관리 측면에서 유리 - WebSocket 최적화 - WebSocket으로 개발 당시 초기에 모든 돌발 종류를 구독하고 있어 불필요한 리소스 소모 및 사용자의 부정확한 판단 - 구독방식 개선(모든 돌발 → 차량/사람 사고, 역주행, 무단횡단)으로 무의미한 알림 제거 - React-Query 사용으로 API 데이터 캐싱 - 기존 Mobx로만 상태관리를 하여 반복적인 API 코드 문제 파악 - Server State와 Client State를 분리할 필요성이 있어 React-Query 도입 - API 데이터의 캐시를 통한 최적화 - 기존 코드에서는 보일러플레이트가 많았는데 React-Query 도입 후 코드 가독성 향상 - 데이터 시각화 - ECharts 라이브러리를 활용하여 돌발 감지 데이터 시각화 - 라이브러리 사용법 및 중간에 겪은 시행착오들을 문서화하여 팀에 전파 - Storybook 도입으로 기획과 개발 동시 진행 개발 시간 단축 - 프로젝트 개발 전 기획 단계에서 개발기간이 부족한 문제 파악 - 개발시간을 단축시키기 위해 기획과 개발을 동시에 진행할 수 있도록 Storybook를 도입하여 공통컴포넌트 우선 개발

더보기

프론트엔드 개발자로서 HTML,CSS,JS,React,Redux의 학습을 진행하였고 5개의 프로젝트를 진행하였습니다.

자동화장비 개발에서 PM역할을 수행하며 외부업체와의 협업을 통한 자동화 장비 개발을 진행하였고 개발이 완료된 후 유지 보수를 통하여 장비의 완성도를 높였습니다.

더보기