-
Notifications
You must be signed in to change notification settings - Fork 5
수식셰프 기술 특장점
웹 사이트 어느 곳에서나 수식을 편집하고, 편집한 수식을 쉽게 사용할 수 있는 서비스를 제공하기 위해 Chrome Extension 환경을 선택하게 되었습니다.
저희 팀은 React와 Typescript을 이용하여 개발 환경을 구축하였으며, Chrome과 Whale Store에 등록하여 확장프로그램으로 사용하였습니다.
🔗 나만의 모듈을 NPM 사이트에 직접 배포해보기
🔗 React-Mathquill 라이브러리 분석
🔗 boost-mathquill link
수식 편집을 구현하기 위해 MathQuill 라이브러리를 사용하였습니다.
MathQuill 라이브러리는 Tag로 그려진 수식들을 직접 수정할 수 있어 사용자에게 효율적인 UI를 제공할 수 있었습니다.
하지만 이중 적분, 행렬, 복잡한 기호 등 저희가 원하는 수식이 지원되지 않는 경우가 많이 있었고, 이와 관련된 issue 및 PR을 찾아보니 거절 당한 것을 확인했습니다.
라이브러리의 라이센스를 확인한 후, MathQuill 라이브러리를 fork한 후, 기존 라이브러리에 없던 수식을 직접 추가하였습니다.
이렇게 만들어진 저희팀만의 라이브러리는 NPM 모듈로 재배포하여 사용하였습니다.
여러 React 디자인 패턴이 존재하지만, 이미 존재하는 디자인 패턴의 장점을 합쳐 저희 팀만의 폴더 구조를 고민하고 설계 해보았습니다.
수식 셰프라는 프로젝트명에 맞게 폴더 구조를 크게 Ingredient(재료), Meal(음식), Set(세트) 로 나누었습니다.
- Ingredient : 재사용이 가능한 가장 작은 단위의 컴포넌트
- Meal : Ingredient와 추가적인 코드들로 합쳐진 컴포넌트
- Set : Meal과 Ingredient 및 추가적인 코드들로 합쳐진 컴포넌트로, 페이지를 구성하는 주요 컴포넌트
각각의 컴포넌트 폴더 안에는 크게 index.tsx, style.ts, useComponent.ts로 나누어 코드를 작성하였습니다.
- index.tsx : view 부분을 rendering 해주는 코드 작성
- style.ts : emotion 라이브러리를 이용하여 컴포넌트 기반 스타일 코드 작성
- useComponent.ts : 해당 컴포넌트에 필요한 logic 코드 작성
🔗 TypeScript + React에 Redux 적용하기
🔗 TypeScript Redux에서 createAction 만들어보기
React 프로젝트가 커질 때 심해질 수 있는 Prop Drilling 현상을 방지하며 state를 좀 더 효율적으로 관리하기 위해 Redux Library를 사용하였습니다.
Redux를 적용하면서 상태들을 중앙화 함으로써 컴포넌트 개발에 효율성을 증가시킬 수 있었습니다.
또한 프로젝트에서 다양한 수식들의 상태를 효율적으로 관리할 수 있었고, 수식 관련 부수적인 기능들을 쉽게 개발할 수 있었습니다.
프로젝트를 진행하는 과정에서, hooks와 관련된 중복 코드가 많다는 사실을 알게 되었습니다.
이를 해결하기 위해, 자주 사용되는 로직들은 Custom hook으로 분리하였습니다.
Custom hook을 사용함으로써 깔끔하고 재사용성이 높은 코드를 작성할 수 있었습니다.
- useInput : Input과 관련 있는 로직을 담당하는 hooks
- useToggle : On/Off 상태 관련 로직을 담당하는 hooks
- useModal : Modal을 쉽게 만들어주는 hooks
- useCurrentTab : Redux의 특정 상태를 가져오는 hooks
- useDebounce : Debounce와 관련 있는 로직을 담당하는 hooks
- useThrottle : Throttle과 관련 있는 로직을 담당하는 hooks