toDos를 불러오는 작업을 다루자.
지금 새로고침 해도 local storage에 toDos는 남아있다.
loadedToDos를 통해 확인해보았는데
우리가 json으로 string형태로 바꾼것이 이번에는 문제가 되었다.
그래서 한 번 더 json을 사용할 것이다.
JSON이란?
->"JavaScript Object Notation"의 준말이다.
데이터를 전달할 때, 자바스크립트가 그걸 다룰 수 있도록 object로 바꿔주는 기능이다.
자바스크립트의 object를 string으로 변환해주기도 하고 string을 Object로 바꿔주기도 한다.
만약 todo가 있다면 문에서
const parsedToDos 를 JSON.parse로 어떤 변화를 주었을까.
console.log를 통해서
todo.js 44줄에서 나온 것-local storage에서 불러온 모습
todo.js 46줄에서 나온 것-parse로 object형태가 된 모습
이제 할 것은
화면에 paint(보여주기) 시작
local storage에서 불러온 것을 화면상에 써줄 것이다.
****지금 기억해야 할 것: toDos는 비어있다 ****
우리는 모든 toDos들, 즉 parsedToDos 안에 있는 것들에 대해
paintToDo function을 실행할 것이다.
우선, array에서 잘 쓰이는 foreach 메소드가 있다.
foreach는 기본적으로 함수를 실행하는데
array에 담겨있는 것들 각각에 한번 씩 함수를 실행시켜준다.
우리는 parsedToDos.forEach() <-안에 함수를 호출하는 것이 아니라 함수를 만들 것이다.
이 함수를 parsedToDos에 있는 것들 각각에 대해 실행해줄 것이다.
우선 이렇게 console.log로 확인을 해보았고
parsedToDos에 들어있는 각자의 text들이 console.log된 것을 볼 수 있다.
console.log(toDo.text)에서 toDo.text라는 의미는
toDo라는 객체의 키 값인 text를 써서 그 값인 것들을 부른 것이다.
이것은 그것을 알아보기 위해 console.log(toDo)만 써서 본 것.
객체 이면서 각각 따로 있기 때문에 forEach로 text의 값들을 불러온 것.
toDos에 text를 우리가 넣었으니까 text로 부를 수 있는 것이다.
혹은 함수를 밖에 써놓고 forEach()안에 함수 이름을 써줘도 된다.
forEach의 기능에 대해 잠시 살펴보았다.
이제 이 함수와 forEach메서드를 통해 각각에 대해 paintToDo를 해줄 것이다.
<잠시 정리 : toDos를 가져온 뒤, Parse로 가져온 것을 자바스크립트 object로 변환해줄 것이고, 각각에 대해서 paintToDo라는 function이 실행될 것이다. 구체적으로 toDo.text에 대해 실행될 것이다.>
array도 function이 있고
string도 function이 있고
object도 function이 있다.
많은 경우에 array가 있고 그 안에 있는 각각에 대해 뭔가를 해준다. 자바스크립트가 그것을 도와주게 한다.
->여기까지 했을 때 리스트가 자동적으로 화면에 띄워준다.
버튼 눌러서 지우기 기능 만들기
이 전 까지 한 것은 todo한개를 지우기 위한 것이었다.
우리는 그것을 위해 두가지를 해야한다.
- 'local storage'에서 'to do'하나를 지우고 저장해야 한다.
- HTML에서도 지워야 한다.
먼저 html part를 먼저 지우고 시작하자.
우리는 li를 지울 것이다.
우선 삭제 버튼 만들어지고 이모지까지 넣은 코드 밑에 addEventListener를 delbtn에 추가한다.
그리고 click이벤트가 생기면 실행될 함수도 만든다.
이렇게 까지만 하면 어떤 버튼이 지워질지, 지워져야 할지는 모른다.
**event에는 target이라는 것이 있다.
button이 계속 뜨게 하는! console.log로 확인 가능.
여기서 문제는 누가 부모인지 알 수가 없다는 것이다.
버튼의 부모 li들은 id를 가지고 있다. 이것이 우리가 찾고싶어 하는 것!!
왜? 우리는 지울 리스트가 있다면 그 한 줄 전체. li도 없애야 하기 때문이다.
그러기 위해서
console.dir(event.target) 을 이용하자
이것이 우리가 찾던 것이다.
이제
이렇게누가 delete되야 할지 알 수 있게 되었다.
이제 자식을 지워야 하니까(...?ㅎㅎ...)
<구글에 delete child element mdn을 검색해서 Node.removeChild()를 알아왔다.>
자. 이랬을 때 결과로는
버튼을 누르면 누른 것만 delete가 잘 되지만
새로고침을 하면 그 전에랑 똑같이 되어있다.
니콜라스가 좋아하는
toDos와 함께 다른 동작을 하는 functional programming이 있다.
이제 우리가 할 것은 todo를 clean 하게 하는 것이다.
맨 마지막에 filter라는 메서드를 사용했고
저 메서드에 넣을 함수를 만들었다.
filter 또한 forEach처럼 function을 각각의 item과 같이 실행된다.
이렇게 적고 함수를 toDos를 돌게 시켰으면 toDos 배열이 object가 되고 각각이 id를 가진 것들 중에 1인 것만 return 하겠지.
즉 true인 것만 return 한다.
array의 모든 아이템을 통해 함수를 실행하고 true인 아이템들만 가지고 새로운 array를 만든다.
+++
li 에 없는 id인 toDos를 체크하고 싶다?
위에는 함수를 따로 만들어 filter에 대해서 설명했지만 우리는 동작할때는 forEach때처럼
filter에 function을 넣을거야.이렇게.
근데 여기에서 동작을 안하네.
console.log(toDo.id, li.id)로 확인해보니
toDo.id는 number 이고 li.id는 string이다.
- 이제 우리가 할 것은 li.id를 number 으로 변환해서 array에 넣는 것이다.
이제 toDos를 교체
toDos를 cleanToDos로 바꾸기 위해
const 였던 toDos도 let으로 바꿔주자.
저장하기 위해 saveToDos 함수를 불러줬는데
이 함수를 보면 toDos를 저장하게 되어있으므로 우리는 이것 위에
toDos를 clean으로 바꿔주고 나서 저장하게 쓴 것이다.
이제 지워지는 건 잘된다. 다시 생성이 안될 뿐....
다시 생성하려면 다시 생성하는 function을 만들어야 한다...
일단 여기에서 제일 중요한건
filter, forEach 잘 알아둘것.
list에 있는 모든 item을 위한 함수를 실행시키는 것이다.
image background 무작위 넣기
unsplash라는 곳에서 배경 받아왔다.
이미지들 이름을 1,2,3,4,5로 바꿨고
우리는 이미지를 생성하고 이미지 요소를 받아온 뒤 배경으로 설정할 것이다.
그리고 이미지가 업로딩 되는 단계를 보기를 원하지 않고 모든것이 로딩되면 보여주길 원한다.
--
bg.js 를 만들었다.
그리고 body에 뒷배경을 넣어주기 위해 body를 불러왔다.
그리고 랜덤숫자를 만들어줄건데
자바스크립트에서는 Math.random()으로 1 전의 랜덤 숫자들을 가지고 올 수 있다.
그리고 내가 5 전까지의 랜덤숫자를 가지고 오고 싶다면
Math.random()*5 를 하면 소수점들을 데리고 있는 0~5까지의 숫자를 가질 수 있다.
소수점 밑에 친구들을 없애기 위해 Math.floor이라는 함수를 부를 것이다.
ex) Math.floor(3.9) 라고 쓰면 이 의미는 뒤에 다 없어지고 3만 남는다는 의미다.
+Math.ceil(3.9) 는 4로 나온다. 3.1을 해도 3,4를 해도 4로 나온다.
그래서 우리는
Math.floor(Math.random());
을 써서Math.floor(Math.random()*5);->내가 가진 이미지 갯수. 내가 원하는 이미지 양.
이렇게 만들었고 이제 paintImage를 만들어보자.
잘 나왔는데,
한번 에러가 났었던게 사진 파일 위치 선정을 잘 해야 할 듯 싶다.
사진을 js파일들이 있는 폴더에서 찾으려고 하더라.
+++++니콜라스가 약간 trick같은 걸 알려줬다.
table listener을 이미지화하기 위해 even listener을 연결
만약 api에서 이 일을 하고 있었다면
첫 번째 사진 함수와 두 번째 함수 사진의 색이 다른 두 줄을 필요로 할 것이다.
이미지를 추가해주면 된다.
이렇게 쓰고 css로 가서
라고 추가 해주니
아주 잘 되었다!
더 예쁘게 만들어주기 위해
이것과
맨 마지막에 애니메이션을 추가해줬다.
배경 넣기 끝!
location정보 가지고 와서 날씨 정보 뜨게 하기
유저의 위치 정보를 가지고 와서
저장하고
만약 저장한 값이 있다면 요청하고
저장한 값이 없다면 다른거 요청하고
weather.js를 만들었다.
여기에서 좌표를 요청하는 함수를 만들어보자
우리는 여기에서 navigator API를 사용할 것이다.
그 외에도
navigator, window, document 등등 다양하게 있다.
이번엔 navigator!
여기에서 geolocation은 객체(object)인데 geolocation.까지 찍으면 그 후에 사용할 수 있는 함수들이 쭉 나열된다.
그 중에 우리는 오늘 getCurrentPosition()을 쓸 것이다.
2개의 requirements가 있는데
첫 번째 requirement는 함수이다. 좌표를 가져오는데 성공했을 때를 처리하는 함수.
그래서 handleGeoSuccess 함수를 만들었다.
두번째를 좌표를 가져오지 못했을 때를 처리하는 함수.
이렇게!
--
이것이
이렇게 내 위치정보를 잘 가지고 왔다.
내 위치정보를 객체 형태로 나온다.
여기에서 자바스크립트의 팁을 알려주자면
객체 변수의 이름과 key이름을 같게 하려면 저렇게 적지 않고
{
latitude,
longtitude
}
라고만 적어도 된다.
이제 저장을 하자.
여기서는 localstorage를 쓰지 않는다.
니콜라스는 나눠서 하는걸 좋아한다고 한다.
이렇게 latitude와 longitude를 저장했다.
이제 위치는 넣었으니까 날씨를 입력하자.
openweathermap
우선 openweathermap페이지에 가서 회원가입을 하고 api의 key를 받자
그리고 코드 창 두번째 줄에
const API_KEY = "api키 복사한 것" 를 넣어준다.
이것은 우리가 API를 활용하기 위함이다.
API ( Application Programming Interface )
는 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단이다. 오직.데이터만.
이런 API를 제공하는 웹사이트를 이용하면 해당 웹사이트를 통해 데이터를 얻을 수 있는데
우리가 지금 가져올 것은 데이터뿐이다. 디자인이나 다른건 필요 없다.
이런api는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된 것이다.
이렇게 열어두고 쓰고싶은 사람 쓸 수 있게 해준 페이지다.
current weather data에 api doc을 눌러서
거기에 나오는 url예제로 request를 보내면 데이터를 얻을 수 있다.
밑에서 두 번째 링크를 누른다.
우리가 local storage에 저장한 데이터랑 똑같이 생겼다.
데이터가 string으로 되어있다.
string으로 된 자바스크립트 object이다.
우리는 이 데이터로 날씨 정보도 찾아볼 수도 있고 object로 된 날씨 데이터를 얻을 수도 있다는 얘기다.
이것이 지리좌표를 이용하는 api.
우리가 찾던 것이다.
우리는 저기에 적혀있는 url을 호출해주면 된다.
*자바스크립트는 웹사이트로 request를 보내고 응답을 통해서 데이터를 얻을 수 있다.
가져온 데이터를 refresh가 없어도 나의 웹사이트에 적용시킬 수 있는게 자바스크립트의 장점 중에 장점!**
이것이 웹사이트를 새로고침하지 않아도 실시간으로 메일이 오는것을 확인할 수 있는 이유이기도 하다. 자바스크립트가 보이지 않는 곳에서 계속 데이터를 가져오고 있기 때문이다.
데이터를 얻으려면 fetch를 쓰면 된다.
fetch()안에 가져올 데이터가 들어가면된다.
앞에 https://를 넣어주고 따옴표가 아닌 백틱을 써야 한다.
이렇게 $도 넣어주고 appid도 넣어줘야 한다.
app id에 api key를 넣어주면 api를 제공하는 쪽에서 요청자의 apikey를 통해 요청을 하는지 아닌지 알 수 있다.
우리가 지금 한 것은 handleGeoSuccess가 실행되어야 실행되는 것이다.
지금은 아무것도 나오지 않는다.
handleGeoSuccess는 loadedCords가 null이 아닐 경우(local storage 좌표값이 있을 때 실행되는데 우리는 else부분에 아무것도 넣지 않았으니까 안된다.
- 만약 local storage에 아무것도 없으면 getWeather함수가 실행된다. local storage에 아무것도 없으면 askForCoords함수가 실행되고 이 함수 안에서 정상적으로 위치정보를 가져오게 되면 handleGeoSuccess가 실행되는데 이 안에서 API가 최종적으로 호출되기 때문이다. 근데 이미 좌표값을 가지고 있는 경우에 대해서는 아직 아무것도 해놓은게 없다.
하면 console창에 내 latitude와 longitude가 나타난다.
이렇게 getWeather함수를 실행할 수 있게되었다.
개발자 도구 network패널에 request등록 되었다.
여기에 필요한 데이터가 있다.
잘 되지만 잠깐 api문서를 함께 보고 units format이라는 걸 찾아보자.
여기에 나오는건 kelvin단위 아니면 화씨(fahrenheit)단위 같다.
여기에 units format이 있다/
우리는 metric(미터법)을 사용할 것이다.
-> 섭씨단위celsius를 쓰려면 units=metric을 사용해라
이렇게 붙이니
우리가 원하는대로 나왔다.
\
우리는 then에 함수를 하나 넣고// 데이터가 우리한테 넘어왔을 때 이 함수를 실행시킬 것이다.
데이터가 들어오는데 시간이 좀 걸리는 경우도 있기때문.
good
만약 이 부분이 이해가 잘 안되면
니콜라스의 자바스크립트 코스를 들어야 한다.
그 코스는 사람들을 js 닌자로 만들어 준다 한다 ㅋㅋㅋㅋ
기능. 끝-!
