[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 8회차 과제 - Vanilla JS를 이용한 서비스 만들기(2)

출처 : [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

🎯 과제 요구사항

1. vanilla js로 할 일 목록 만들기
2. vanilla js로 내 위치의 날씨 만들기

 

 

 

🔥 결과

https://github.com/udemy-team18/practice/tree/yueun/0622

GitHub - udemy-team18/practice: 유데미 x 스나이퍼 팩토리 10주 완성 프로젝트 부트캠프 18팀 실습 저장소

 

 

🔎 느낀 점

지난 과제에 이어서 같은 페이지에 todo list 기능과 내 위치 날씨 표시 기능을 추가했다.

todo list에는 지난 과제에서도 사용했던 local storage를 사용했다.

// Todo List 불러오기

  if (localStorage.getItem("todos")) {

    todoList.innerHTML = localStorage.getItem("todos");

  }

function saveTodoList() {

    localStorage.setItem("todos", todoList.innerHTML);

  }

todo list를 추가하고 삭제할 때마다 saveTodoList를 실행해서 저장해주는 것을 잊어서 한참 헤맸다ㅎ

 

날씨 api를 받아와서 현재 위치의 날씨도 나타냈다.

api는 받았으나 몇 시간 후에나 사용가능해서 강사님의 api를 사용했다.

코드 자체는 어렵지 않으나 navigator.geolocation.getCurrentPosition 같이 처음 사용해보는게 있어서 다소 생소했다.

 

 

 

📖 배운 점

1. backdrop-filter

button을 배경만 흐리게 하고 글씨는 잘 보이게 하고 싶었는데 처음에 opacity를 적용하니 글씨까지 흐리게 됐었다.

검색을 통해 backdrop-filter 를 알게 됐고 blur 를 부여하면 글씨는 그대로이고 배경만 블러처리로 흐리게 표현됨을 배웠다.

background-color: rgba(0, 0, 0, 0.3);

backdrop-filter: blur(10px);

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#examples

backdrop-filter - CSS: Cascading Style Sheets | MDN

 

2. navigator.geolocation.getCurrentPosition

브라우저에서 제공하는 JS의 Geolocation API 메서드이다.
success와 error 부분은 콜백함수로 position을 매개변수로 받을수있다.

navigator.geolocation.getCurrentPosition(success, error, [options])

이를 실행하면 내 위치를 확인하는 권한 요청이 뜨는데 이때 허용을 눌러야 한다.

 

 

 

 

 

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