Ⅰ. 📚 오늘 배운 내용
- JQuery & Ajax 복습 (OpenAPI 붙이기)
- Python 기초
1) Javascript과 Python 비교
2) Request 패키지
JQuery & Ajax 복습 (OpenAPI 붙이기)
👉 output
👉 input
- 반복문 사용해서 OpenAPI 정보 가져오기
- 태그 내 html 넣기 (영화 카드 추가)
.empty()함수로 기존 템플릿 지우기- 별점
.repeat()함수 활용
<script>
$(document).ready(function () {
listing();
});
function listing() {
$(`#cardsbox`).empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/web/api/movie",
data: {},
success: function (response) {
let rows = response[`movies`]
for (let i = 0; i < rows.length; i++) {
let imgs = rows[i][`image`]
let titles = rows[i][`title`]
let descs = rows[i][`desc`]
let stars = rows[i][`star`]
let star_image = '⭐'.repeat(stars)
let comments = rows[i][`comment`]
let temp_html = `<div class="col">
<div class="card">
<img src="${imgs}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${titles}</h5>
<p class="card-text">${descs}</p>
<p>${star_image}</p>
<p class="mycomment">${comments}</p>
</div>
</div>
</div>`
$(`#cardsbox`).append(temp_html)
}
}
})
}
</script>👉 [prac] Ajax 연습 3과 이미지 바꿀 때 차이점
[prac] Ajax 연습 3의 open api 이미지 데이터는 단일 행이라$('#아이디값').attr('src', 이미지 let이름);이 코드를 썼고, 이 데이터는 다중 행이라let rows로i값을 받아서 구현
👇 $('#아이디값').attr('src', 이미지 let이름); 활용해서 이미지 변경
<script>
function q1() {
$.ajax({
success: function (response) {
let img = response['url']
$('#img-rtan').attr('src', img);
}
})
}
</script>
…
<body>
<div>
<img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
</div>
</body>Python 기초
파이썬 == 번역팩
파이썬 문법으로 된 것을 컴퓨터가 인식할 수 있는 101010001로 변환해줄 수 있도록, 번역 패키지를 설치하는 것
1) Javascript과 Python 비교
- Python은 들여쓰기가 중요하며 let을 안 씀
| Javascript | Python | |
|---|---|---|
| 변수 | let a = 2 let b= 3 a+b ➟ 5 | a = 'hyeyeong' b = 'Kang' print(a+b) ➟ hyeyeongKang |
| 자료형 | let a_list = ['수박', '참외', '배'] a_list=[1] ➟ 참외 1) 데이터 추가 a_list.push('감') a_list ➟ (4) ['수박', '참외', '배', '감'] | a_list = ['수박', '참외', '배'] print(a_list[1]) ➟ 참외 1) 데이터 추가 a_list.append('감') print(a_list) ➟ ['사과', '배', '감', '감'] |
| 딕셔너리 | let a_dict = {'name':'bob','age':27} a_dict['name'] ➟5 'bob' | a_dict = {'name':'bob','age':27} print(a_dict['name']) ➟ 'bob' |
| 함수 | function sum(a,b) { return a+b } let result = sum(2,3) alert(result} ➟ 5 1) 문구 프린트 function sum(a,b) { alert('더하자') return a+b } let result = sum(2,3) alert(result} ➟ '더하자' ➟ 5 | def sum(a,b): return a+b result = sum(2,3) print(result) ➟ 5 1) 문구 프린트 def sum(a,b): print('더하자') return a+b result = sum(2,3) print(result) ➟ 더하자 ➟ 5 |
| 조건문 | function is_adult(age) { if (age > 20) { alert('성인입니다') }else { alert('청소년입니다') } } is_adult(25) ➟ '성인입니다' | def is_adult(age): if age > 20: print('성인입니다') else: print('청소년입니다') is_adult(25) ➟ 성인입니다 |
| 반복문 | let fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박'] for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]) } ➟ 리스트 값 나열됨 | fruits = ['사과','배,''배','감','수박','귤','딸기','사과','배','수박'] for i in fruits: print(i) ➟ 리스트 값 나열됨 1 ) 글자 수 count count = 0 for i in fruits: if i == '사과': count += 1 print(count) ➟ 2 |
ex) 나이가 20이상인 사람의 이름 프린트 (딕셔너리 + 조건문)
people = [{'name': 'bob', 'age': 20},
{'name': 'carry', 'age': 38},
{'name': 'john', 'age': 7},
{'name': 'smith', 'age': 17},
{'name': 'ben', 'age': 27}]
for person in people:
if person['age'] > 20:
print(person['name'])➟ carry
➟ ben
🔎 추가 서칭한 내용
공백 띄어쓰기 :
줄바꿈 :<br>
2) Request 패키지
- 패키지는 다른 사람이 만들어 둔 파이썬 라이브러리
- venv : 패키지가 담기는 가상 환경
- requests : Ajax 같은 역할을 해주는 패키지
(1) 설치
PyCharm > 환경설정 > 프로젝트 : pythonprac > Python 인터프리터 > + 버튼 > requests 검색 > 패키지 설치
(2) 활용
import requests r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair') rjson = r.json()📍 r 이하 두번째 문단은 라이브러리마다 다르게 정리되어 있기 때문에 사용시 확인 필요
ex) 서울시 구 이름과 미세먼지 지수 나타내기
👇 Ajax 활용
<head>
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let rows = response[`RealtimeCityAir`][`row`]
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
console.log(gu_name, gu_mise)
}
}
})
}
</script>
</head>👇 requests 활용
import requests
r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()
rows = rjson['RealtimeCityAir']['row']
for row in rows:
gu_name = row['MSRSTE_NM']
gu_mise = row['IDEX_MVL']
print(gu_name, gu_mise)👇 미세먼지 지수가 60 미만인 서울시 구 이름 나타내기
import requests
r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()
rows = rjson['RealtimeCityAir']['row']
for row in rows:
gu_name = row['MSRSTE_NM']
gu_mise = row['IDEX_MVL']
if gu_mise < 60:
print(gu_name, gu_mise)Ⅱ. 📝 회고
대망의 파이썬... 특히 request 패키지 쓸 때 똑같은 내용을 구현해도 Ajax보다 훨씬 간결한 구조!!!! 파이썬이 직관적이긴 하지만 javascript랑 애매하게 겹치는 게 많아서 아직 많이 헷갈린다.
그리고 들여쓰기 하나 틀리면 바로 오류 난다. 정렬 맞춰도 자동으로 안 되는 부분이 있기 때문에 들여쓰기 신경써서 하기! 결과값 오류 나서 보면 70%는 들여쓰기 문제였다. 계속 해보는 수밖에 없는 것 같다.
Ⅲ. ☑️ TO DO
- 링크트리 진행
코딩입문 코린이