바닐라 자바스크립트 - momonton 만들기 with 노마드 코더

바닐라 자바스크립트를 처음 접하는 저는 유튜브에서 노마드 코더의 "초보자를 위한 바닐라 자바스크립트"를 따라하면서 공부를 시작했습니다. momonton이라는 프로그램을 만들면서 자바스크립트로 HTML객체 생성 및 삭제, 입력한 값 저장하기  ,날씨 API가져오기 등에 대해서 공부했습니다. 

JS를 배우기 위한 과정이라서 CSS과정은 강의에 없어서 간단하게 위치와 색깔만 변경했습니다.

 

📌GitHub

github.com/nayoon030303/vanila.js_make_momonton.git

nayoon030303/vanila.js_make_momonton

 

1. 시간을 얻어와 시계만들기
2. 이름 입력받기
3. 입력받은 데이터 저장하기
4. 리스트 만들기
5. 리스트 삭제하기 
6. 배경화면 랜덤으로 가져오기
7. 날씨API 가져오기 

위 순서대로 momonton을 제작하였습니다. 

 

 

오류 발견

강의를 보다보면 리스트를 생성하고 삭제하는 부분에서 오류를 발견할 수 있습니다. 만약 리스트를 생성한 후 마지막 리스트가 아닌 다른 리스트를 삭제하고 새로운 리스트를 추가하고 다시 삭제한다면 id가 겹쳐 중복된 id의 리스트가 모두 삭제 됩니다. 이 문제를 해결하고자 리스트를 삭제한 후 map함수를 통해 toDo의 id를 다시 변경해 주었습니다. 

 

 

 

최종 완성 결과 입니다. 

 

 

💡마무리

JS문법은 배웠지만 HTML과 함께 사용해보는 것은 거의 처음이었습니다. 이번 공부를 통해 JS로 HTML을 만들고 삭제하는 방법 부터 시간을 얻어오는 방법, localStorage에 저장하는 방법, JSON을 이용하여 객체를 문자로 문자를 객체로 변경하는 방법등 다양한 지식을 습득했습니다. 습득한 지식을 내 것으로 만들기 위해 다음 공부를 하러가야겠습니다. 모두 모두 JS마스터가 될 때까지!