강의 2주차, jQuery, Ajax, API

1. 수업 내용 정리

-javascript : 웹을 움직이게 하는 코드(모든 웹서버는 HTML + CSS + javascript

unction hey()라는 규칙으로 hey라는 함수를 만들었고, alert(’안녕’)이라는 작업을 원할 때마다 반복적으로 수행

*console.log() : 매번 버튼 클릭해서 실행하는 것은 불편 하기에 alert > console.log로 바꿔 확인/마우스오른쪽클릭>검사

*변수 : let으로 변수 선언, 직관적, 알아볼 수 있게

ex) let a = 2, a = 'bob' //문자열은 작은 따옴표

*리스트 : 순서를 지켜서 가지고 있는 형태, 첫 번째 값은 [0]

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

*딕셔너리 : 키(key)-밸류(value) 값의 묶음

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27

*리스트 + 딕셔너리

let a = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

 

-jQuery : html 뼈대 선택해서 쉽게 조작 (=bootstrap, 남들이 만든 코드모음, 라이브러리)

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

jQuery로 보다 직관적으로 쓸 수 있EK

$('#element').hide();

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것!

(그렇게 때문에, 쓰기 전에 "임포트(미리 작성된 Javascript 코드를 가져오는 것)"를 해야한다)

*반복문 : forEach(() => {})

let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
	console.log(a)
})

*조건문 : if (조건) {} else {}

let age = 24

if (age > 20) {
	console.log('성인입니다')
} else {
	console.log('청소년입니다')
}

*반복문+조건문

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
	if (a > 20) {
		console.log('성인입니다')
	} else {
		console.log('청소년입니다')
	}
})

*append() : 

temp_html 이라는 변수를 만들 때는 백틱(``) ,

태그 안에 들어갈 값은 ${},

통째로 넣을 html요소를 $('#아이디').append(변수:html)

function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	$('#q1').empty()
	fruits.forEach((a)=>{
		let temp_html = `<p>${a}</p>`
		$('#q1').append(temp_html)
	})
}

let people = [
	{'name':'서영','age':24},
	{'name':'현아','age':30},
	{'name':'영환','age':12},
	{'name':'서연','age':15},
	{'name':'지용','age':18},
	{'name':'예지','age':36}
]
$('#q2').empty()
people.forEach((a)=>{
		let name = a['name']
		let age a['age']
		let temp_html = `<p>${a}</p>`
		$('#q2').append(temp_html)
	})

-Fetch : 짧은 코드로 요청을 보내고 받아옴

fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

ex)기본

fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
	.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
	.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
		let rows = data['RealtimeCityAir']['row']
		rows.forEach((a) => {
			// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
			// 구의 이름, 미세먼지 수치 값을 개발자 도구에서 찍어보기
			console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
		})
	})

fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => { 
		let rows = data['RealtimeCityAir']['row']
		rows.forEach((a) => {
			console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
		})
	})

ex)응용

    <style>
        div.question-box {
            margin: 10px 0 20px 0;
        }
        .bad {
            color: red;
        }
    </style>

    <script>
			function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
            $('#names-q1').empty()
						let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                let gu_name = a['MSRSTE_NM']
								let gu_mise = a['IDEX_MVL']
								let temp_html = ``
								if (gu_mise > 40) {
									temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
								} else {
									temp_html = `<li>${gu_name} : ${gu_mise}</li>`
								}
                $('#names-q1').append(temp_html)
            });
          })
      }
    </script>

2. 참고 자료, 해당 내용이 활용되는 부분

 

3. 오늘 새로 배운 내용

API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재

* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미

& : 전달할 데이터가 더 있다는 뜻 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달

q=아이폰 (검색어) / sourceid=chrome / (브라우저 정보) / ie=UTF-8 (인코딩 정보)

* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

4. 개발 중 발생한 이슈/고민 또는 이를 해결한 내용

처음에는 이해가 가는듯 안가는듯 한데 계속 듣다보니 이해보다는 통으로 외우는게 편한것 같다 ㅎ,ㅎ

조건문, 반복문, append(temp_html) 등 코드가 바로 생각날 정도로 외우는 것도 나쁘지 않을 것 같다..

혼자 새로 만들면 막막할듯 싶지만 해봐야겠지 ㅎ,,