미니 프로젝트 - 일정관리 캘린더

개요

• 개인 프로젝트
• 프로젝트 주제: 일정관리 캘린더
• 개발 기간: 2021.03.22 ~ 2021.03.24
• React + firebase 사용
• 데이터 베이스: firestore
• 형상관리 툴: git

프로젝트 특징

• 본 프로젝트는 개인 프로젝트로 일정 관리 기능이 있는 캘린더를 React와 서버리스 플랫폼인 firebase를 이용하여 구현
• 캘린더 라이브러리로 fullcalendar를 사용했으며 UI 부분은 styled-components, material-ui를 사용
• 모든 페이지는 PC, 모바일, 태블릿에서 확인했을 때 뷰가 깨지지 않도록 반응형으로 구현
• 컴포넌트 구성: Calendar-component, Upload-component, Detail-component, NotFound-component
• 주요 기능: 일정 추가, 삭제, 완료, 조회(전체 일정, 완료 일정 조회 조건부 랜더링)
• DB구성: {date: 날짜, title: 일정내용, completed: 완료여부(boolean)}

상태관리 패키지

• react-redux, redux
• redux-middleware(redux-thunk)
• react-router-dom

후기

저번 미니 프로젝트 때는 팀 프로젝트로 진행했지만 이번 프로젝트는 개인 프로젝트로 진행하였다.

이번 프로젝트는 리액트와 서버리스 플랫폼인 파이어 베이스를 이용해서 구현을 해봤는데 먼저 리액트의 자유도가 너무 좋았다.

컴포넌트별로 기능을 분리하는 점, 부모 컴포넌트는 자식 컴포넌트에게 Props를 보내 데이터를 관리하는 점, 부모-자식 관계로 데이터를 관리하기 곤란할 때 리덕스를 이용해 전역으로 데이터를 관리하는점 등 정말 리액트를 사용하는게 익숙해진다면 더욱 자유롭게 컴포넌트를 분리해서 프로젝트를 진행할 수 있겠다는 생각이 들어 아주 만족했다.

두번 째로 처음으로 서버리스를 사용해봤는데 뭔가 데이터를 클라이언트와 서버간 통신하는 방식과 비슷하면서도 차이가 있었다.

차이점은 api 경로를 일일이 지정할 필요가 없었다(?) 그냥 파이어스토어에 연결을 해서 사용하니 훨씬 간편한 느낌이 들었다.

마치 내가 코드로 가짜 데이터를 만들어 필요한 부분에다가 넣어주는 느낌 같았다.

기본 과정을 잘 마무리한 것 같으며 심화 과정 및 향후 프로젝트들을 통해 다양한 데이터를 다뤄보고 싶다.

 

 

github url: github.com/noh-yj/calendar

noh-yj/calendar

웹 사이트 url: hanghae-calendar.firebaseapp.com/

항해99 | 일정관리 달력

메인 페이지

완료된 일정 보기(조건부 렌더링)

일정 추가 페이지

상세 페이지