CalendarToDo

미리보기

배경

업무 일정과 관리를 조금 더 쳬계적이고 사용자 친화적이고
자유도가 높은 일정 관리 프로그램이 있다면 좋겠다고 생각하여 제작하게되었다.

요구사항

• 날짜를 선택 가능한 달력이 존재해야함
• 선택한 날짜에 맞는 trello 화면이 나와야함
• trello에는 사용자가 Board를 만들 수 있어야함
• Board에는 Card를 생성 가능해야하며 서로 교차 가능해야함
• Board 위치와 Card 모두 순서를 바꿀 수 있어야함
• 해당 날짜에 저장된 기록이 있다면 달력에 표시 되어야함

예상 사용자 인터페이스

-달력

-trello

제작의의

typescript를 사용하여 변수 타입을 지정하여 내가 실수로 잘못된 타입을 입력하게 된다면
코드 실행 전 오류를 알려주게 되어 실수를 수정할 때까지 실행을 막아줌으로 차후에 있을 오류들을 방지할 수 있다.
이러한 typescript를 활용한 toyProject를 해보면 좋겠다 생각하여 시작하게 되었다.
라이브러리는 react-calendar를 이용하여 달력을 구성해주었으며,
trello는 react-beautiful-dnd를 이용하여 drag and drop을 보다 쉽게 만들어 주었다.
페이지 이동은 Router, 데이터 전달과 받는 것은 React-Hook을 이용하여 주었고,
style은 styled-components 사용하여 style을 꾸며주었다.
완성물을 보여주기 위하여 db사용이 아닌 localStroage를 사용하여 저장을 하게 하고, github를 이용하여 배포를 하였다.

사용 기술

• 개발 언어 : javascript, typescript
• 사용 프레임워크 : React

사이트

주소 : calendarToDo