스파르타 웹 수업 2주차 기록이다.
2주차에는 뼈대를 잡고 꾸며준 코드를 움직이게 하고 서버와 통신을 하는 기초 방법에 대해 배웠다.
크게는 JavaScript와 JQuery, Fetch에 대해 배웠는데 JavaScript는 기초문법 정도만 배웠다.
-JavaScript
- console.log
<script>
funtion hey() {
console.log('안녕하세요') //웹에서 우클릭 검사의 개발자 화면 콘솔에 출력된다.
}
</script>
<body>
<button onclick="hey()">영화 기록하기</button> //버튼을 누를 때 함수 실행
</body>-JQuery
jquery는 javaScript로 불편하게 써야했던 코드를 누군가 만들어둔 라이브러리를 이용해서 더 편하게 쓰기위해 사용한다.
그래서 라이브러리를 항상 임포트해줘야 하는데 다음 사이트에서 임포트 할 코드를 가져와 html코드의 <head>부분에 붙여넣으면 임포트가 된다.
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위 사진 부분의 코드를 붙여넣어준다.
이제 JQuery를 이용해 javaScript기본코드를 짜보자
- 반복문
일단 반복문 코드를 살펴보자
fruits.forEach((a) => { //a는 변수다 a라는 요소를 반복하게 된다.
console.log(a)
})- 조건문
조건문 코드
let age = 24
if (age > 20) { //만약에(..라면){여기를 실행하라}
console.log('성인입니다')
} else { //위 조건이 아닌 다른 모든조건이면{여기를 실행라라}
console.log('청소년입니다')
}- append(html에서 설정된 위치 뒤에 html코드에 해당하는것을 착착 붙여주는것)
function checkResult() { //함수
let fruits = ['사과','배','감','귤','수박'] //5가지 문자열을 가진 배열
fruits.forEach((a)=>{ //위에서 설명한 반복문
let temp_html = `<p>${a}</p>` //변수 temp_html에 뒤 html코드를 넣는다.
$('#q1').append(temp_html) //id="q1"으로 지정해둔 자리에 붙인다(append).
})
}여기서 주의해야할 점은 temp_html변수에 코드를 넣을 때 쓰는건 백틱(`)이라는 기호이다.
백틱: `
맥 기준으로 영어타자 상태일시 키보드의 ₩을 누르면 입력된다. 한글타자 상태에서는 ₩기호가 그대로 입력된다.
백틱 안에 원하는 변수를 넣고 싶을때 ${}를 이용한다.
$('#q1').empty() : 가리키고 있는 위치를 모두 지운다.
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살</p>`이렇게 위와같이 변수를 나눠주어서 append하기도 한다.
-Fetch
Fetch를 이해하기전에 Json을 먼저 이해해야한다
Json은 Key:Value로 구성되에 자료형 Dictionary와 매우 유사한 형태이다.
기존의 Json을 웹에서는 보기가 힘들기 때문에 크롬에서 크롬 익스텐션 JSONView를 확장프로그램 추가 해준다.
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
JSONVue
Validate and view JSON documents
chrome.google.com
Fetch도 JQuery를 임포트한 페이지에서만 동작한다. 따라서 다음 에러가 나온다면 JQuery를 임포트하지 않은 것이기 때문에 위로 돌아가서 JQuery를 임포트하자.
Uncaught TypeError: $ is not a function
- Fetch의 기본골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})위와같이 사용해 값을 받아올 수 있다. 그 값은 data에 들어간다.
Fetch해설
fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다필요한 데이터만을 받아올때는 ['']를 이용하여
ex) data['RealTimeCityAir']['row'][0]
데이터의 딕셔너리 리스트에 0번째
위와같이 가져온다.
forEach를 이용하면 그 데이터의 길이만큼 반복할 수 있다.
if를 이용해 미세먼지 수치가 일정수치를 넘은 구만 빨갛게 나타내도록 해보자!!!
