Flask - HTML파일 주기

Flask 기초

기본 폴더구조 - 항상 이렇게 세팅하고 시작하자!

Flask 서버를 만들 때, 항상,

프로젝트 폴더 안에,
ㄴstatic 폴더 (이미지, css파일을 넣어둔다)

디렉토리에 static 폴더 만들기

ㄴtemplates 폴더 (html 파일을 넣어둔다)

디렉토리에 templates 폴더 만들기

ㄴapp.py 파일
이렇게 세 개를 만들어두고 시작하고 이제 각 폴더의 역할을 알아보자!
(꼭 참고!! venv는 실제로는 보이지만, 안 보인다~라고 생각하자!)

HTML 파일 불러오기

templates 폴더의 역할을 알아보자!
HTML 파일을 담아두고, 불러오는 역할을 한다.

간단한 index.html 파일을 templates 안에 만들어보자.

index.html

< !DOCTYPE
   html >
   < html
   lang = "en" >
   < head >
   < meta
   charset = "UTF-8" >
   < meta
   name = "viewport"
   content = "width=device-width, initial-scale=1.0" >
   < script
   src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > < / script >
   < title > Document < / title >

   < script >
   function
   hey()
   {
       alert('안녕!')
   }
< / script >
< / head >
< body >
< button
onclick = "hey()" > 나는
버튼! < / button >
< / body >
< / html >

flask 내장 함수 render_template를 이용한다. 바로 이게 프레임워크의 위력!

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

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

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

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

API 만들기

여러 방식(링크)이 존재하지만 가장 많이 쓰이는 GET, POST 방식에 대해 알아보자.

GET, POST 요청 타입 - 리마인드

리마인드! 
전 강의에서 배웠던 은행의 창구가 API와 같다는 것을 기억해보면 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼, 클라이언트가 요청할 때에도, "방식"이 존재한다.
HTTP라는 통신 규약을 따른다는 거 잊지 않았다면 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려주는 것이다. 

• GET 방식
  → 통상적으로! 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회
  → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
  예: google.com?q=북극곰
  
  
• POST 방식
  → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
  예) 회원가입, 회원 탈퇴, 비밀번호 수정
  → 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달
  

GET 요청에서 클라이언트의 데이터를 받는 방법

예를 들어, 클라이언트에서 서버에 title_give란 키 값으로 데이터를 들고 왔다고 생각하자.
(주민등록번호라는 키 값으로 900120-.. 을 가져온 것과 같은 의미)

받은 값을 개발자가 볼 수 있게 print로 찍어볼 수 있게 했다. 실전에선 print로 찍어주는 것 외에, 여러 가지 작업을 할 수 있겠다.

Jquery 임포트

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

index의 title 밑에 입력

GET 요청 API코드

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

app.py에 입력

위처럼 API 코드를 넣고 import 부분에 request, jsonify 추가해준다.

title_give라는 이름으로 뭔가를 받아와서 title_receive 변수에 넣었고, 개(print(title_receive)를 찍어 줬어 라는 뜻.

GET 요청 확인 Ajax코드

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

GET 요청 확인 테스트

/test라는 창구에 가는데 title_give라는 이름으로 봄날은 간다라는 데이터를 내가 갖고 갈게라는 뜻이다.

그리고 잘 된다면 다시 네가 주는 데이터를 내가 콘솔에다가 찍어볼게라는 것!

POST 요청에서 클라이언트의 데이터를 받는 방법

POST 요청 API코드

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

POST 요청 API코드

POST 요청 확인 Ajax코드

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

POST 요청 확인 Ajax코드