1주차 - html css javascript
2주차 - jquery , ajax ,api
3주차 - python , 크롤링 , mongoDB
4주차 - 미니프로젝트1, 미니프로젝트2
5주차 - 미니프로젝트3. AWS
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
2주차 - jquery , ajax ,api
👆결과물
이번 주차에서 주로 연습하면서 사용한 것은
⭐⭐⭐⭐⭐
- <script></script>안의 스크립트에서 콘솔확인하는 console.log() 👉※하나하나 확인하면서 코드작성할것!
- Json (서버 - 클라이언트 통신) ---> Json 서버에서 클라이언트에게 dictionary형태로 내려주는 것
- GET 방식 (서버에서 GET 요청)
- JQuery 👉※ Javascript로 길고 복잡하게 써야하는 코드를 jquery로 직관적으로 사용 + 편리
- 반복문 (for문 , forEach문) / 조건문(if,else문)
ex) Javascript 로 구현
- document.getElementById("element").style.display = "none";
JQuery 로 구현
- $('#element').hide();
JQery로 구현하면 자바스크립트 코드를 보다 간단하게 구현 할 수 있다.
<Fetch 연습>
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<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;
}
.bad{
color: red;
}
</style>
<script>
function q1() {
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='bad'>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}else{
temp_html = `<tr class>
<td>${name}</td>
<td>${rack}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
})
})
}
</script>
</head>
💾 function q1()은 fetch(" 서울시 따릉이 open API ")를 json형태로 데이터를 받아왔음 // 기본요청 (GET방식)
.then(res =>json()) // 요청한 데이터 json화
.then(dat => { // json화 한 데이터를 내가 선언한 변수(rows)로 데이터를 담았음
$('#names-q1').empty() // 업데이트 button을 클릭했을 시 id가 names-q1인 기존 짯던 code를 비움
rows.forEach((a) => {} // 안에는 변수(name, rack, bike)로 API에서 가지고 올 데이터를 담고 temp_html = ``(벡틱)
빈 값을 담아 if 조건문을 사용해서 bike값이 5보다 작으면 class='bad'로 css를적용해 ${name},${rack},${bike} 값들이
빨간색으로 표현 , 그외에는 css 적용 x
$('#names-q1').append(temp_html)
// append() 안에 있는 temp_html의 요소를 마지막 새로운 html 콘텐츠로 추가하기 위함
<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>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
1주차때 작업한 영화피디아에 2주차때 배운 내용을 적용해봄👊
👆결과물
💯아래의 코드는 1주차때 한 영화피디아에 서울의 날씨 (open API)를 가지고 와서 온도를 추가했다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<title>자바스크립트 연습! | 부트스트랩 연습!</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) -> 상단 상어이미지 어둡게 하기 */
background-position: center;
background-size: cover;
}
/* class ="mytitle" 밑에 있는 button 을 가리킴 */
.mytitle>button {
width: 250px;
height: 50px;
/* 백그라운드의 컬러를 없애기 */
background-color: transparent;
/* border = 테두리, 1px soild는 1px 실선, */
border: 1px solid white;
color: white;
border-radius: 50px;
margin: 20px;
}
/* mytitle > button:hover 는 button에 마우스를 오버했을때 살짝 강조되는 느낌 주기 */
.mytitle>button:hover {
border: 2px solid white;
}
.mycomment {
color: grey;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypost {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn>button {
margin-right: 10px;
}
</style>
<script>
//$(document).ready(function () {} 안에 넣으면 홈페이지를 열었을 때 자동으로 적용됨
$(document).ready(function () {
// console.log(data['temp'])
let ondo = data['temp']
$('#temp').text(ondo)
})
})
</script>
</head>
⭐⭐⭐⭐⭐
<script> 안에 $(document).ready(function() { }) 안에 있는 코드들은 웹이 시작하자마다 바로 작동시키기 위함
$('#temp').text(ondo) // 에서는 append가 아닌 text로 붙이기 위함
*위의 이미지는 fetch() 안에 있는 서울의 날씨 open api를 담고 있으며 json 형태로 불러온다.
<body>
<div class="mytitle">
<h1>내 생에 최고의 영화들</h1>
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
<button>영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>별점</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목이 들어감</h5>
<p class="card-text">코멘트가 들어감</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠지</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
------------
이번 2주차에는 1주차땐 정적웹페이지를 했다면 이번에는 조금더 동적인 웹페이지를 구현했다.
내가 많이 약했던 javascript 와 jquery를 다뤘던 시간이라 더 집중해서 들었던 점이 있긴하다
전에 있던 회사에서 이 부분에서 정말 많이 부딛혔던 적이 있어서일까 큰 도움이 되었던거 같다.
openAPI를 사용해서 필요한 데이터를 변수에 담아서 append로 붙이기라... 처음인 작업이라 신선했다
이래서 개발자들은 풀스택 풀스택하는건가...
