[스파르타] ChatGPT로 웹개발 완전정복 3주차 - Flask

스파르타코딩클럽
[GPT] 웹개발 종합반 : 최지웅
https://spartacodingclub.kr/online/web_chatgpt

스파르타코딩클럽 | [GPT] 웹개발 종합반

 

들을엉

Flask

플라스크란? 파이썬 기반의 웹 프레임워크

사용자의 요청에 맞춰 HTML 파일을 응답해주는 Flask 서버를 만들 수 있다.

 

+) 1대의 컴퓨터에다가 서버도 만들고 요청을 하게되는 경우

클라이언트 = 서버 인 상태가 되는데 이를 로컬 개발환경이라고 한다.

 

 

Flask 시작하기

기본 설치하기

사용할 프로젝트를 열람한 뒤

> 가상환경 설치 (* 설치 방법) 후 확인

> flask 설치

$ pip install flask

# 설치 재차 확인하는 방법 : 전체 패키지 리스트 출력
$ pip list

> 폴더와 파일 생성

📦루트 레퍼지토리
 ┣ 📂.venv         # 가상환경 폴더
 ┣ 📂static        # static 리소스가 들어갈 폴더
 ┣ 📂templates     # html 파일이 들어갈 폴더
 ┃ ┗ 📜index.html  # 기본적으로 첫 페이지
 ┗ 📜app.py        # 메인 파일. 실행할 파이썬 코드. 서버를 키거나 DB에 대한 속성 넣기 등을 함

 

서버 실행하기

# windows
$ python app.py

# mac OS
$ python3 app.py

실행 후 안내해주는 URL을 통해 로컬 개발환경 접속 가능하다.

 

 

Flask로 로또 추천 사이트 만들기

> @app.route 를 활용해서 URL에 따라 다른 화면 렌더링

> render_template(데이터를 받을 페이지, 데이터이름 = 데이터) 방식으로 데이터 전달

# app.py

from flask import Flask, render_template # 패키지 연결

app = Flask(__name__)
import random

@app.route("/")
def home():
    name = "이령"
    lotto = [16, 18, 20, 23, 32, 43] # 내 로또 번호

    # 랜덤 로또 번호
    def generate_lotto_numbers():
        numbers = random.sample(range(1, 46), 6) # 1-46 숫자 중 6개 선택
        return sorted(numbers) # 오름차순 정렬

    random_lotto = generate_lotto_numbers()

    # 내 로또 번호 & 랜덤 로또 번호의 일치율
    def count_common_elements(list1, list2):
      common_elements = set(list1) & set(list2) # 두 리스트의 공통 숫자 추출
      return len(common_elements) # 공통 숫자들의 수

    common_count = count_common_elements(lotto, random_lotto)

    # context 선언
    context = {
        "name": name,
        "lotto": lotto,
        "random_lotto": random_lotto,
        "common_count": common_count,
    }

    return render_template("index.html", data=context)
    # 아무것도 하지 않은 상태에서는 index.html 렌더링
    # 만들어진 context를 data라는 이름으로 html에 넘겨줌


@app.route("/mypage") # /mypage 루트 선언
def mypage():
    return "This is My Page!"


if __name__ == "__main__":
    app.run(debug=True)

> 내 로또 번호를 기본으로 지정 (context.lotto) (data.lotto)

> 랜덤 번호를 반환하는 함수를 만들어서(genterate_lotto_numbers()) 랜덤 로또 번호를 생성 (context.random_lotto) (data.random_lotto)

> 두 리스트가 공통으로 가진 값의 갯수를 반환하는 함수를 만들어(count_common_elements()) 내 번호와 랜덤 번호를 비교한 결과를 가져온다 (context.common_count) (data.common_count)

<!-- templates/index.html -->

    <!-- app.py 에서 넘긴 data(content)를 가져와 사용 -->
    <h1>안녕, {{ data.name }}</h1>
    <img class="coinman" src="{{ url_for('static', filename='image/coinman.png') }}"  alt="코인맨"/>

    <h2>로또 번호: {{ data.lotto }}</h2>
    <h1>랜덤 로또 번호</h1>
    {% for num in data.random_lotto %}
    <div class="randomball">{{ num|e }}</div>
    {% endfor %}
    
    {% if data.common_count == 6 %}
    <h2>{{ data.common_count }}개 맞았습니다! 로또 1등입니다.</h2>
    {% elif data.common_count == 5 %}
    <h2>{{ data.common_count }}개 맞았습니다! 로또 2등입니다.</h2>
    {% elif data.common_count == 4 %}
    <h2>{{ data.common_count }}개 맞았습니다! 로또 3등입니다.</h2>
    {% elif data.common_count == 3 %}
    <h2>{{ data.common_count }}개 맞았습니다! 로또 4등입니다.</h2>
    {% else %}
    <h2>{{ data.common_count }}개 맞았습니다! 탈락입니다...😥😥</h2>
    {% endif %}

완성!

 

 

Flask로 영화 검색 사이트 만들기

> 위에서 만든 로또 추천 사이트와 같은 프로젝트에서 진행

> @app.route 를 활용해서 /movie 경로로 연결되는 페이지에 영화 검색 사이트를 만든다

> 영화 정보 API 이용을 위해 requests 패키지 설치 후 import (import requests)

# app.py

import requests

@app.route("/movie") # /movie 루트 선언
def movie():
  query = request.args.get("query") # 검색어
  URL = f"http://kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieList.json?key=f5eef3421c602c6cb7ea224104795888&movieNm={query}" # 영화진흥위원회 API 연결

  res = requests.get(URL)
  rjson = res.json()

  movie_list = rjson["movieListResult"]["movieList"] # API 데이터 중 원하는 부분을 변수로 저장

  return render_template("movie.html", data=movie_list)

if __name__ == "__main__":
    app.run(debug=True)

> movie.html 의 검색어 폼에서 입력된 데이터를 query 라는 이름으로 app.py의 movie()에 보내줌

> 받은 query를 활용해서 데이터를 가져올 API의 URL 구성

> 검색어가 포함된 제목의 영화 데이터를 movie_list 라는 변수로 받아 data라는 이름으로 movie.html에 전달

<!-- templates/movie.html -->

    <!-- app.py 에서 넘긴 movie_list를 가져와 사용 -->
    <h1>영화 검색</h1>
    
    <!-- 검색어 폼 -->
    <form action="{{ url_for('movie') }}"> <!-- query가 movie에 전달됨 -->
      <input type="text" name="query" /> <!-- 입력된 데이터의 이름이 query -->
      <button type="submit">검색</button>
    </form>
    
    {% for movie in data %}
    <p>영화 제목: {{ movie.movieNm }}</p>
    <p>타입: {{ movie.typeNm }}</p>
    {% if movie.directors %}
   	<p>감독: {{ movie.directors[0].get('peopleNm') }}</p>
    {% endif %}
    <hr />
    {% endfor %}

검색어 작동 확인!

 

 

---

 

GitHub - sryung1225/hh_s