$ yarn install$ yarn startcreate-react-app을 이용하여 빠르게 어플리케이션 개발환경을 구성하였고, react 와 typescript를 사용하여 개발하였습니다. 어플리케이션 전체의 state 관리를 위해 redux를 채용하였고, 어플리케이션 액션을 효율적으로 관리하기 위해 redux-saga를 사용하였습니다. UI 컴포넌트 라이브러리는 material-ui를 활용하였습니다.
Function Component로 작성되었으며, hooks를 적극적으로 이용하였습니다.
- UI 프레임워크
- React + Typescript + styled-components
- Global State 관리
- redux + redux-saga
- 데이터베이스
- json-server를 이용한 mock 데이터 활용
- 어플리케이션의 동작을 액션 단위로 구성하였으며, 각각의 액션은 redux-saga 베이스의 액션 플로우로 구성될 수 있도록 작성하였습니다.
- smart & dumb component 구조로 분리하였습니다.
- ducks 패턴을 적용하여, 액션생성자와 리듀서를 함께 관리할 수 있도록 작성했습니다.
- 데이터 구조를 기준으로 redux store를 구성하였습니다.
- 액션생성자는 가능한한 간략하게 액션에 대한 설명만을 작성할 수 있도록 고려했으며, saga를 활용하여 액션을 조합할 수 있도록 구성하였습니다.
- 월별 일정표의 날짜 셀을 클릭시, 해당 날짜와 현재 시간을 참고한 기본 1시간 단위의 일정을 생성할 수 있습니다.
- 주별 화면에서 날짜별 시간 타임라인을 선택하는 경우, 해당 위치의 시간대를 기준으로 1시간의 일정을 생성할 수 있습니다.
- 클릭 위치에 따라 0분과 30분을 초기값으로 설정하였습니다.
- 드래그 앤 드롭을 이용해 해당 일정의 날짜를 변경할 수 있습니다.
- 중복 데이터 검증
- 생성하고자 하는 일정의 시작 날짜와 종료 날짜를 기준으로 일정 목록을 조회하고, weekIndex와 dayIndex를 기준으로 중복되는 데이터가 존재하는지 검증이 가능할 것으로 생각합니다.
- 단위테스트