스파르타코딩클럽 웹개발 종합반 2주차 - Javascript, JQuery, Fetch

html은 뼈대, css는 꾸미기, javascript는 움직이기

 

javascript: 웹을 움직이게 하는 코드

JQuery: html 뼈대를 선택해서 쉽게 조작

Fetch: 짧은 코드로 요청을 보내고 받음

 

funtion test() {
	// 콘솔 출력
	console.log('test')
    
	// 변수 선언, 대입
	let a = 1
    
	// 리스트, a[0]
	let a_list = ['사과','수박']
    
	// 딕셔너리: key - value. a_dict['name']
	let a_dict = {'name':'철수','age':20}
    
	// id값 q1, a로 변환
	$('#q1').text(a)
    
	// 반복문
	a_list.forEach((a) => {
	console.log(a)
	})
    
	// 조건문
	if (조건) {
	실행문
	} else {
	실행문
	}
        
	// html 태그는 백틱 안에, append 추가, ${a} 변수
	let temp_html = `<p>${a}</p>`
	$('#q1').append(temp_html)
	// 비우기
	$('#q1').empty()
  
}

 

json: key: value 이루어짐

GET: 데이터 조회를 요청할 때

POST: 데이터 생성, 변경, 삭제 요청 할 때

// URL GET 요청
fetch("URL").then(res => res.json()).then(data => {
		console.log(data)
})

 

 

2주차 완성 웹페이지 github pages 배포 - 서울 날씨 API 적용해서 기온 자동 로딩

 

스파르타코딩클럽에서 제공해 주는 api는 http라 github pages 배포하면 Mixed Content 오류 발생

openweathermap에서 제공해주는 https api 로변경 후 배포

켈빈(절대온도)으로 값을 받아오기 때문에 때문에 섭씨로 바꿔주기 위해 -273.15 한다.

*API: https://api.openweathermap.org/data/2.5/weather?lat={위도}&lon={경도}&appid={개인 API Key}

 

https://mabyoungg.github.io/mypage/

스파르타코딩클럽 | 부트스트랩 연습하기