https://2dowon.github.io/Project-ToDoList/ 

결과물 URL + 캡쳐 이미지 2~3장

자기소개

안녕하세요. 작년 여름에 대학 졸업 후 비전공자이지만, 프로그래밍에 관심이 생겨 노마드코더에서 처음으로 코코아톡 클론 코딩 인강을 듣고 '코딩 재밌다'라는 생각이 들어서 현재는 국비학원에서 공부 중인 27살입니다. HTML, CSS 수업을 듣고 바로 JavaScript로 넘어가서 수업을 들었지만 사실 프로그래밍 베이스가 전혀 없던 저에게 JavaScript는 생각보다 너무 어려웠습니다. 그래서 JavaScript의 기본(?) 프로젝트라 할 수 있는 투두리스트는 항상 만들어야지 생각만 하고 만들지 못했던 아이였습니다. 그렇게 결국 JavaScript 대신 파이썬도 공부해보고, 장고도 공부해보고 이것저것 공부해보다가 다시 JavaScript가 공부하고 싶어졌습니다. 그러던 중에 이렇게 좋은 이벤트가 있어서 이참에 한번 만들어봐야 겠다는 생각으로 만들게 되었습니다.

서비스 소개

혹시 다들 어플리케이션 중에 blink 어플 아시나요? to do list 어플 중 하나인데 저는 애용하는 어플입니다. Things3도 써보고 to do list 어플은 많이 써봤는데 'simple is the best'라고 blink 어플에 가장 손이 많이 갔습니다. 그래서 제가 좋아하는 어플인 blink와 비슷하게 생긴 to do list를 만들면 어떨까 라는 생각에 최대한 비슷하게 작업하려고 노력했는데, 아직 많이 부족하네요 ㅎㅎ

• 시계 대신 오늘의 날짜 기능
  : 보통 to do list는 매일 적는 느낌이 강하기도 하고, 개인적으로 할 일 적을 때는 시간보다는 오늘 날짜를 더 많이 체크하는 편이라서 시계 대신 날짜를 추가했습니다.
• 추가한 to do를 클릭하면 완료 처리는 하면서 바로 삭제되지 않도록 하기
  : 매일 매일 하는 일이 비슷하기 때문에 완료된 일이라도 다시 클릭해서 쉽게 to do로 바꿀 수 있도록 했습니다.
• to do에 마우스를 올리면 삭제 버튼이 보이도록 하기
  : 그래도 잘못 입력하거나 완전히 필요없는 to do는 삭제해야 할 필요성이 있으므로 to do에 마우스를 올리면 그 때 삭제버튼이 나타나도록 작업했습니다. 

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

처음에는 to do를 추가하면 삭제 버튼이 바로 옆에 생기는 디자인이였습니다. 근데 보면 볼수록 안 예쁘더라구요. 그래서 to do에 마우스가 올라가면 그때만 삭제 버튼이 생기도록 만들고 싶었습니다. 간단한 기능이지만 JavaScript에 익숙하지 않아서 끙끙대면서 작업했습니다.

mouseenter하면 삭제 버튼이 생기도록 작업할까 하다가 처음부터 삭제 버튼을 만들지만 보여주지는 않고 mouseenter할 때만 visibility를 visible로 바꿔주고, mouseleave할 때는 다시 hidden으로 바꿈으로써 처리했습니다.

앞으로 계획
사실 JavaScript 챌린지에 도전했다가 아직 성공하지 못했는데, 다시 돌아오는 챌린지에는 꼭 성공해보고 싶습니다 ㅎㅎ 이번에 파이썬 챌린지에도 도전해서 거의 성공(졸업작품은 제출했지만, 아직 결과를 몰라서ㅜㅜ)했는데, 기분이 좋더라구요. 파이썬은 꽤나 익숙해졌다고 생각했는데도 엄청 스릴있게 겨우 통과했습니다. 그렇지만 그만큼 얻는 것이 많아서 진짜 노마드코드 챌린지는 정말 대박이라는 생각 밖에 안들더라구요. 그래서 JavaScript 챌린지도 꼭 성공해보고 싶습니다!!

지금 듣고 있는 CSS Layout Master 강의도 얼른 완강하고 챌린지 참여하고 싶네요 ㅎㅎ 그리고 리액트도 배우고 싶고, 타입스크립트도 배워보고 싶습니다. 풀스택 개발자가 되는 날까지 노마드코드 강의로 쭉 달려보겠습니다!

니꼬님, 린님에게 항상 감사합니다!