에어데스크 + 캘린더
오픈소스와 jQuery 플러그인으로 만든 캘린더 기능
에어데스크는 새 탭을 바꿔주는 브라우저 확장 프로그램입니다. 이번 휴가때는 뭘 만들어볼까 하다가 캘린더를 만들었습니다. 사실 만들었다기 보단 다른 사람이 만들걸 가져와 쓴 것입니다. 바로 오픈소스를 활용했는데 가장 대표적으로 쓰이는 캘린더 소스인 fullcalendar입니다.
3.2.1.1 버전 에어데스크 풀캘린더는 상당히 뛰어난 소스입니다. 직접 캘린더를 만드려면 고려해야할 사항이 많습니다. 일단 달력 표시부터 문제입니다. 달을 기준으로 움직이면 HTML도 수정해주어야하고, 거기에 들어가는 이벤트 처리를 생각해야 하죠. 일을 기준으로 움직이거나, 이벤트를 이동하거나 하면서 생기는 문제들도 고려해야되구요. 그 뿐 아니라 확장성도 고려해야합니다. 풀캘린더는 이러한 모든 점에서 뛰어날 뿐더러 잘 정리된 문서와 이해하기 쉬운 구조, 여러 확장가능한 요소들을 가지고 있습니다.
fullcalendar 홈페이지API 분석하기
먼저 캘린더 소스를 가져와 분석해보았습니다. 풀캘린더는 div element에 .fullCalendar() 라는 명령을 통해서 동적으로 생성할 수 있습니다. 또한 locale파일이 있습니다. 이것은 풀캘린더를 여러 언어로 바꾸어 주는 역할을 합니다. 이벤트는 JSON 파일이나 XML 파일 구조를 넣어주면 추가가 가능합니다. 제가 사용한 크롬 확장프로그램에서는 chrome.storage.sync에 배열 객체를 생성하는 방법으로 해결했습니다.
간단한 동작를 담당하는 메소드를 익히고 제작 순서를 정해 비캔버스에서 정리해보았습니다.
캘린더 설계 캔버스 1
캘린더 설계 캔버스 2순서 정리하기
1) load data
API를 가볍게 보고나서 순서를 정리하였습니다. 가장 선행되어야할 명령은 사용자의 데이터를 가져와 보여주어야 합니다. 이벤트를 가진 데이터를 가져와서 캘린더에 할당해줍니다. 이건 너무 간단해서 따로 함수를 구현할 필요가 없었습니다.
2) add data
이벤트를 가져오는건 쉽지만 추가하는건 어렵습니다. 데이터를 추가하려면 세가지 데이터가 필요합니다.
- 일정
- 시작한 날짜
- 끝나는 날짜
이를 위해 새로운 창을 띄워 일정을 입력할 수 있게 만들어야 합니다. 기존에 쓰던 '새 링크 아이콘 만들기' 형태를 재사용해서 입력 양식을 만들었습니다.
새 링크 아이콘 생성창입력창은 만들었고, 일정을 입력할 수 있게 되었습니다. 그러나 아직 날짜 선택을 하지 못합니다. 그럼 날짜는 어떻게 입력할까요? 타임픽커(timepicker)를 추가해보았습니다. 타임픽커는 시간을 선택하는 기능을 합니다. 저희가 사용하는 jQuery에선 여러 플러그인을 제공하는데, 그 중 가장 편리하고 디자인이 괜찮은 플러그인을 추가했습니다.
에어데스크에 포함된 타임픽커타임픽커 역시 이미 만들어진 것을 가져왔기에 빠르게 구현을 할 수 있습니다. 약간의 버그를 잡아주고, 필요없는 요소를 수정하였습니다. 추가된 이벤트는 아래처럼 표현됩니다.
이벤트가 추가된 캘린더3) click event
다음 절차는 클릭입니다. 사용자가 이벤트를 클릭하면 어떤 동작을 기대할까요? 자세히 보거나, 수정, 삭제일 것입니다. 이것도 마찬가지로 새로운 창을 생성해 편집할 수 있게 만들어줍니다.
아직까진 쉽게 쉽게 진행합니다. 하지만 약간 까다로운 부분이 생깁니다.
4) Drag event
풀캘린더는 드래그 기능을 내장하고 있습니다. 일정을 끌어다가 다른 날짜로 옮기는 것입니다. 이 점이 매우 편리한데 코딩해주어야할 요소가 몇가지 있습니다. 먼저 이벤트의 날짜가 바뀌는 것은 기존의 데이터를 업데이트하는 것입니다. chrome의 내장 저장기능에는 업데이트가 없기 때문에 기존의 데이터를 가져와 검색하고, 기존 데이터를 삭제하고, 다시 생성해야 합니다.
객체 안에 배열이 들어간 경우이기 때문에 특정 요소의 인덱스를 찾을 때까지 루프를 돌며 검색합니다.
for (i = 0 ; i < eventList.length ; i ++) {
// find index
}
인덱스를 찾게 되면 splice를 이용해 삭제해주고, 새로 고친 데이터를 기존 배열에 push합니다.
eventList.splice(i,1);
eventList.push(newEventItem);
기존의 기록을 삭제하고 다시 만들어줍니다.
chrome.storage.sync.remove("eventList");
chrome.storage.sync.set(eventObject);
이런 절차가 드래그 하실 때마다 이뤄집니다. 한가지 아직 못 구현한 점은 크롬의 삭제 한계에 대한 경고인데, 그 점은 차후에 다시 쓰도록 하겠습니다.
확장성
풀캘린더를 확장할 계획이 있습니다. 몇몇 분들은 건의를 주셨는데, 구글 캘린더 등과 연동하는 것입니다.
풀캘린더는 만들어질 때부터 구글 캘린더와 연동할 수 있게 만들어진 점을 생각해보면 정말 쉽게 구현할 수 있을 것 같습니다. 하지만 구글 캘린더를 추가하려면 사용자의 구글 데이터를 API를 통해 가져와야 합니다. 그 점을 생각해보면 로그인 형태의 서비스를 제공해야할 것입니다.
네이버 캘린더와 연동도 준비중입니다. 정확히 읽어보진 않았지만 클라이언트 사이드에서만 구현하는 것은 아직 해답을 못찾았습니다. 네이버 캘린더 문서를 살펴봐도 node.js 바탕으로 설명이 되어있는데, 이것을 크롬 확장프로그램에서 사용하려면 저희가 서버를 따로 제공해서 데이터를 전송해주어야 할 것 같습니다.
그 외 리팩토링
리팩토링에 대한 캔버스요즘에 개발되는 속도가 상당히 줄었는데, 2~3주에 걸쳐서 리팩토링을 진행했습니다. 완벽한건 아니지만 전역변수도 상당히 줄이고, 중복코드를 줄였습니다. 제 의견으로는 js 프로그래밍을 하다보니 하나의 파일이 하나의 기능을 전담하는 구조가 이상적인 것 같습니다.
8월 이후
아쉽게도 8월 말부터 프로그래밍은 진행하기 어렵게 되었습니다. 군인이라는 신분이다보니 제 프로젝트보다 부대의 명을 따라야 하기 때문인데 예상하기론 11월 초까지 개발은 어려울 것 같습니다. 그 기간동안은 에어데스크라는 프로그램과 연결되는 멋진 웹서비스 구조를 설계할 생각입니다. 여러분과 소통할 수 있고, 또한 여러 재밌는 기능이 있는 서비스의 설계를 하는 시간으로 만들고자 합니다. 기대해주세요 :)
