토이 프로젝트 | 웹 다이어리 To Do Lee

깃 허브 링크

배포 사이트 링크

 

만들게 된 이야기

지금까지 투두 리스트를 총 3번 만들어 보았지만 저와 디자이너인 여자 친구가 사용하기에 기능이 빈약했고 우리 둘의 요구사항을 모두 적어 기능으로 구현을 하게 된 프로젝트입니다. 웹 다이어리의 기능으로는 날짜 선택이 가능해야 했고 , 카테고리 추가 및 변경 그리고 완료율까지 표시하는 것으로 서로 이야기 후 디자인을 피그마로 만들어주어서 약 일주일 동안 만들게 된 프로젝트입니다. 기존의 로그인, 사용자들끼리 소통할 수 있는 페이지 , 프로필 수정이 가능한 사이트에 웹 다이어리를 추가하게 되었습니다.

 

기능 구현

 

웹 다이어리 기능

Firebase를 이용한 백앤드 구현

• firebase의 필터 기능을 이용하여 작성자 자신이 작성한 글만 보여지게 하여 투두 리스트 기능을 만들었습니다.
• firebase의 setDoc을 사용하였고 스프레드 문법으로 기존의 데이터와 수정된 데이터를 객체로 만들어 서버 데이터에 보냈습니다.

라이브러리 없이 만든 달력 데이터

• 달력을 만들어 월에 해당하는 시작하는 요일과 일 수에 맞춰 데이터가 생성됩니다.
• 날짜를 눌렀을 때 해당되는 날짜로 이동하며 해당되는 데이터를 불러와 표시합니다.

해당되는 날짜의 투두 리스트 완료율 제공

• 유저가 누른 날짜에 해당되는 완료한 투두 리스트/생성된 투두 리스트 % 값으로 완료율을 유저에게 표시합니다.

카테고리 및 투두 리스트 기능 설명

• 카테고리를 추가할 수 있으며 클릭으로 카테고리 변경, 더블클릭으로 카테고리 이름 수정 기능을 이용할 수 있습니다.
• 유저는 생성된 투두리스트 데이터를 완료, 삭제, 수정을 할 수 있습니다.
• 과거의 날짜에는 생성 및 투두리스트 데이터를 아예 수정할 수 없으며 , 오늘 오전 6시를 기준으로 전 날에 해당하는 투두리스트를 완료 및 삭제 수정 기능을 사용할 수 있습니다.

API 설계

• 투두리스트 데이터 설계 시에 많은 유저와 많은 날짜 그리고 많은 카테고리 및 투두리스트 데이터들을 어떻게 효율적으로 설계해야할 지 고민을 많이 했었습니다.
• 큰 틀에서는 유저의 이름으로 모든 데이터가 각각 들어가 있고 유저안의 투두리스트 배열에서 각각 날짜에 해당되는 데이터가 있게끔 설계하여 적용중에 있습니다.

 

정리 및 회고

새로 알게 된 점

• 기존에 배포했던 사이트에서 URL 이동 후 새로고침시에 에러가 나는 것을 404 페이지를 gh-pages에서 설정하여 새로고침하여도 해당 라우터로 접속이 가능하게 하는 방법을 알게 되었습니다.
• Firebase라는 간단한 백앤드를 통해 새롭게 시작하는 작은 프로젝트에 이용할 수 있다는 것을 알게 되었습니다.
• 라이브러리 없이 리액트로 달력을 만드는 방법을 알게 되었습니다.

힘들었던 점 / 해결과 극복 방법

• 날짜를 이동했을 때 카테고리가 선택되지 않아 글이 post 되지 않았던 문제가 있었는데 useEffect로 카테고리의 state 값이 null이라면 해당 날짜 데이터의 첫번째 카테고리를 설정하도록 하였고 맨 처음 데이터가 도착하지 않은채로 실행이 되서 제대로 안되었었는데 setTimeout으로 약간의 지연을 시켜 데이터가 도착 후에 실행되도록 하였습니다.
• 처음 사용하는 유저나 날짜를 이동했을 때 사용자에게는 해당 날짜의 데이터가 없는 데 이때 데이터를 받아온 후 데이터 배열이 빈 배열이라면 이라는 조건문으로 날짜에 해당되는 카테고리 데이터를 추가해주었습니다.
• API를 어떻게 설계해서 데이터를 이용해야 할지 고민이 많이되었었는데 피그마에서 어떤식으로 데이터를 정리할 지 생각을 하고 코드를 작성하니 잘 해결되었던 경험이 있습니다. 

 

프로젝트 후기

피그마에서 디자인이 주어지니 더 좋은 결과물이 나올 수 있었고 firebase에 대해서 더 많이 사용하게 되었다 보니 이젠 많이 익숙해진 것 같고 다른 프로젝트에서도 저장이 필요하다면 이용해보려고 합니다. 만드는 내내 재미있었고 몇 시간 동안 안 풀리던 문제들도 있었지만 실제로 저와 여자 친구가 사용하고 지인들이 사용해주다 보니 점점 발전하는 사이트가 될 것 같습니다. 또한 이제 웹 다이어리를 electron을 사용해서 다른 기능들을 추가하여 소프트웨어로 개발해 보려고 합니다.