Vue Calendar Project

vue를 사용한 저의 첫 프로젝트입니다. 첫 프로젝트로 calendar Todo를 하기로 결정한 이유는 아무래도 기본적인 CRUD를 구현해보는데에 적합하다고 생각되었기 때문입니다. 캘린더를 직접 구현해보고 싶어서 캘린더 라이브러리 없이 진행하였습니다. 기획부터 환경구축과 개발까지 처음으로 진행해본거라 서투르고 미흡한 부분이 많았습니다. 하지만 그 과정 속에서, express서버와의 연동, 컴포넌트 간의 데이터 전달, vuex 저장소를 통한 데이터 관리, 서버와의 api 통신 등등.. 배운 점들이 많았습니다. 이번 프로젝트를 통한 값진 경험들을 기반으로 더 성장할 수 있도록 더 배우고 노력하기로 다짐했습니다.

used

[frontend] webpack + bootstrap + vuejs + vuex + vuerouter

구현 기능

폼 입력 유효성 validate를 통한 회원가입 / 로그인

회원가입과 로그인을 할 때 사용자가 입력하는 폼에 대해 유효성 검사를 진행해줍니다. 라이브러리로는 vee-validate을 사용하였으며, 입력값이 없는 경우, 비밀번호의 조건 충족 여부, 비밀번호 재확인 일치 여부를 검사하였습니다. 로그인된 유저는 state에 저장해주어 로그인 여부를 판단하는 데에 사용하였습니다.

캘린더 월 이동하기

javascript의 date 함수를 통해 월 렌더링을 해주었습니다. 이전달, 다음달로 이동하여 원하는 달의 캘린더를 볼 수 있도록 하였습니다.

todo 등록하기

원하는 날짜에 todo를 등록하는 모달을 띄워줍니다. 모달 창을 닫을 때는 하위 컴포넌트에서 emit을 통해 이벤트를 발생시켜 닫아줍니다. todo의 title은 필수 입력값을 지정하였으며, 시간 관련 데이터는 두자리로 표현되게 변환하여 서버에 보내주며, 입력값이 없으면 00으로 전달합니다.

달력 및 특정 날짜에 해당하는 todo 보여주기

달력을 렌더링할 때 필요한 todo는 월별로 받아오며 받아온 todo는 vuex의 state저장소에 배열형태로 저장하여 관리합니다. filter함수를 통해 캘린더에 해당 날짜와 일치하는 todo 목록을 보여주는데, 이때 특정 날짜에 해당하는 todo는 3개까지만 보여주고, 남은 todo는 개수를 표시해주었습니다. 또한 캘린더의 날짜를 클릭하면 해당 날짜의 todo 목록을 보여줄 수 있도록 렌더링해주었습니다.

todo 상세 정보 보여주기 및 수정, 삭제하기

특정 날짜에 해당하는 todo 목록 중에서 원하는 todo를 클릭하면 props를 통해 todo의 정보를 전달하여 해당 todo의 상세 정보들을 보여줍니다. 상세 정보를 보여주는 컴포넌트에서 todo를 수정하고 삭제할 수 있습니다.

todo 검색 및 검색 결과 blink

찾기를 희망하는 todo의 title을 입력하면 해당하는 title 목록을 card 형태로 띄워줍니다. refs를 통해 dom에 접근하는 방식을 이용해, 결과 card의 외부 영역을 클릭하면 card를 닫을 수 있게 하였습니다. 또한 검색된 결과를 클릭하면 해당하는 달의 todo로 이동해, 찾고자 하는 todo임을 나타내기 위해 blink 처리를 해주었습니다.

창의 너비에 따라 todo 일정 반응형으로 보여주기

창의 너비가 줄어들면 그에 따라 todo 일정의 너비도 같이 줄어듦니다. 이에따라 어느 정도 크기가 점점 줄어들면 말줄임표로 todo의 title을 표시해줍니다.

프로젝트 구조