[웹개발 종합] 2주차 스터디(WIL)

2주차에는

JavaScript가 주요 주제였고

기본적으로 Dictionary를 가지고 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인하는 과정을 배웠다.

 

OpenAPI 데이터는 처음 데이터를 받아보면 가시성이 떨어지는 데이터를 받게되는데

JSONVue를 통해 해당 데이터가 Dictionary 구조로 되어있음을 확인할 수 있다.

이것을 JSON 형식이라 할 수 있다.

 

이후 Fetch라는 함수를 계속 사용한다.

Fetch는? URL을 넣으면 그 데이터를 가져오는 친구다.

가져온 데이터를 웹페이지에 출력하는 실습이 여러번 진행되었다.

 

Fetch의 기본 골격은 자주 사용 될 것이다.

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
	console.log(data)
})

콘솔창에서 원하는 데이터를 받아 올 수 있다면 대부분 문제는 해결 된 것

받은 데이터의 스코프를 좀더 줄여서 내가 원하는 key를 특정하기만 한다면

값이나 값이 복수라면 반복문을 통해 값을 얻어 append 등으로 html 페이지로 출력 할 수 있다.

 

추가적으로 조건문을 통해 값들의 조건에 따라 원하는 스타일을 입혀 이용자가 구분 할 수 있도록 서비스를 제공할 수 있다.

 

요약해보면

반복적으로 실습한 내용이 반복된 부분은

 

• 업데이트 버튼을 누르면 onclick 등 이벤트(또는 웹페이지에 접근하면 document.ready)
• 기존 테이블 내용이 사라지고 (empty())
• 따릉이 OpenAPI 데이터를 불러와서 fetch
• 테이블 형태로 내가 원하는 항목의 데이터를 기록한다. append, text 등 ...

 

JSON 넣는 공식과 같은 내용? 항상 반복되는 사이클 :

데이터를 가져온다 => 데이터중에서 list화시킬 부분을 추린다 => 반복문을 돌면서 => 필요한 정보만 꺼내고 => 조건문을 붙여서 구분한다

 

*해당 주차에 겪은 어려움이나 해결된 내용

Dictionary는 왜배우는지?? 에대한 어려움은 강의를 들으며 해결되었고(→ JSON의 형식이다)

=> 화살표 함수(Arrow function)에 대한 추가 스터디 필요

백틱을 사용하는 이유, 사용법 익히기가 필요

append하면서 하드코딩으로 <span class='red'> 처럼 억지로 텍스트에 속성을 부여하는 실수가 있었는데

만족스럽지 못해서 다른 방안을 검색을 통해서 확인한것 속성을 바꾸려면 .attr(‘속성’,’값’)을 활용하게 되었고 코드를 줄일 수 있었다.

 

---

 

해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Sparta99training

GitHub - yzpocket/Sparta99training