6.4 Recap
지금까지 했던 Flask 를 이용해서 웹 페이지를 연결했던 작업을 간단히 정리해본다.
Flask 를 설치하였고, Flask 를 import 했다. ( Flask 설치는 cmd 창을 열고 pip install flask 입력하면 설치완료 )
Job Scrapper 라고 불리는 새로운 Flask application인 app 변수를 만들었다.
이 app 변수는 유용하게 쓸 수 있다.
< main.py >
from flask import Flask, render_template
app = Flask("JobScrapper")
app.run("0.0.0.0")시작 부분에서 app.run() 함수를 호출하면 Flask application 을 그냥 만들어준다.
( ) 안에 0.0.0.0 이나 127.0.0.1 등 의 특정 IP 를 입력하면
웹 서버를 연결시켜 브라우저에 (크롬, 파이어폭스 엣지 등) 해당 IP 를 입력하게 되면 접속이 된다.
( 아직 제대로 response 데이터를 입력한게 없으니 Not Found 가 화면에 뜬다. )
그리고 사용자가 웹 페이지를 방문했을 때 응답하는 코드도 작성해보았다.
( 사용자의 request 와 그에 상응하는 response )
< main.py >
from flask import Flask, render_template
app = Flask("JobScrapper")
@app.route("/")
def home():
return "hi"
app.run("0.0.0.0")콘솔창:
@app.route ( ) 를 사용하여 응답할 페이지를 지정해주기만 하면 된다.
( @app.route 는 decorator 라고 한다. )
@app.route ( "/" ) 괄호 안의 내용 → / 를 url 에 입력 시 아래 함수로 응답하겠다는 의미이다.
( / 는 사실 아무것도 입력하지 않아도 연결된다, url directory를 구분해주는 slash 일뿐이다. )
@app.route ( "/" ) 같은 decorator 를 쓰고 바로 아래 함수를 만들어서 응답한다.
( @app.route( "/" ) → URL 에 127.0.0.1:5000 입력 시 hi 를 return 하겠다. )
( 숫자, 문자열 등등 return 할수 있다. )
위와 같이 hi 라는 문자열을 return 할수 있지만, 많은 HTML 을 보내고 싶은 경우 위와 같은 방법은 한계가 있다.
좀 더 복잡한 문자열이나 UI 를 만들고 싶으면 이를 위해 render_template 이라는 함수를 import 했다.
( 더 많은 HTML, CSS 를 사용한 UI )
render_template은 Flask 가 templates 폴더를 들여다 보게 한다.
그리고 내가 정한 이름의 template을 찾아준다.
vs code 에서 새로운 폴더를 만들고 templates 라고 이름을 짓는다.
Flask 가 templates 라는 이름의 폴더를 찾아보기 때문에 소문자 그대로 폴더이름을 짓는다.
또한 폴더 위치도 main.py 와 같은 선상에 있어야한다. ( 다른 폴더 안에 있거나 하면 안된다. )
templates 폴더 안에 home.html 이라는 새로운 파일을 만든다.
< main.py >
from flask import Flask, render_template
app = Flask("JobScrapper")
@app.route("/")
def home():
return render_template("home.html", name="james", age=20)
app.run("0.0.0.0")위 코드에서는 Flask 에게 home.html 이라는 template 을 render 요청을 하고있다.
rendering 은 단순히 사용자에게 HTML 을 전달할 뿐만 아니라 HTML 에 변수도 전달할 수 있다.
( name 과 age 라는 변수 전달 ) - {{ }} 중괄호를 사용해서 변수 작동
그리고 사용자가 응답을 받기 전에 Flask 가 하는 일은 HTML 안의 변수를 실제 data 로 바꿔준다.
( 웹 페이지에 접속하면 Flask 가 변수 값을 그 자리에 넣어주는것을 확인할 수 있다. )
< home.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Scrapper</title>
</head>
<body>
<h1>Hello to you! My name is {{name}}, I'm {{age}} years old</h1>
</body>
</html>위 main.py 와 home.html 코드는 서로 연결되어 main.py 코드 실행 시
크롬창 새로 열고 주소창에 127.0.0.1:5000 입력 후 접속하면 아래처럼 페이지가 뜬다.
따라서 rendering은 사용자에게 HTML 을 전달하는 것 뿐만 아니라, 실제로 HTML 파일에 데이터를 보낸다.
그러면 Flask 는 변수를 data로 변경하고 사용자가 보는 진짜 HTML 을 만든다.
그래서 render_template 을 사용한다. ( 단순 문자열 뿐만 아니라, HTML 파일에 데이터를 보내기 때문 )
home.html 에 간단한 form 을 만들어보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Scrapper</title>
</head>
<body>
<h1>Job Scrapper</h1>
<h4>What job do you want?</h4>
<form action="/search">
<input type="text" name="keyword" placeholder="Write keyword please" />
<button>Search</button>
</form>
</body>
</html>웹 페이지 출력값:
action은 form 이 어디로 가는지를 알려준다.
→ <form action="/search"> 코드 추가 ➤ form 입력 시 /search 로 이동.
<input type="text" name="keyword" placeholder="Write keyword please" />
→ input 타입은 text, name 은 keyword, placeholder (안내문구) 는 Write keyword please 로 정의
form 에는 1개의 input 과 1개의 button 이 있다.
input 의 name 을 keyword 로 설정하고,
브라우저에게 form 이 submit 될 때,
즉 사용자가 enter 나 search 버튼을 누를 때 /search 페이지로 이동하게 했다.
이게 의미하는거는 /search 페이지로 가서 URL 에 있는 input 값들에 접근할 수 있다는 것이다.
왜냐하면 GET method 를 사용하기 있기 때문이다.
<form action="/search"> 와 <form action="/search" method="get"> 은 서로 동일하다.
모든 form 은 기본으로 GET method 가 설정되어 있다.
GET method 는 사용자가 action 으로 넣은 page 로 이동하게 되면
사용자가 input 에 입력했던 모든 value 를 URL 에 보여준다.
< search.html > - input 에 아무 값 입력하면 출력되는 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Scrapper</title>
</head>
<body>
<h1>Search Results:</h1>
</body>
</html>
전체적인 흐름은 main.py 에서 Flask 를 import 하고 @app.route 를 사용해서
각 template 을 render 하여 웹 페이지 접속 시 사용자에게 보여준다.
home.html 에는 초기 검색화면을, search.html 에는 값 입력하면 검색 결과 화면을 보여준다.
폴더 및 파일은 아래와 같이 생성
코드는 아래와 같이 작성
< main.py >
from flask import Flask, render_template
app = Flask("JobScrapper")
@app.route("/")
def home():
return render_template("home.html", name="james", age=20)
@app.route("/search")
def search():
return render_template("search.html")
app.run("0.0.0.0")
< home.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Scrapper</title>
</head>
<body>
<h1>Job Scrapper</h1>
<h4>What job do you want?</h4>
<form action="/search">
<input type="text" name="keyword" placeholder="Write keyword please" />
<button>Search</button>
</form>
</body>
</html>
< search.html >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Scrapper</title>
</head>
<body>
<h1>Search Results:</h1>
</body>
</html>
python 참고 강의
'Programming > Python 웹 스크래퍼 만들기' 카테고리의 다른 글
| Python Flask 로 HTML 에서 For 문 사용 (0) | 2023.01.05 |
|---|---|
| Python Flask Arguments (0) | 2023.01.02 |
| Python Flask Form (0) | 2022.12.29 |
| Python Flask Render Template (0) | 2022.12.28 |
| Python Flask Introduction (0) | 2022.12.27 |
