결과물 이미지 및 URL 공유

https://bellayujin.github.io/toDoList/

1. 자기소개

안녕하세요. 비전공자 프론트앤드 개발자를 꿈꾸는 직장인입니다. :)

현재 퍼블리셔로 일을 하고 있지만 항상 library나 jquery를 활용해서 작업을 해오다보니 프론트앤드로 전향을 하고 싶어도 JavaSacript를 활용한 프로젝트 개발 경험이 없어 어려움을 겪고 있었습니다. 그래서 다시 한번 도약해보기 위해서 노마드코더를 통해 자바스크립트를 다시 공부하고 있습니다.

2. 서비스 소개

간단하게 제가 작업한 투두 리스트에 대해 설명해드리겠습니다. 노마드코더 크롬앱 만들기 수업때 작업한 작업물을 기반으로 기능을 추가해서 만들어보았습니다.

우선 UI 부분은 많은 사람들이 익숙한 위젯 형식으로 작업했니다. 중앙에 시계나 리스트가 있으면 항상 체크할 때 마다 브라우저를 켜서 확인해야 하는 불편함이 있을 것 같아 양쪽 끝에 위치하게 두었고 왼쪽 상단 위젯에 이름을 기입할 수 있도록 작업했습니다.

우측에는 시계와 사용자 위치에 따른 날씨가 노출이 되고 랜덤 이미지 노출 기능을 활용해 사진을 추천해주는 위젯처럼 표현했습니다.

할 일을 생각하다보면 달력을 봐야할 때가 많아서 달력도 추가했고 하루 종일 전체 일정을 확인할 수 있도록 삭제 기능 뿐만 아닌 완료 버튼을 만들어서 완료된 일과 진행중인 일을 구분할 수 있게 했습니다.

또 하루 일과 중 의식적으로 해야하는 물마시기!.!

물을 마셔야한다고 생각하지만 잊어버리게 되서 안마시게 되는 경우가 많은데 하루 권장량인 8잔을 1잔 마실때 마다 채워서 하루에 얼마나 마셨는지 확인 할 수 있는 위젯 기능을 추가해보았습니다.

그리고 추가적인 기능으로는 배경이미지에 스탠드가 있어서 스탠드 근처에 가면 불이 밝혀지는 느낌을 연출해 보았습니다. :)

3. 개발 과정 (어려웠던 점 및 해결 방법)

사실 대부분의 수업이 그렇듯 강의를 보면서 따라할 때는 크게 어려움을 느끼지 못하고 따라갔었는데

막상 제가 원하는 기능을 추가하려고 하다 보니 막히는 부분들이 많았습니다.

방법은 알겠는데 코드로 어떻게 써내려가야할지 고민인 부분들이 많아서 구글링과 stackoverflow를 찾아가며 작업해보았습니다.

예를 들면 물마시기 위젯의 경우 물을 마시고 물방울을 클릭하면 물방울 이미지가 컬러로 변하고 상단의 진행바가 채워지면서 이모티콘이 변화되게 하고 싶었는데 진행바는 채웠는데 이미지를 어떻게 변경해야 할 지 하루 종일 고민했습니다. 사실 어려운 문제는 아니었는데 기본이 부족하다보니 막혔을 때 풀어나갈 방법이 생각이 안나서 힘들었던 것 같습니다.

결국은 구글링을 통해서 방법을 찾게 되었고 지금은 잘 적용되어 진행도에 따라 다른 표정이 나타나고 있습니다.

4. 앞으로의 계획

사실... 작업하면서 찾아낸 버그들이 꽤 됩니다... ㅎ

우선 당장의 계획은 있는 버그들을 해결하고 추후에 버전2를 작업해나가는 것입니다.

만들다보니 정말 크롬앱을 출시해서 일을 할 때도 쓰면 좋겠다는 생각이 들어서

기능적인 부분들을 좀 더 보완해서 만들어 볼 예정입니다.

추가하고 싶은 기능은

위젯이다보니 원하는 위치에 위젯을 옮겨 놓을 수 있게 작업하는 것

달력에 원하는 이벤트 날짜를 표시하는 것

구글이나 네이버 검색창을 만들어서 따로 다른 포털로 이동하지 않고도 검색을 할 수 있게 만드는 것입니다.

시간이 부족하다고 느껴져서 우선 1차적으로 진행된 작업물을 제출하게 되어 다소 아쉬운 느낌이 있지만 앞으로 더 수정해나가면서 완성시켜 볼 계획입니다!.!

이번 기회를 통해서 바닐라 자바스크립트를 끝내고 ES6를 완벽하게 이해해 보고 싶습니다!

긴 글 읽어주셔서 감사합니다. :)