스파르타코딩클럽 내일배움단 웹개발 종합반 -6

몽슈뜨·2022년 10월 23일

내일배움단 스파르타코딩클럽

웹개발 종합반

목록 보기

6/11

✨스파르타피디아에 OpenAPI 붙여보기

스파르타피디아 API

로딩 후 바로실행

$(document).ready(function(){
  listing();
});
function listing() {
	console.log('화면 로딩 후 잘 실행되었습니다');
}

API 결과값을 다시한번 확인하기

$(document).ready(function(){
  listing();
});

function listing() {
	$.ajax({
	  type: "GET",
	  url: "http://spartacodingclub.shop/web/api/movie",
	  data: {},
	  success: function(response){
			console.log(response)
	  }
	})
}

영화 데이터를 console에 찍어봅시다!

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/web/api/movie",
  data: {},
  success: function(response){
        console.log(response['movies'])
  }
})

movies를 돌면서, 하나씩 출력해봅니다.

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/web/api/movie",
  data: {},
  success: function(response){
        let movies = response['movies']
        for (let i = 0 ; i < movies.length; i++) {
            let movie = movies[i]
            console.log(movie)
        }
  }
})

movie 내용을 (image, comment, title, desc, star) 가지고
HTML을 만들어 붙입니다.

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/web/api/movie",
    data: {},
    success: function(response){
          let movies = response['movies']
          for (let i = 0 ; i < movies.length; i++) {
              let movie = movies[i]
              let title = movie['title']
              let desc = movie['desc']
              let image = movie['image']
              let comment = movie['comment']
              let star = movie['star']

              let temp_html = `<div class="col">
                                  <div class="card h-100">
                                      <img src="${image}"
                                           class="card-img-top">
                                      <div class="card-body">
                                          <h5 class="card-title">${title}</h5>
                                          <p class="card-text">${desc}</p>
                                          <p>${star}</p>
                                          <p class="mycomment">${comment}</p>
                                      </div>
                                  </div>
                              </div>`
              $('#cards-box').append(temp_html)
          }
    }
  })

별을 그려서 붙여줍니다.

let star_image = '⭐'.repeat(star) 을 사용하기!


$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/web/api/movie",
    data: {},
    success: function(response){
          let movies = response['movies']
          for (let i = 0 ; i < movies.length; i++) {
              let movie = movies[i]
              let title = movie['title']
              let desc = movie['desc']
              let image = movie['image']
              let comment = movie['comment']
              let star = movie['star']

              let star_image = '⭐'.repeat(star)

              let temp_html = `<div class="col">
                                  <div class="card h-100">
                                      <img src="${image}"
                                           class="card-img-top">
                                      <div class="card-body">
                                          <h5 class="card-title">${title}</h5>
                                          <p class="card-text">${desc}</p>
                                          <p>${star_image}</p>
                                          <p class="mycomment">${comment}</p>
                                      </div>
                                  </div>
                              </div>`
              $('#cards-box').append(temp_html)
          }
    }
  })

먼저 있던 카드들을 지워줍니다.

$('#cards-box').empty('');

✨파이썬 시작하기

파이썬을 설치한다는 것의 의미
- 일종의 번역팩을 설치한다고 생각하면 됩니다. 컴퓨터는 101010001 과 같은 언어만 알아듣는다고 했지요? 파이썬 문법으로 된 것을 101010001로 변환해줄 수 있도록, 번역 패키지를 설치하는 것입니다.
프로젝트 만들기 & 파이썬 파일 실행
파일 → new project 를 클릭합니다

hello.py 파일 안에 다음 내용을 붙여넣고, 마우스 오른쪽 키 → '실행' 합니다!
```
print('Hello, sparta')
```
## ✨파이썬 시작하기
변수 & 기본연산

a = 3      # 3을 a에 넣는다
b = a      # a를 b에 넣는다
a = a + 1  # a+1을 다시 a에 넣는다

num1 = a*b # a*b의 값을 num1이라는 변수에 넣는다
num2 = 99 # 99의 값을 num2이라는 변수에 넣는다

# 변수의 이름은 마음대로 지을 수 있음!
# 진짜 "마음대로" 짓는 게 좋을까? var1, var2 이렇게?

💡 자료형
숫자, 문자형

  name = 'bob' # 변수에는 문자열이 들어갈 수도 있고,
  num = 12 # 숫자가 들어갈 수도 있고,

  is_number = True # True 또는 False -> "Boolean"형이 들어갈 수 도 있습니다.

  #########
  # 그리고 List, Dictionary 도 들어갈 수도 있죠. 그게 뭔지는 아래에서!

리스트 형 (Javascript의 배열형과 동일)

 a_dict = {}
a_dict = {'name':'bob','age':21}
a_dict['height'] = 178

# a_dict의 값은? {'name':'bob','age':21, 'height':178}
# a_dict['name']의 값은? 'bob'
# a_dict['age']의 값은? 21
# a_dict['height']의 값은? 178

Dictionary 형 (Javascript의 dictionary형과 동일)

a_dict = {}
a_dict = {'name':'bob','age':21}
a_dict['height'] = 178

# a_dict의 값은? {'name':'bob','age':21, 'height':178}
# a_dict['name']의 값은? 'bob'
# a_dict['age']의 값은? 21
# a_dict['height']의 값은? 178

Dictionary 형과 List형의 조합

people = [{'name':'bob','age':20},{'name':'carry','age':38}]

# people[0]['name']의 값은? 'bob'
# people[1]['name']의 값은? 'carry'

person = {'name':'john','age':7}
people.append(person)

# people의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
# people[2]['name']의 값은? 'john'

💡 함수
함수의 정의 - 이름은 마음대로 정할 수 있음!

