1. URL & Screenshots

link: https://rudypark3091.github.io/nomad-todolist-contest 

2. 자기소개

 안녕하세요 저는 대학에서 물리학을 전공하고 개발자를 목표로 공부하고 있는 휴학생입니다. 2018년 군대 전역 뒤 파이썬을 접한 뒤로 프로그래밍이 제 길이라는 것을 깨닫고 계속 공부하고 있습니다. 전역 이후에 니코님의 vanilla js 강의로 자바스크립트를 처음 접했습니다. 당시 gui 프로그래밍을 접해본적 없던 터라 신세계를 맛본 기분이었습니다. 저를 웹 개발의 길로 이끌어주신 니코님과 린님께 감사하는 마음으로 작품을 제출해봤습니다.

3. 서비스 소개

강의에서 배운 지식들과 제가 지금까지 공부해온 것들을 응용해 만들어봤습니다. 확장성과 가독성을 위해 es6 클래스 문법을 기반으로 컴포넌트화...했지만 아직 술술 읽히는 코드를 쓰기엔 내공이 부족한 듯 합니다... 백엔드 없이 구현한 페이지라 localStorage api를 데이터베이스처럼 사용했습니다.

화려한 UI보단 기능 구현에 힘썼습니다. 화면은 3개의 페이지와 One Page Scroll 으로 화면을 구성했습니다.

- 첫번째 페이지에선 canvas태그로 시계를 구현했고 이달의 todo를 보여주도록 했습니다.

- 두번째 페이지에선 달력상에서 날짜마다 몇개의 todo item이 있는지 보여주고 날짜 위에 마우스를 hover했을 때 해당 todo 내용을 보여주도록 했습니다.

- 세번째 페이지에선 각 todo item의 정보를 보여줍니다. todo item은 제목, 내용, 마감일을 가지고 있고, 각 todo item을 수정하거나 삭제할 수 있도록 했습니다.

이 외에도 최대한 예외처리를 고려하여 꼼꼼하게 제작했습니다.

4. 개발 과정

 처음엔 하룻밤만에 완성할 생각으로 셀프 해커톤을 열었으나... 두번째 페이지의 달력을 구현하는것만 하루가 걸렸습니다 -_- 또 One Page Scroll을 구현하는 과정에서 Apple의 기기들은 스크롤 동작에 관성이 존재해서 의도하지 않은 스크롤이 자꾸 발생했는데요, 이 부분은 어쩔 수 없이 스크롤 이벤트 발생 Interval을 사용자의 의도를 해치지 않는 선에서 최대한 늘려 완화시켰습니다. 더구나 Safari 브라우저에선 window.scroll 함수의 모든 기능이 지원되지 않아 부드러운 스크롤이 불가능했습니다. 이것 역시 어쩔 수 없이 이벤트 발생 Interval을 조정해 최대한 어색하지 않게 했습니다.

 또 자바스크립트의 디테일을 몰라서 생긴 이슈가 있었는데요, 클래스 문법을 사용하다 보니 this 키워드를 사용하는 일이 많았습니다. 어떤 dom에 eventListener를 등록하기 위해 클래스 안에 선언된 멤버 함수를 사용하게 되면 의도와는 다르게 동작합니다. 처음엔 이 사실을 몰라서 event handler 함수를 버튼마다 선언하는 괴상한 코드를 썼습니다. 여기는 제 블로그가 아니라 자세한 설명을 쓰진 못하지만 간단하게 말씀드리자면 this의 대상을 명시해주지 않아서 생기는 현상이었습니다. 이 문제는 리액트의 클래스 컴포넌트와 같이 bind 함수를 이용해야 하는 경우였습니다. 제 깃허브 저장소 로그에서 이 사실을 깨닫기 전에 한 삽질을 고스란히 보실 수 있습니다.

5. 앞으로의 계획

 저는 웹 개발에 비중을 두고 공부했지만 다른 여러 분야에도 관심이 많습니다. 지금은 휴학생이지만 취업 이후에도 공부를 멈추지 않을 생각입니다. 이전부터 제대로된 투두리스트를 만들어봐야겠다 생각은 하고 있었는데 시작이 쉽지 않았습니다. 이렇게 좋은 기회를 주신 니코님, 린님, 그리고 Nomad Coders 여러분께 다시한번 감사함을 전하고 싶습니다. 감사합니다 :)

p.s.

코드가 궁금하신 분들은 여기서 확인하실 수 있습니다.