TIL/유데미 x 스나이퍼팩토리

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - momentum 만들기2

"유니" 2023. 6. 22. 15:52

 

🧚🏻‍♀️ vanilla JS로 momentum 만들기를 완성했다. 

새로 추가한 기능은 아래 세가지이다. 

 

  • 날씨 API 가져와서 추가하기
  • 할 일 목록 추가하기
  • 할 일 목록 지우기 

 

🧚🏻‍♀️  날씨 API 추가하기 

open API로 날씨 정보를 가져와서 추가해 주었다. API는 공식문서만 잘 따라하면 가지고 올 수 있는데, 공식문서 따라하는게 어렵다(나만 그런걸까..?) 

 

VS code의 live server로 작동 시켰는데, 내 위치 정보를 가지고 오지 못해서 구글링을 해보았다. 

서버가 실행되지 않을 경우에 VScode Live Server settings에서 Use Local Ip as host를 체크로 변경하면 된다! 설정을 변경하니 날씨도 화면에 제대로 구현되었다. 😝

 

🧚🏻‍♀️  할 일 목록 추가하기 

이건 수업 시간에 제법 연습해서 그런지 가볍게 코드를 짰다. 

할 일 목록을 추가할 때 이전 것을 지우지 않고 아래로 쭉쭉 목록들을 추가하고 싶으면 'li' element로 리스트를 만들면 된다. (나만 이제 안걸까..? ^^) 

 

🧚🏻‍♀️ 할 일 목록 지우기

할 일을 추가할 때 delete button도 함께 추가 되도록 코드를 구현했다. 목록 지우는 코드는 매우간단하다. 그냥 remove() 메서드를 써주면 된답니다.. 

 

 

 

momentum 완성본!

 

처음엔 JS만으로 코드짜는게 굉장히 어려웠는데, 조금 연습하니깐 또 재미 있었다. 

실습 때 막히는 것들을 팀원분들이 열심히 도와주셔서 그때그때 해결할 수 있는 부분도 너무 좋았답니다. 구글링과는 다른 매력.. (?) 

 

 

 

 

https://github.com/udemy-team13/training/tree/main/Yuni/my-todolist

 

GitHub - udemy-team13/training: Practice & Homework

Practice & Homework. Contribute to udemy-team13/training development by creating an account on GitHub.

github.com

깃허브 코드도 공유합니다 🍐

 

 

 

 

 

 

 

 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.