[노마드코더] 바닐라 JS로 크롬 앱 만들기 + 챌린지

들어가며

 카카오톡 클론 코딩을 마친 뒤, 바로 바닐라 JS 강의로 넘어 왔다. 아직 갈 길이 멀기에,,
Vanilla JS 2주 챌린지는 12월 2일에 열리지만 미리 예습한다는 차원에서 일찍 시작했다. Javascript에 대한 지식이 전무하기 때문에 가능하면 (예습 + 복습)을 거친 뒤 추가 강의까지 듣고 챌린지에 참여하자는 생각이었다. 
 그렇게 시작한 'Vanilla JS 크롬 앱 만들기' 강의! 이번 강의 또한 상당히 친절하게 이론-연습-실전 순으로 초보자들도 쉽게 따라 갈 수 있게끔 구성되어 있어 이해하는데 큰 문제는 없었다. 단지 JS를 처음 접해봐서 혼란스러웠을뿐,,😨

4일간의 속성 도전기

 부지런히 강의를 들었다. 강의 수가 많지 않은 이유도 있지만, 언어를 새로 배우는 데에서 오는 흥미도 있었을뿐더러 알지못했던 JS의 기능들을 구현하는게 마냥 재밌었다. 많은 언어가 있지만 그 컨셉은 크게 벗어나지 않고 표현 방식만 살짝씩 바뀌는 것이라는 니꼬의 말마따나 코딩 경험이 있는 나로서는 어렵지 않게 따라갈 수 있었다🐱‍👤
 원래는 배운 것들을 블로그에 정성스레 정리하려고 했었으나,, 정리에는 1가견이 1도 없는 나는 Github Commit 메세지에 중요하다고 생각되는, 니꼬가 강조했던 것들을 살짝씩 정리하여 commit 했다. 지금 수준에서는 깔끔하게 정리를 하는 것보다 복습을 꼼꼼하게 하는 것이 중요하다고 판단함,,! 추후에 복습을 하며 정리가 필요한 부분이 생기면 그때 하도록 하자! 무튼 이번 강의도 재밌게 잘 들었음 ㅎㅎ 이건 강의를 듣는 것보다 복!습!이 훨씬 더 중요하므로 부지런히 복습해서 손과 머리에 익도록 만들자! 

결과물 : toDoList 크롬 앱 

 대충 머 이런 느낌이랄까,, 딱 봐도 아직 매우 허접하다. 복습 겸 해서 섬세한 CSS 작업과 다양한 기능 추가 작업을 진행해야겠다. 손 볼 곳이 너무 많아서 어디부터 시작해야될 지 모르겠으나,,ㅜ 부딪혀보는거지! 다른 웹페이지도 참고하여 열심히 업그레이드 시켜봅시다!😵

추가적인 CSS 작업 사항

• toDoList 부분의 앞쪽을 체크박스 형식으로
  -> (19.11.20) 완료
• toDoList의 delBtn을 좀 더 예쁘게 
  -> (19.11.20) 완료
• 기온과 현재위치를 좀 더 직관적으로 알아볼 수 있게 Icon 추가하기
  -> (19.11.21) 완료
• 촌스러운 폰트 제발 바꾸기
  -> (19.11.20) 완료
• 각 요소의 역할에 맞게 크기 조정
  -> (19.11.20) 완료
• 이름 입력하는 input-box 디자인 개선 및 애니메이션 추가
  -> (19.11.20) 완료
• 글씨가 눈에 잘 띄도록 하는 배경이미지 search & select
  -> (19.11.20) 완료
• 디자인 보기좋게 다듬기
  -> (19.11.22) 완료
  -> 내 작업공간에서의 결과물과 github page에서 보이는게 뭔가 계속 달라서 왜이런가 싶었는데
   그냥 웹이 확대되어있어서 그랬던 것이다 ㅎ (코쓱🙄;;) 100% 맞추고 다시 크기 조정함 ㅎ;
• 깃헙 링크 추가
  -> (19.11.22) 완료

기능 추가 사항

• 날짜와 요일 추가
  -> (19.11.21) 완료
• 이름 변경 기능 추가
  -> (19.11.20) 완료
• All reset 버튼 추가 (이름 및 toDoList를 reset)
  -> (19.11.20) 할 필요 없을 듯,, 필요성 x
• 미세먼지 농도 추가하기
  -> (19.11.21) 지금 내 수준에서는 미세먼지 API를 다룰 수 없다고 판단,,ㅜ
  한 두시간동안 구글링했는데 JS 시작한지 일주일 된 자린이가 하기에는 한계가 있다,,😥😥
• 현재 위치 이름을 한글로 출력되도록
  -> (19.11.21) 위도, 경도 값을 input으로 주면 한글 주소가 출력되는 API를 검색해보다가 
  여러가지 찔러봤는데 다루기가 너무 힘들다 ㅜㅜ Kakao maps API가 그나마 괜찮았는데
  서버에 올려놓고 작업을 해야했다,,! 이럴 경우에는 git을 어떻게 사용해야할 지 몰라서 멘붕,,😫
  아직 모르는게 너무나 많아서 스스로 답답해하는중,, 그래도 조바심 갖지 말고 천천히 도전해보자!
• 글자 색 변경이 가능하도록 만들기

<19.11.20> - 추가 작업 결과

<19.11.21> - 추가 작업 결과

<19.11.22> - 추가 작업 결과