[내신의 모든것 서비스 개발]
react, typescript, redux, styled-components, nextjs, date-fns, figma, dshare-ui, swagger
- 프론트엔드 리딩
- 학생들을 위한 내신 문제풀이 서비스인 내모(“내신의 모든것”) 1.5 개발 및 런칭
- 프로젝트 최초 세팅 및 설계, 자바스크립트로 구현된 1.0 프로젝트를 타입스크립트로 포팅이 목적이었으나, 기존 프로젝트가 버그가 너무 많고 유지 보수가 어려울 것으로 판단하여 기획팀과 이야기 하여 전면 재개발
- 디자이너와 협업하여 기존 불편한 UI/UX 대폭 개선(모든 화면의 디자인 변경)
- 메모제이션을 이용한 리렌더링 최적화
- 기존에 모든 문제 데이터를 한번에 패칭하던 부분을 개선하여 체감 가능한 문제 풀이 속도 개선
- 웹뷰 대응을 위한 모바일 개발자와 url-scheme 개발 및 적용
- 홈 화면, 채점하기, 채점 완료, 문제 풀이, 학습관리, 문제 상세 화면 및 비즈니스 로직 개발
- 다양한 상태를 데이터에 따라 다른 카드를 보여주는 Dynamic Card 컴포넌트 개발
- 문제 풀이 화면 개발, 지문-보조지문-테이블형 지문-이미지형 지문 등 다양한 형태의 지문을 렌더링 해주는 Dynamic Passage 컴포넌트 개발, 4개의 문제 보기를 렌더링 해주는 Dynamic List 컴포넌트 개발, 내가 체크한 정답과 틀린 답, 모르는 답을 보여주는 Static List 컴포넌트 개발, 기존에 구현하지 못했던 실질적 마지막 문제 찾기 구현
- 1.0에서 구현하지 못했던 비즈니스의 요구를 대부분 구현
- 백엔드 개발자와 협업하여 기존에 대응하지 못했던 api 스펙 모두 복구 및 적용
- url과 일정한 인터페이스에 따라 전역적으로 관리될 수 있는 global header 컴포넌트 개발
- 현재 2.0을 목표로 디자인 라이브러리 개발 및 현 프로젝트 버그 수정 및 리팩토링
[디쉐어 디자인 시스템 개발]
react, typescript, styled-components, material-ui, roll-up, nexus, storybook
- 프론트엔드 리딩
- 기존에 파편화 되어있던 UI 컴포넌트들을 Dshare만의 브랜딩을 입힌 디자인 라이브러리화
- 디자이너와 끊임없는 토론을 통해 foundation, components 정의 및 구현
- 추후 다른 프로젝트에서도 사용할 수 있도록 roll-up을 통한 nexus private 저장소에 퍼블리싱 시스템 구축 및 문서화
- 일관된 인터페이스 및 dot notation, 다이나믹 컴포넌트 구현 등을 통해 개발자의 사용성 극대화
- 스토리북을 통해 디자이너와 완성된 컴포넌트 공유하며, controls를 통해 UI 테스트를 할 수 있도록 구현.
- 일부 컴포넌트만 material-ui 랩핑하여 컴포넌트 정의, 고도화 시점에서 시간적 여유를 가지고 우리만의 인터페이스로 통일하며 수정.
- 트리 쉐이킹을 통해 라이브러리의 경량화를 하며 반복적인 리펙토링 진행중.
[그 외]
협업을 위한 git commit 규칙 확립, eslint 적용, jira 스마트 커밋 도입, sentry 도입, nexus npm repository 도입, 현재 조직 규모에 비해 복잡한 기존 github 전략 대신 trunk based 개발 전략을 통해 짧은 PR과 브런치 생명 주기, 관리를 통한 개발론 전파 및 적용, 코드 리뷰
और देखें