# 수학문제에서
f(x) = 2*x+3
y = f(2)
y의 값은? 7

# 참고: 자바스크립트에서는
function f(x) {
	return 2*x+3
}

# 파이썬에서
def f(x):
	return 2*x+3

y = f(2)
y의 값은? 7

함수의 응용

def sum_all(a,b,c):
	return a+b+c

def mul(a,b):
	return a*b

result = sum_all(1,2,3) + mul(10,10)

# result라는 변수의 값은?

💡 조건문
if / else 로 구성!

def oddeven(num):  # oddeven이라는 이름의 함수를 정의한다. num을 변수로 받는다.
	if num % 2 == 0: # num을 2로 나눈 나머지가 0이면
		 return True   # True (참)을 반환한다.
	else:            # 아니면,
		 return False  # False (거짓)을 반환한다.

result = oddeven(20)
# result의 값은 무엇일까요?

💡 반복문
무조건 리스트와 함께 쓰입니다!

fruits = ['사과','배','감','귤']

for fruit in fruits:
	print(fruit)

# 사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.

과일 갯수 세기 함수

fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']

count = 0
for fruit in fruits:
	if fruit == '사과':
		count += 1

print(count)

# 사과의 갯수를 세어 보여줍니다.

def count_fruits(target):
	count = 0
	for fruit in fruits:
		if fruit == target:
			count += 1
	return count

subak_count = count_fruits('수박')
print(subak_count) #수박의 갯수

gam_count = count_fruits('감')
print(gam_count) #감의 갯수

💡 딕셔너리

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:
    print(person['name'], person['age'])


# 이번엔, 반복문과 조건문을 응용한 함수를 만들어봅시다.
# 이름을 받으면, age를 리턴해주는 함수
def get_age(myname):
    for person in people:
        if person['name'] == myname:
            return person['age']
    return '해당하는 이름이 없습니다'


print(get_age('bob'))
print(get_age('kay'))

✨파이썬 패키지 설치하기

패키지? 라이브러리?
- Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위입니다. 이런 패키지 의 묶음을 라이브러리 라고 볼 수 있습니다. 지금 여기서는 외부 라이브러리를 사용하기 위해서 패키지를 설치합니다.
  즉, 여기서는 패키지 설치 = 외부 라이브러리 설치!

가상 환경(virtual environment) 이란?
프로젝트별로 패키지들을 담을 공구함
- 📌 문제상황:
  회사에서는 패키지 A, B, C를 설치해서 쓰고,
  개인 프로젝트에서는 패키지 B, C, D, E를 설치해서 쓰고 있었어요.
  
  그런데 회사팀장님이 B를 이전 버전인 B' 로 쓰자고 하시네요.
  그렇게 되면, 같은 컴퓨터에 깔려 있는 개인 프로젝트에서는 B'로 쓰면 코드를 다 바꿔야 해요
  어떻게 하면 좋을까요?
- 💡 해결책:
  다 담아둘 필요 없이 공구함을 2개 만들어서,
  
  공구함1에 A, B', C를 담아두고,
  공구함2에 B, C, D, E를 담아두고 쓰면 관리하기 편하겠죠?
  
  그래서, 가상환경이라는 개념이 등장했습니다.
  즉, 프로젝트별 공구함 이에요.
- 👉 정리
  가상환경(virtual environment)은
  같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 입니다.

pip(python install package) 사용 - requests 패키지 설치해보기
- project interpreter 화면에서 + 버튼을 누르면 아래 창이 뜹니다!
- requests를 검색하기!

✨패키지 사용해보기

requests 써보기

import requests # requests 라이브러리 설치 필요

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()

모든 구의 IDEX_MVL 값을 찍어주자!

import requests # requests 라이브러리 설치 필요

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
	print(gu['MSRSTE_NM'], gu['IDEX_MVL'])

IDEX_MVL 값이 60 미만인 구만 찍어주자!

import requests # requests 라이브러리 설치 필요

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
	if gu['IDEX_MVL'] < 60:
		print (gu['MSRSTE_NM'], gu['IDEX_MVL'])

✨웹스크래핑(크롤링) 기초

네이버영화 페이지
패키지 추가 설치하기(beautifulsoup4) : bs4

크롤링 기본 세팅

import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

#############################
# (입맛에 맞게 코딩)
#############################

select / select_one의 사용법

# 태그 안의 텍스트를 찍고 싶을 땐 → 태그.text
# 태그 안의 속성을 찍고 싶을 땐 → 태그['속성']

import requests
from bs4 import BeautifulSoup

# URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        # a의 text를 찍어본다.
        print (a_tag.text)

beautifulsoup 내 select에 미리 정의된 다른 방법

# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')

soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')

# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')

항상 정확하지는 않으나, 크롬 개발자도구를 참고할 수도 있습니다.
1. 원하는 부분에서 마우스 오른쪽 클릭 → 검사
2. 원하는 태그에서 마우스 오른쪽 클릭
3. Copy → Copy selector로 선택자를 복사할 수 있음

몽슈뜨

개발자되면 맥북사줄께

이전 포스트

스파르타코딩클럽 내일배움단 웹개발 종합반 -5

다음 포스트

스파르타코딩클럽 내일배움단 웹개발 종합반 -6

웹개발 종합반

✨스파르타피디아에 OpenAPI 붙여보기

✨파이썬 시작하기

✨파이썬 패키지 설치하기

✨패키지 사용해보기

✨웹스크래핑(크롤링) 기초

스파르타코딩클럽 내일배움단 웹개발 종합반 -5

스파르타코딩클럽 내일배움단 웹개발 종합반 -7

0개의 댓글