https://minji9360.github.io/vanilla_Planet/

전체 화면입니다.

휑한 것 같다면 그것은 기분 탓이 맞습니다.

마우스 커서는 나오지 않지만 대략 이런식으로 동작합니다.

자기소개

작년 8월 쯤부터 노마드 코더 강의로 자바스크립트를 공부하기 시작한 비전공 취준생입니다. 원하는 만큼의 기능은 커녕 정말 최소한의 기능만 겨우 만들었지만..ㅋㅋㅋㅋ 커피 한 잔이라도 먹기 위해 달려왔어요. 하하. 원래 열심히 해서 금을 노려보려고 했는데 말이죠.. 다른 분들 게시글 보면 너무 잘하시더라구요 다들😂

그래도 저는 작년에 처음 시작할 때를 생각하면 아주 상상 못 할 정도로 성장했기 때문에 행복합니다😊

서비스 소개

원래 매일 손으로 to do list를 작성했는데 종이나 글씨, 글을 얼마나 쓸 지 공간까지 신경 쓸 부분이 많고 귀찮더라구요. 그래서 제가 쓰던 형식 그대로 웹사이트에 적용해서 만들어두면 잘 쓰지 않을까 싶어 만들어봤습니다.

사실 작년에 위 이유로 만들어봤던 사이트에서 이름이나 디자인을 가져와서 다시 만들었습니다. (기능은 구현 못한게 많아서 아쉽네요)

사용은 아주 간단 그 자체.

들어가서, 할 일 작성하면 끝!

잘못 썼다면 수정 👌

중요한 일은 잊지 않도록 체크 👌

할 일을 완료했다면 체크 👌

상세 내용을 보고 싶다면 클릭 👌

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

저는 한 번 만들었던 사이트니까 그래도 어렵지 않을거라고 생각했는데 아뇨?🙄 오산이었습니다😌 몽고DB에서 가져오는 형식으로 만들었었는데 localStorage에서 가져오는 것도, pug로 간단하게 만들었던 페이지도 html과 js로 일일이 띄워주고 삭제하는 것도 낯설어서 헤맸어요. 그래도 아예 새로웠던 것은 아니라 하루 이틀이면 해결 가능했습니다. 진짜 문제는... 💥수정💥

할 일을 완료할 때나 이미 쓴 내용을 수정하고 싶을 때 localStorage에 있는 데이터를 어떻게 가져와서 수정할 수 있는지 모르겠더라구요. 처음에 구글링할 때는 정말 막막하고 이거.. 안되는거 아냐..? 라고 생각했지만 다행히 해결했습니다. 역시 기능은 MDN 사이트에서 찾아야 해요!(.splice) 사실 MDN 사이트를 많이 사용해보지 않았어서..ㅎㅎ 구글에 하고 싶은 동작부터 검색하면서, 하나씩 나오는 키워드를 검색하며 따라갔더니 MDN에서 뭘 찾아야 할 지 찾을 수 있었어요.

사실 보통 저렇게 하면 해결이 되는데, MongoDB 등을 활용하여 사이트를 만들 때는 정말 해결이 안 될 때가 있어요. 그럴 때는 슬랙으로 달려가서 고수님들께 여쭤보면 답이 나옵니다..ㅎㅎ... 이번 이벤트에서는 스스로 해냈지만 매번 감사합니다 고수님들! 당신들의 노고 잊지 않습니다👍

앞으로의 계획

이벤트는 끝나더라도 추가하지 못한 기능들을 모두 추가해보려고 해요. 왜냐면 정말로 제가 쓸거거든요....ㅋㅋㅋㅋ 노드JS로 만든 사이트도 좋긴 한데, heroku 무료 호스팅을 했더니 시간이 너무 오래 걸리고 좀 귀찮은 부분이 있어서.. 딱 이번에 만든 사이트가 github으로 호스팅되니까 아무데서나 가볍게 사용하기 좋은 것 같아요.

추가할 기능은 아래와 같습니다.

• 피드백 기능
  (코멘트, 별점 달 수 있도록)
• 오늘의 한 마디 기능
• 진행 과정? % 보여주는 기능
• 어제 to do list 추가
  (오늘 list 왼편)
• 오늘 to do list 날짜가 변할 때 list가 어제로 넘어가도록
  (어제 list는 사라지도록)
• 날짜 상관 없는 to do list 추가
  (오늘 list 오른편. reset되지 않음)

이 프로젝트가 끝나고 나면 뭘 할지는 아직 모르겠어요. 일단은 아직 추가하고 싶은 기능이 많고, 만드는게 재밌기 때문에 당분간은 열심히 해볼 것 같습니다ㅎㅎ

이렇게 많은 분들과 이벤트에 참여하니 동기부여도 되고 좋은 것 같아요. 이벤트 열어주신 니꼬님 린님 감사합니다💖