2주차에는
JavaScript가 주요 주제였고
기본적으로 Dictionary를 가지고 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인하는 과정을 배웠다.
OpenAPI 데이터는 처음 데이터를 받아보면 가시성이 떨어지는 데이터를 받게되는데
JSONVue를 통해 해당 데이터가 Dictionary 구조로 되어있음을 확인할 수 있다.
이것을 JSON 형식이라 할 수 있다.
이후 Fetch라는 함수를 계속 사용한다.
Fetch는? URL을 넣으면 HTTP 통신 요청을 하는 친구다.
Fetch의 기본 골격은 자주 사용 될 것이다.
fetch로 서버에 요청하면 반환값이 then절에 의해 json 형변환되며
반환된 데이터는 헤더에 data로 담겨져서 도착하여 console에 찍히도록 되어있다.
가져온 데이터를 웹페이지에 출력하는 실습이 여러번 진행되었다.
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
JavaScript
복사
콘솔창에서 원하는 데이터를 받아 올 수 있다면 대부분 문제는 해결 된 것
받은 데이터의 스코프를 좀더 줄여서 내가 원하는 key를 특정하기만 한다면
값이나 값이 복수라면 반복문을 통해 값을 얻어 append 등으로 html 페이지로 출력 할 수 있다.
추가적으로 조건문을 통해 값들의 조건에 따라 원하는 스타일을 입혀 이용자가 구분 할 수 있도록 서비스를 제공할 수 있다.
요약해보면
반복적으로 실습한 내용이 반복된 부분은
•
업데이트 버튼을 누르면 onclick 등 이벤트(또는 웹페이지에 접근하면 document.ready)
•
기존 테이블 내용이 사라지고 (empty())
•
따릉이 OpenAPI 데이터를 불러와서 fetch
•
테이블 형태로 내가 원하는 항목의 데이터를 기록한다. append, text 등 ...
Fetch를 통한 API에서 데이터 가져오기, 항상 반복되는 사이클 :
url에 요청하면 Promise 형 반환된 데이터를 가져온다 이를 json형변환해주며 → 데이터중에서 list화시킬 부분을 추린다 => 반복문을 돌면서 => 필요한 정보만 꺼내고 => 조건문을 붙여서 구분한다
•
해당 주차에 겪은 어려움이나 해결된 내용
Dictionary는 왜배우는지?? 에대한 어려움은 강의를 들으며 해결되었고
→
=> 화살표 함수(Arrow function)에 대한 추가 스터디 필요
백틱을 사용하는 이유, 사용법 익히기가 필요
append하면서 하드코딩으로 <span class='red'> 처럼 억지로 텍스트에 속성을 부여하는 실수가 있었는데
만족스럽지 못해서 다른 방안을 검색을 통해서 확인한것 속성을 바꾸려면 .attr(‘속성’,’값’)을 활용하게 되었고 코드를 줄일 수 있었다.
Fetch와 관련된 추가적인 내용이 정리 잘 된 내용을 메모해둬야겠다.
