[스파르타코딩클럽] 웹개발 종합반 - 2주 차
자바 스크립트란?
브라우저가 알아들을 수 있는 언어.
<head> ~ </head> 안에 <script> ~ </script>로 공간을 만들어 작성,
script 태그 안에 자바스크립트를 작성하는 것이다.
<script>
function hey() {
alert('hi');
}
</script>
<body>
<button onclick="hey()">btn</button>
</body>
(1) 버튼을
(2) hey를
(3) alert(’ 안녕’)을
프로그래밍에서는 정해진 일을 반복하는 것을 함수라고 한다.
위 사진에서는 function hey()라는 규칙으로 hey라는 함수를 만들었고,
alert(’안녕’)이라는 작업을 원할 때마다 반복적으로 수행하게 하는 것이다.
<script>
function hey() {
console.log('hi')
}
</script>
<body>
<button onclick="hey()">btn</button>
</body>alert에서 console.log를 바꿔서 실행, btn을 누르면
브라우저 화면에서 우클릭하고 검사를 누른다.
화면에 개발자 도구가 뜬다.
Console을 누르면 'hi'가 출력된 것을 볼 수 있다.
내가 코딩한 것이 맞게 출력되는 것인지를 확인하기 위해 개발자들이 미리 찍어보는 도구가 console.log인 것이다.
Javascript & JQuery
javascript만 사용하면
코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야 하기 때문에 jQuery라는 라이브러리가 등장하게 되었다.
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다.
document.getElementById("element").style.display = "none";javascript로 이렇게 작성한 것을,
$('#element').hide();jQuery를 사용하면 보다 직관적으로 사용할 수 있다.
css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.
ex) 특정 인풋박스의 값을 → 가져와
<script>
function checkResult() {
alert('안녕하세요')
}
</script>checkResult() 함수
'결과 확인하기!' 버튼을 누르면 이렇게 작동하는 것을 알 수 있다.
JQuery 연습하기
<div id="q1">테스트</div>html 태그에 id를 적고,
let a = '사과'값을 넣을 변수를 쓴다.
function checkResult() {
let a = '사과'
$('#q1').text(a)
}'테스트'를 사과로 바꾼다.
$(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정하고,
지정한 것을 바꿔줄 명령어를 적어준다. text(a)를 넣어 글자 값으로 a를 넣는다.
리스트
let a = ['사과', '배', '감', '귤']a의 내용을 문자열에서 리스트로 바꿔
$('#q1').text(a[1])문자열에서 리스트의 두 번째 값으로 바꿔서 넣는다. (0부터 시작)
딕셔너리
let b = {
"name" : "영수",
"age" : 30
}$('#q2').text(b['name'])
리스트 딕셔너리
let c = [
{'name':'영수', 'age':30},
{'name':'철수', 'age':35}
]$('#q3').text(c[1]['age'])결과
반복문
let fruits = ['사과','배','감', ... ,'귤']
console.log('사과')
console.log('배')
console.log('감')
...
console.log('귤')이런 식으로 계속해서 쓰기에는 무리가 있어서 반복문이라는 것이 존재한다.
fruits.forEach((a) => {
console.log(a)
})fruits의 요소를 하나씩 확인하는데 이름은 a라고 할 것이다.
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})사과, 배, 감, 귤 총 네 번이 개발자 도구에 찍힌다.
반복문을 쓰면 리스트 안에 들어 있는 값의 개수만큼 찍히는 것이다.
조건문
if (조건) {
// 조건에 맞다면~
} else {
// 아니라면~
}ex)
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}20살보다 크면 성인'입니다'이, 아니면 '청소년입니다' 출력된다.
반복문+조건문
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
JQuery-.append
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
let temp_html = ``
})
}
let temp_html = `<p>사과</p>`원하는 html 태그를 백틱 안에 넣는다.
$('#q1').append(temp_html)jQuery를 사용해서, temp_html을 html 태그처럼 붙인다.
사과가 아니라 forEach문으로 돌린 반복문의 데이터가 들어가야 한다.
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}$('#q1').empty()처음에 나오는 사과, 귤 감은 빼준다.
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty()
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}
원하는 html 태그를 백틱(``)으로 묶는다.
태그 안에 들어갈 값은 ${}로 표시하고, 그 안에는 자료가 있는 변수를 넣고,
통째로 넣을 html 요소를 $('#아이디')로 골라주시고 appnd(변수)를 넣는다.
백틱(``)은
HTML요소를 통째로 넣을 때 묶어주는 기호이다.
(문자와 변수를 함께 써줄 수 있도록 하는 특수기호)
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
$('#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 temp_html = `<p>${a}</p>`
$('#q2').append(temp_html)
})변수 이름과 넣을 위치를 바꾼다.
(fruits → people / #q1 → #q2)
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살</p>`이름과 나이로 나눠서 변수를 지정해 준다.
백틱(``)은
HTML요소를 통째로 넣을 때 묶어주는 기호이다.
(문자와 변수를 함께 써줄 수 있도록 하는 특수기호)
.append를 사용할 수 있게 되면 어딘가에서 받아온 데이터를 그 데이터의 양에 맞게 html을 만들어서 붙여줄 수 있게 된다.
서버에서 클라이언트로 데이터를 내려줄 때 dictionary형태로 내려주는 것을 JSON이라고 한다.
클라이언트 → 서버 GET 요청
API는 은행 창구와 같은 것이다.
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것, 처리해 주는 것이 다른 것처럼
클라이언트가 요청할 때에도, "타입"이라는 것이 존재한다.
GET → 통상적으로 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
Fetch
fetch("URL").then(res => res.json()).then(data => {
console.log(data)
})Fetch 기본 골격.
fetch("URL") ← 이 URL로 웹 통신 요청을 보냄.
괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
.then( ) ← 통신 요청을 받은 다음 이렇게 한다.
res ⇒ res.json( ) ← 통신 요청을 받은 데이터는 res라는 이름을 붙임.(변경 가능)
res는 JSON 형태로 바꿔서 조작할 수 있게 함.
.then(data ⇒ { }) ←JSON 형태로 바뀐 데이터를 data라는 이름으로 붙임
Fetch 통신의 결과 값을 이용해 보기
미세먼지 데이터를 쓸 것이기 때문에 미세먼지 데이터가 어디에 있는지 찾는다.
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then(res => res.json())
.then(data => {
console.log(data['RealtimeCityAir']['row'][0]);
})fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then(res => res.json())
.then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a)
})
})row의 값을 rows에 담는다. → 반복문 이용
구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력한다.
구 이름 키 값인 "MSRSTE_NM",
미세먼지 수치 키값인 "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'])
})
})이렇게 구 이름과 미세먼지 수치값만 출력해 보았다.
.append를 이용해 보기
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
})구 이름과 미세먼지 수치의 데이터를 뽑는 코드이다.
let temp_html = `...`
$('#...').append(temp_html)어디에 들어갈지와 아이디 값을 지정해 준 뒤 .append
가져올 데이터를 temp_html에 넣고,
$('#...').empty()처음에 보이는 정보는 지운다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>미세먼지 API로Fetch 연습하고 가기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
}
</style>
<script>
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
$('#names-q1').empty()
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>
</head>
<body>
<h1>Fetch 연습하자!</h1>
<hr />
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
</div>
</body>
</html>완성 코드!
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
.bad {
color: red;
}
</style>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>`
}위 코드는 미세먼지 수치가 40 이상일경우 빨간색으로 나타내는 코드이다.
항해 99 시작 전까지 하루에 1번 이상씩 강의 듣고 공부하려고 한다.
오늘은 웹개발 종합반 2주 차 스터디가 있는 날인데 이걸 이제 정리하고 자빠진 나;;
새벽에 좀 끄적거리다가 지금 마무리하는데..
나 이대로 괜찮은 건가..?
근데 나름 재미있긴 하다..ㅋㅋㅋㅋㅋㅋㅋ