부트캠프/웹 개발 도전기
2주차 웹개발 종합반 마무리
BTSBRINGMEHERE
2022. 1. 24. 14:03
# 2주차 웹개발 마무리
2주차 강의에 앞서 1주차에 배운 JavaScript 간단하게 정리하기!
JavaScript를 이용하여 버튼을 눌렀을 때 홀/짝을 알려주는 것을 배웠습니다.
<script>
let btn_cnt = 1; // hey() 안에다 쓰면 누를때 마다 1로 초기화해서 밖에서 변수처리
function hey() {
if (btn_cnt % 2 == 0) {
alert('짝입니다');
} else {
alert('홀입니다');
}
count += 1;
}
</script>이런식으로 작성하면 클릭할 때마다 카운트가 1늘어나면서 홀/짝을 구분합니다.
JQeury 란?
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리! 라고 합니다.
jquery를 사용하기 위해서는 CDN을 미리 임포트 해줘야 하는데 저희가 사용하는 부트스트랩 기본틀안에 이미 임포트가 되있어서 따로 추가하지는 않았습니다.
jquery는 id값을 통해 원하는 div/버튼/인풋박스 등 다양하게 사용할 수 있습니다.
Ajax 와 Json
먼저 Json은 오픈API의 소스코드를 예쁘게 정리해주는 크롬 확장프로그램 인 것 같습니다. 처음에 시작할 때는 왜 크롬 인터넷으로 시작해야하는지 몰랐지만 쉽게 다운 받을 수 있는 크롬이기 때문에 사용하는 것 같습니다.
Ajax는 Open API를 GET(데이터를 조회)하기 위해 사용하는 것 입니다. (참고로 Ajax는 JQuery를 임포트한 상태에서만 된다고 합니다.)
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})ajax의 기본 골격입니다. 서울시에서 제공한 미세먼지 API입니다. 뒤 늦게 알았지만 502 ERROR가 뜨면 프로그램도 실행이 안되니깐 서버를 꼭 확인해줘야 합니다.
Ajax를 이용한 랜덤 고양이 사진/짤 만들기
<script>
// 페이지를 처음 실행 했을때 동시에 실행되는 것 입니다.
$(document).ready(function () {
alert('다 로딩됐다!')
});
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let catimgs = response[0]['url'];
$("#img-cat").attr("src", catimgs); // API에 저장된 고양이 사진을 랜덤으로 등장하게 합니다.
}
})
}
</script>
.
.
.
// 버튼을 클릭 할 때 마다 고양이가 자동으로 바뀝니다.
<button onclick="q1()">고양이를 보자</button>
<div>
<img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
</div>
서울시 따릉이 현황
.urgent {
color: red;
font-weight: bold;
}
.
.
.
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response["getStationList"]["row"];
for (let i = 0; i < rows.length; i++) {
let rack_name = rows[i]['stationName'];
let rack_cnt = rows[i]['rackTotCnt'];
let bike_cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = '';
if (bike_cnt < 5) {
temp_html = `<tr class="urgent"> // 현재 갯 수가 5개 미만이면 빨간색 글씨로 변경
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html);
}
}
})
}<tr> 은 가로줄을 만드는 역할
<td> 는 셀을 만드는 역할
입니다.
2주차 마무리 과제
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Stylish', sans-serif;
}
.wrap {
width: 500px;
margin: auto;
}
.img {
width: 500px;
height: 300px;
background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTEwMjdfMTUz%2FMDAxNjM1MzAwODU4NjQ5.4aqznTEKAAwn3ZWWtEQIUcZX-oMv_7jnZjmadlfe8CIg.srrJ8k8szLfgwuCs3zDVuf5TzBsZgyLN1aCkW7ihTCEg.JPEG.sin76412%2F%25C0%25CC%25B4%25F5%25B8%25AE%25BF%25F21.jpg&type=l340_165");
background-position: center;
background-size: cover;
}
.things {
width: 500px;
margin-top: 20px;
margin-bottom: 20px;
}
.price {
font-size: 28px;
}
.order {
width: 500px;
}
.btnorder {
margin: auto;
display: block;
}
.rate{
color: blue;
}
</style>
<script>
function orders() {
alert('매수가 완료되었습니다!');
}
$(document).ready(function () {
q2();
});
// 1주차 숙제 부분에서 추가된 2주차 숙제 부분
function q2() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rates = response['rate'];
$("#rates").text(rates);
}
})
}
</script>
</head>
<body>
<div class="wrap">
<div class="img"></div>
<div class="things">
<h1>이더리움 <span class="price">가격 : 3,400,000원/EHT</span>
</h1>
<p>이더리움(Ethereum)은 블록체인 기술을 기반으로 스마트 계약 기능을 구현하기 위한 분산 컴퓨팅 플랫폼이다. 이더리움은 비트코인을 기반으로 만든 가장 대표적인 알트코인으로서, '비트코인
2.0'이라고도 부른다. 이더리움이 제공하는 이더(Ether)는 비트코인과 마찬가지로 암호화폐의 일종으로 거래되고 있다. </p>
//가장 아쉬운 부분입니다 환율 API 서버가 자꾸 에러가 되서 환율에 대한 변화가 없습니다. ㅠㅠ 혹시몰라 답안지랑 답 강의까지 봤지만 어쩔 수 없는 것 같습니다 ㅠㅠ
<p class="rate">달러 원 환율 : <span id="rates">1234.13</span></p>
</div>
<div class="order">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">이름</span>
</div>
<input type="text" class="form-control" placeholder="이름" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">수량</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>-- 수량을 적어주세요 --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">4</option>
<option value="3">5</option>
<option value="3">6</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">연락처</span>
</div>
<input type="text" class="form-control" placeholder="000-0000-0000" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">이메일</span>
</div>
<input type="text" class="form-control" placeholder="sparta_coin@coin.com" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<button type="button" onclick="orders()" class="btn btn-primary btn-lg btnorder">주문하기</button>
</div>
</div>
</body>
</html>
API 서버가 안정이 되면 다시 도전해 봐야겠습니다 ㅠㅠ
Slack에도 문의를 했지만 많은 수강생분들이 같은 현상이 있는 것 같습니다. 언제?? 다시 고쳐지겠지요..?