3주차에서 배운 내용 정리
1. 함수 선언 및 호출
<script> 태그 안에 function 선언 및 기능 작성
예시)
<script>
function ...() {
}
</script>그리고 원하는 곳에 해당 함수를 호출하면 된다.
3주차에서는 호출하는 2가지 방법을 봤다.
- 입력을 통해 함수 호출
: 만약<script>태그에 openclose() 라는 함수가 정의되어 있고, 버튼을 누르면 함수가 작동되도록 하고 싶다.
1. 버튼 태그를 생성
2.를 넣어준다.
<button onclick="openclose()">저장하기</button>
=> 저장하기 버튼을 누르면 openclose()라는 함수가 호출된다.- 페이지 로드 시, 자동 호출
: 페이지가 로드되면 함수가 호출되고 API를 불러와서 특정 데이터를 표시하는 기능을 하고 싶다.
1. 페이지 로드 시, 호출되는 함수 선언 $(document).ready(function () { ... })
2. ...에 호출 시 작동할 로직에 대해 정의한다.
<script>
$(document).ready(function () {
current_weather();
})
</script>2. 각종 기능함수
.toggle(): 양식 요소의 이벤트 함수 중 하나로 Display 속성을 On/Off 할 수 있다..val(): 양식 요소의 value 값을 저장할 때 쓰인다..append(): 양식 요소에 속성을 추가할 때 쓰인다..empty(): 양식 요소의 속성을 비울때 쓰인다.
3. GET / POST
클라이언트가 서버에 어떤 요청을 하고 응답을 받을 때, 어떤 타입의 요청인지 구분하기 위해 쓰이는 함수가 있다.
- GET : 데이터를 조회(Read) 요청할 때 쓰인다.
- POST : 데이터를 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 쓰인다.
3주차에서는 GET에 대해서만 간략하게 배우고 넘어갔다.
유튜브에서 'coding'을 검색하는 것을 예로 들어보자.
https://www.youtube.com 은 유튜브의 기본 도메인이다.
여기서 만약 검색창에 'coding'을 입력하고 ENTER 혹은 검색버튼을 입력한다고 하면 'coding'으로 검색된 결과 페이지가 나타나게 된다.
이는 바로 검색창에서 엔터 혹은 버튼을 입력하면 입력한 검색어에 따라 결과페이지가 나오도록 함수를 호출했기 때문이다.
검색 결과 주소 : https://www.youtube.com/results?search_query=coding
여기서 .com 뒤를 유심히 보면 된다.
/ 는 바로 유튜브 내에서도 수많은 페이지(구역)가 있는데 거기서 특정 페이지에 가기 위해 구분하는 기호이다. -> 이것을 바로 라우팅이라고 한다.
즉, 유튜브 페이지의 result라고 하는 창구로 간 것이다.
? 는 전달할 데이터가 있을때 작성된다.
즉, search_query=coding 라는 검색어를 데이터로 전달한 것이다.
여기서 'coding' 부분을 'like'로 바꾸어보면 'like'에 관련된 영상들이 검색되는 것을 알 수 있다.
추가로, & 도 볼 수 있는데 이는 추가로 전달할 데이터가 있다는 뜻이다.
4. Fetch
Fetch는 서버에 네트워크 요청을 보내고 새로운 정보(데이터)를 받아오는 일을 할 수 있다.
3주차에서는 Fetch를 통해 날씨정보를 가져오는 실습을 하였다.
-
날씨정보는 OpenAPI를 url 값으로 받아와서 Fetch에 담았다.
fetch(url) -
이제 응답을 받아 가져온 데이터는 res라는 이름으로 JSON화 한다.
fetch(url).then(res => res.json()) -
그리고 JSON 형태로 바뀐 res를 data라는 이름으로 붙여 사용한다.
fetch(url).then(res => res.json()).then(data => {...})
참고로 fetch()의 매개변수로 url과 options 값을 받을 수 있는데 위에 1번처럼 url만 받아온 경우에는 GET 메서드로 수행되게 된다.
.then() 은 통신 요청을 받은 다음에 이루어지는 로직을 처리하기 위한 함수이다.
res=>res.json 요청을 받은 데이터를 res 라는 이름을 붙인다.
data => {...} json 형태로 받은 데이터를 data로 이름을 붙인다.
여기서 res, data는 다른 이름으로 변경해도 상관없다.
JSON은 Key 와 Value 값으로 나뉘어진 텍스트 기반 표준 데이터이며 다양한 프로그래밍 언어에서 데이터를 읽을 수 있도록 도와주는 표기법이다.
Fetch를 활용하여 현재 서울의 미세먼지 상태를 표시하는 함수를 만들었다.
<script>
function current_mise() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
let avg_mise = 0;
rows.forEach(element => {
if (element['IDEX_MVL'] != -99) {
let gu_mise = element['IDEX_MVL']
avg_mise += gu_mise;
}
});
avg_mise = avg_mise / rows.length;
let temp_html;
if (avg_mise > 31) {
temp_html = `<span class="good">좋음</span>`;
$('#weather').append(temp_html);
}
else {
temp_html = `<span class="bad">나쁨</span>`;
$('#weather').append(temp_html);
}
})
}
</script>