웹개발 종합반 2주차
2023. 4. 8. 15:59ㆍ항해99
스파르타 코딩클럽 웹개발 종합반 수업내용을 정리한 것입니다.
Javascript 기초문법
1. console.log('')
<head>
<script>
function hey(){
console.log(’hello!’) // 2. 콘솔에 hello! 가 출력되어요
}
// console.log('hello world')
</script>
</head>
<body>
<button onclick=”hey()”> 버튼 </button> <!-- 1. 버튼을 클릭하면 -->
</body>- 브라우저에서 맥에 경우 command + option + i 단축키를 통해 console 창에서 볼 수 있어요
- 확인하려고 사용해요. 에러 확인을 위한 console.error() 도 있어요.
2. 변수
let a = 2; // 문자의 경우 let a = 'apple';
let b = 3;
console.log(a+b); // 5- 값을 담는 박스라고 생각하면 편해요.
let a = ['사과', '수박', '딸기', '감'];
console.log(a); // ['사과', '수박', '딸기', '감']
console.log(a[0]); // 사과
console.log(a[2]); // 딸기
console.log(a.length); // 4- 프로그래밍 언어는 0 부터 센다는걸 잊으면 안됩니다.
3. dictionary
- 자바스크립트를 하면 정말 많이 보게될 형식이에요.
let a = ['사과', '수박', '딸기', '감'];
console.log(a); // ['사과', '수박', '딸기', '감']
console.log(a[0]); // 사과
console.log(a[2]); // 딸기
console.log(a.length); // 4- key-value 로 구성되고 마치 질문 응답과 같아요.
let a = [
{'name' : '영수' , 'age' : 27},
{'name' : '철수' , 'age' : 15},
{'name' : '영희' , 'age' : 20},
]
console.log(a); // (3) [{…}, {…}, {…}]0: {name: '영수', age: 27}1: {name: '철수', age: 15}2: {name: '영희', age: 20}length: 3[[Prototype]]: Array(0)
console.log(a[0]['name']); // 영수
console.log(a[1]['age']); // 154. JQuery
- HTML 의 요소들을 조작하는, 편리한 JS 를 미리 작성해 둔 것이라고 해요. 즉 라이브러리입니다.
- JQ 를 사용할 땐 src 를 html, head 에 적어야해요.
// JQ 를 사용 할땐 아래 src 가 있어야 한다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>- 아래는 같은 코드지만 JS 와 JQ 를 비교할 수 있는 코드에요. 둘은 동일한 작동을 합니다.
//JS
document.getElementById("element").style.display = "none"//JQ
${'#element').hide();5. JQ 변환
<head>
<script>
function checkResult(){
let a = ['사과','배','감','귤']
$('#q1').text(a[0])
$('#q1').css('color', 'red') // 글자색이 빨간색으로 바뀜
$('#q1').css('font-size', '40px') // 글자 크기가 40px로 바뀜
let b = {'name' : '영수' , 'age' : 30 }
$('#q2').text(b['name'])
let c = [
{'name' : '영수' , 'age' : 30 },
{'name' : '철수' , 'age' : 35 },
]
$('#q3').text(c[1]['age'])
}
</script>
</head>
<body>
<button onclick="checkResult"> 클릭 </button>
<div id="q1"> 테스트 </div>
<div id="q2"> 테스트 </div>
<div id="q3"> 테스트 </div>
</body>
// q1 테스트가 사과로 바뀜
// q2 테스트가 영수로 바뀜
// q3 테스트가 35 로 바뀜6. 반복분
- JS 반복문 forEach 에요 자세한건 아래링크 클릭
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Array.prototype.forEach() - JavaScript | MDN
forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.
developer.mozilla.org
<head>
<script>
let fruits = ['사과', '배', '감', '귤']
fruits.forEach((zzz) => {
console.log(zzz);
})
</script>
</head>
<body>
</body>- 요소에 처음부터 끝까지 실행됩니다.
7. 조건문
let age = 24
if(age > 20) {
console.log('성인입니다.')
} else {
console.log('청소년 입니다.')
}
// 성인입니다.8. 응용
- 반복문과 조건문을 합치면 아래처럼 사용 가능합니다.
let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((age) => {
if(age > 20){
console.log('성인입니다.')
} else {
console.log('청소년입니다.')
}
})
// 청소년입니다.
// 청소년입니다.
// 청소년입니다.
// 성인입니다.
// 청소년입니다.
// 성인입니다.
// 성인입니다.9. JQ-append
- 자식을 추가합니다. 지정한 테그 안에 요소가 들어가게 되죠
<head>
<script>
function checkResult(){
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty() // 비워짐
fruits.forEach((fruit) => {
let tamp_html = `<p>${fruit}</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((person) => {
let name = person['name']
let age = person['age']
let tamp_html = `<p>${name}은 ${age}살입니다.</p>`
$('#q2').append(temp_html)
})
}
</script>
</head>
<body>
<button onclick="checkResult()"> 결과 </button>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</body>10. 서버 -> 클라이언트
- 아래 링크는 서울시 미세먼지 openAPI 입니다.
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
- 크롬 익스텐션 JSONVue 를 추가하면 아래처럼 편하게 볼 수 있어요.
- 이는 서버에서 클라이언트로 데이터를 내려주는 포멧입니다.
- 위 형식을 JSON 이라고 부릅니다.
11. 클라이언트 -> 서버
- API 는 은행 창구와 같은 것이다.
- 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는것 / 처리해 주는 것이 다른 것과 비슷하다.
- 클라이언트가 요청 할 때도 “타입” 이 존재한다.
- GET → 통상적으로 데이터 조회(Read) 를 요청할 때 ex) 영화 목록 조회
- POST → 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 ex) 회원가입, 회원탈퇴, 비밀번호 수정
12. Fetch
- 서버에서 데이터를 가지고 와서 사용할 수 있다.
script>
fetch("http://spartacodingclub.shop/sparta_api/seoulair")
.then(res => res.json())
.then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((row) => {
console.log(row['MSRSTE_NM'], a['IDEX_MVL']); // 중구... , 31...
})
})
</script>
// fetch 를 하는데 URL 을 가지고 온다.
// 그거를 json 형태로 만들어 그것을 활용한다.
// 콘솔에서 확인하면 데이터가 나온다.13. 연습
1) 미세먼지
<!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 tamp_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>2) 따릉이
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
.red {
color:red;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
fetch("http://spartacodingclub.shop/sparta_api/seoulbike")
.then(res => res.json())
.then(data => {
let rows = data['getStationList']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let name = a['stationName']
let rack = a['rackTotCnt']
let bike = a['parkingBikeTotCnt']
let temp_html = ``
if(bike > 5) {
temp_html = `<tr class="red">
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
})
})
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</h1>
<hr />
<div class="question-box">
<h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
<tr>
<td>103. 망원역 2번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
<tr>
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>추가로 아래는 자동 실행 코드이다.
$(document).ready(function() { fetch... })2주차 소감
세세하게 하나하나 전부 가르쳐주는 강의가 아니라 더 좋은것같다. 전체적인 틀을 제시해주고 그 틀에서 모르는것과 이해가 안되는 것은 찾아보며 학습하는 것이 더 도움이 되는거 같고 이해하기 좋다.
이번 주차에서 fetch 에 대한 핵심을 다시 이해하게 되어 좋았던 시간이었고 개인적으로 Javascript를 좋아하기 때문에 행복했씀 ㅎㅎ
'항해99' 카테고리의 다른 글
| 엑셀보다 쉬운 SQL 1주차 (0) | 2023.06.01 |
|---|---|
| 웹개발 종합반 5주차 (0) | 2023.04.09 |
| 웹개발 종합반 4주차 (0) | 2023.04.08 |
| 웹개발 종합반 3주차 (0) | 2023.04.08 |
| 웹개발 종합반 1주차 (0) | 2023.04.08 |