GPT 활용 웹개발 기초 3주차 - Python & Flask

Python 기초 문법

• 변수 & 기본 연산
• 자료형
• 조건문
• 반복문
• 함수

# 변수 & 기본 연산
a = 10 # a에 10을 넣는다.
b = 3 # b에 3을 넣는다.

print(a + b) # 13
print(a - b) # 7
print(a * b) # 30
print(a / b) # 3.3333333333333335
print(a % b) # 1
print(a // b) # 3
print(a ** b) # 1000

print(a > b) # True
print(a <= b) # False

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

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

print(is_number)

# 자료형 - list
a_list = ["사과", "배", "감"]  # 리스트 안에 문자열, 숫자 섞여서 만들 수도 있어요
print(a_list[0])  # a라는 리스트의 0번째(첫번째) 값 = 사과
a_list.append('망고')
print(a_list) # ['사과', '배', '감', '망고']

# 자료형 - dict
a_dict = {} # 빈 딕셔너리 만들기
a_dict = {'name':'영수','age':24} # 값을 채운 딕셔너리 만들기


# a_dict의 값은? {'name':'영수','age':24}
print(a_dict)
# a_dict['name']의 값은? '영수'
print(a_dict['name'])

# 조건문
age = 25 # age라는 나이 값을 담은 변수 만들기

if age > 20: # 조건 : age가 20보다 크다면 -> 지금은 True!
	print("성인입니다") # 조건이 참일 때 작동하는 코드
else: # else 조건이 False라면 아래 내용을 실행하세요~ 라는 뜻
	print("청소년입니다") # 조건이 거짓일 때 작동하는 코드
    
# 3개 이상의 조건문
x = 10

if x > 0:
    print("양수입니다.")
elif x < 0:
    print("음수입니다.")
else:
    print("0입니다.")
    
# 반복문
fruits = ['사과','배','감','귤'] # fruits라는 과일 값이 담긴 리스트
for fruit in fruits:
	print(fruit)
    
ages =[5, 10, 13, 23, 25, 9] # ages라는 숫자 값이 담긴 리스트
for age in ages:
	# (조건) age가 20보다 크다면
	if age > 20:
		print("성인입니다") # -> 조건이 True 면 실행
	else:
		print("청소년입니다") # -> 조건이 False 라면 실행
        
# 함수
# 헤이를 출력하는 함수 만들기 (재료가 없는 함수)
def hey(): # 함수를 선언(만들기)할 때는, 항상 뒤에 콜론(:)까지 써주세요!
	print("헤이") # 함수가 작동하는 코드는 항상 들여쓰기를 해주세요!

hey() # "헤이"를 출력하는 함수=기계 hey() 작동시키기

# a,b,c 라는 세 숫자를 더하는 함수 만들기
def sum(a,b,c): # 요리을 만들 때, 재료를 넣듯이 꼭 필요한 요소를 명시
	return a+b+c

# 함수 호출 및 변수에 저장
# 함수를 작동시키고 내보내는 결과물을 result라는 변수에 담는다
result = sum(1,2,3)
print(result)

 

Python 가상환경

• 가상 환경(virtual environment)은 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 입니다.

VS Code로 가상환경 생성

1. 명령 팔레트 실행 (Win: ctrl + shift + p / Mac: command + shift + p)
2. env 검색 후 Python : Create Environment 선택
3. Venv 선택 후 가상환경 생성할 Python 버전 선택
4. 터미널에서 (.venv) 폴더가 터미널의 새 줄 앞에 적혀있는지 확인

 

웹 스크래핑(크롤링)

• Python의 라이브러리를 사용해 웹 페이지의 데이터를 가져올 수 있음
• Selenium과 Bs4 & Requests 를 사용해 웹 스크래핑을 할 수 있음

스크래핑 예시

# 멜론뮤직 스크래핑
from bs4 import BeautifulSoup
import requests

# bs4 시작코드
'''
스크래핑 하고 싶은 주소를 url에 넣어주세요
'''
url = "https://www.melon.com/chart/"
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(url, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')

trs = soup.select('table > tbody > tr')
for tr in trs:
    rank = tr.select_one('.rank').text
		title = tr.select_one('.rank01 > span > a').text
    artist = tr.select_one('.rank02 > a').text
    image = tr.select_one('img')['src']
    print(rank, artist, "-", title)

 

• Selenium을 사용한 방법은 bs4와 requests를 사용한 방법과 약간 다르다.

selenium 활용 예시

# 셀레니움 스크래핑 방법

# 해당 코드의 경우 예시로 일부만 가져왔기 때문에 제대로 작동하지 않는다.

# 셀레니움 기본 설정
from selenium import webdriver
from selenium.webdriver.common.by import By
!pip install - -no-index - -find-links = ../packages selenium == 4.1.5
driver = webdriver.Chrome("c:\chromedriver.exe")

# 닌텐도 온라인 스토어 게임 정보 스크래핑
url = 'https://store.nintendo.co.kr/games/all-released-games'
driver.get(url)

# 페이지 내 데이터 수 확인
sel_1 = driver.find_elements(By.CLASS_NAME, 'category-product-item')
print(len(sel_1))

# 상세 페이지 링크 가져오기
sel_2 = driver.find_elements(By.CLASS_NAME, 'category-product-item-img')

def get_link(element):
    # 상세 페이지의 주소를 가져오는 함수
    # element : 데이터를 가져오려는 element 값(id, css_selector, class_name 값이 있는 변수 입력)
    link_list = []
    for i in element:
        sel = i.find_element(By.TAG_NAME, 'a')
        link = sel.get_attribute('href')
        link_list.append(link)
    return link_list
    
#  각 게임 타이틀 가져오기
sel_4 = driver.find_elements(By.CLASS_NAME, 'category-product-item-title-link')

def get_title(element):
    # 각 게임의 타이틀을 가져오는 함수
    # element : 데이터를 가져오려는 element 값(id, css_selector, class_name 값이 있는 변수 입력)
    title_list = []
    for i in element:
        title = i.text
        title_list.append(title)
    return title_list
    
# 상세 페이지 접속 후 요소 가져오기
sel_5 = driver.find_element(By.CSS_SELECTOR, '#maincontent > div.columns > div > div.product-page-container > div.product-page-media > div.product.media > div.gallery-placeholder > div.fotorama-item.fotorama.fotorama1693810336046 > div.fotorama__wrap.fotorama__wrap--css3.fotorama__wrap--slide.fotorama__wrap--toggle-arrows.fotorama__wrap--no-controls > div.fotorama__stage > div.fotorama__stage__shaft.fotorama__grab > div.fotorama__stage__frame.fotorama__active.fotorama_horizontal_ratio.fotorama__loaded.fotorama__loaded--img > img')
img = sel_5.get_attribute('src')
sel_6 = driver.find_element(By.CLASS_NAME, 'price')
price = sel_6.text
sel_7 = driver.find_element(By.CLASS_NAME, 'value')
explain = sel_7.text
sel_8 = driver.find_element(By.CLASS_NAME, 'product-attributes-all')
detail = sel_8.text
sel_9 = driver.find_element(By.CLASS_NAME, 'product-attribute-esrb')
ages = sel_9.get_attribute('src')
sel_10 = driver.find_element(By.CLASS_NAME, 'product-attribute-grac_content_descriptor')
tag = sel_10.get_attribute('src')

 

Flask

• 로컬 개발환경 : 클라이언트 = 서버

Flask 시작

• 폴더 생성 및 가상환경 설치

flask 폴더 구조
- - -
flask
|— venv
|— app.py (서버)
|— templates
         |— index.html (클라이언트 파일)
         
몇 가지 규칙
1. templates 폴더명은 고정
2. app.py 파일명은 python 라이브러리 이름과 동일한 것으로 사용 금지

• Flask 패키지 설치

# 터미널에서 패키지 설치
# pip install 패키지 이름

# 1개만 설치
pip install flask

# 여러 개 설치 시 "," 대신 패키지 마다 띄어쓰기 사용
pip install flask bs4 requests

• Flask 실행

# flask가 설치된 가상환경 확인 및 ls로 app.py 파일 여부 확인 후
python app.py
# mac에서 실행 시
python3 app.py

# 터미널에서 출력되는 주소 링크를 ctrl(command) + 클릭으로 웹 페이지에 접속

# 종료 시 터미널에서
ctrl + c

• app.py 파일 기본 구조

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():  
   return 'This is My Page!'

if __name__ == '__main__':  
   app.run(debug=True)
   
# @app.route('/') 부분을 수정해서 URL을 나눠 다른 페이지로 접속할 수 있음

• render_template 사용

from flask import Flask, render_template
app = Flask(__name__)

## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/mypage')
def mypage():
	return 'This is My page!'

if __name__ == "__main__":
    app.run(debug=True)
    
# render_template을 사용해서 HTML 파일을 불러올 수 있음

• 서버에서 데이터를 여러 개 넘겨주기

# app.py

@app.route('/')
def home():
    name = "지우"
    lotto = [16, 18, 20, 23, 32, 43]

    context = {
        "name": name,
        "lotto": lotto,
    }
    
    return render_template('index.html',  data=context)
    
/* index.html */
<body>
    <h1>안녕, {{ data.name }}</h1>
    <h2>로또 번호: {{ data.lotto }}</h2>
</body>

• HTML 파일에서 반복문 사용

/* .html */
/* 기본 */
<body>
    <h1>안녕, {{ data.name }}</h1>
    <h2>로또 번호: {{ data.lotto }}</h2>

    {% for number in data.lotto %}
            {{ number }}
    {% endfor %}
</body>

/* ol 태그 사용 */
<body>
    <h1>안녕, {{ data.name }}</h1>
    <h2>로또 번호: {{ data.lotto }}</h2>
    <ol>
        {% for number in data.lotto %}
        <li>{{ number }}</li>    
        {% endfor %}
    </ol>
</body>

/* ffor 입력 후 tab을 누르면 자동 완성 기능을 사용할 수 있음 */

# app.py
# GPT를 통해 함수나 코드를 받아서 app.py에 넣어서 사용할 수 있음
# 예시
import random

@app.route("/")
def home():
    name = "지우"
    lotto = [16, 18, 20, 23, 32, 43]
	
    # GPT를 통해 생성한 함수
    def generate_lotto_numbers():
        numbers = random.sample(range(1, 46), 6)
        return sorted(numbers)

    random_lotto = generate_lotto_numbers()

    context = {
        "name": name,
        "lotto": lotto,
				"random_lotto": random_lotto,
    }

    return render_template("index.html", data=context)

 

Flask로 이미지 삽입하기

1. static 폴더  생성 후 static 폴더 내부에 image 폴더 생성
2. image 폴더 내에 삽입할 이미지 파일 저장
3. url_for를 활용해 이미지 경로 수정 후 이미지 삽입 가능

/* 이미지 삽입 및 크기 조절 예시 코드 */
/* 크기 조절은 style 태그 내에 입력 */
.coinman {
	height: 100px;
}

<img class="coinman" src="{{ url_for('static', filename='image/coinman.png') }}" alt="">

/* 이미지 삽입 */
<img src="{{ url_for('static', filename='image/coinman.png') }}" alt="">

 

form으로 검색어 받아오기

/* form */
<form action="{{ url_for('movie') }}">
  <input type="text" name="query">
  <button type="submit">검색</button>
</form>

# app.py
from flask import Flask, render_template, request


@app.route('/movie')
def movie():
    print(request.args.get('query'))
    return render_template('movie.html')

 

 

3주차 학습 내용 활용 제작 웹페이지 파일

Flask.zip

9.22MB