Tech for good

[Flask] Flask 기초 - API 만들기 본문

IT/Computer Science

[Flask] Flask 기초 - API 만들기

Diana Kang 2021. 11. 6. 15:31

1. 화면 코드를 보내주는 API

 

Flask를 사용할 때는 아래의 기본 설정을 지켜줘야 한다.

프로젝트 폴더 안에 폴더와 파일을 생성해보자!

 

static 폴더: 이미지, css 파일을 넣어둔다.

templates 폴더: html 파일을 넣어둔다.

app.py 파일

 

Tip!
VS CODE에서 자동으로 태그 닫아주는 기능 ⇒ Extensions에서 'Auto Close Tag' 설치

 

 

 

# app.py <- 통상적으로 flask 서버를 실행시키는 파일은 app.py라고 이름짓는다.

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

@app.route('/') ## 통신 url인 http://localhost:5000/ 여기서 마지막 /을 뜻함.
def home(): ## 함수명 수정 - 이름만 보고 접속되는 페이지를 확인할 수 있게!
    return render_template('index.html')

if __name__ == '__main__':
    app.run('0.0.0.0',port=5000,debug = True)
# VS CODE에서 기본 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>Document</title>
</head>
<body>
    <h1>뉴올리언스 빨리 가고싶다</h1>
    <img src="{{ url_for('static', filename='NewOrleans.jpg') }}"/> 
		## 이미지를 넣을 때는 static 폴더에 위와 같은 포맷으로 넣어준다.
</body>
</html>

 

 

  • 크롬 화면에서 웹 페이지 확인하기
    • 크롬에서 http://0.0.0.0:5000/ 또는 http://localhost:5000/ 으로 접속해보자.
    • 아래와 같은 화면이 나타날 것이다.
    • @app.route('/') 안의 /가 URL 세부 주소가 된다. 따라서 http://localhost:5000/에서 /로 접속하면, home 함수를 실행한다. 

 

  • Flask로 URL 만들기
    • @app.route('/')부분을 수정해서 url을 부여할수 있다.
    • @app.route(URL경로)에서 URL 경로와 함수명은 유일해야한다. 
    • from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_word():
	return 'Hello World!'

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

if __name__ == '__main__':
	app.run('0.0.0.0', port=5000, debug=True)
    • 함수와 @app.route('/mypage')를 바꾸고 http://localhost:5000/mypage로 접속해보면 그 차이점을 알 수 있다!

 

  • Flask로 화면 띄우기 - HTML 파일 사용 
    • templates 폴더에는 HTML 파일을 담아둔다. 실행시에는 이 폴더에서 화면을 불러온다.
    • Flask 내장 함수 render_template를 이용해 HTML 파일을 불러온다. 이것이 바로 프레임워크의 위력이다!

 

  • Flask로 화면 띄우기 - HTML 화면에 이미지를 불러오기
    • static 폴더는 이미지나 css파일과 같은 정적 파일을 담아두는 역할을 한다. 

 

이제 app.py 실행 시, 위와 같은 프론트 페이지를 확인할 수 있다!

 

 

2. JSON 형식 데이터를 보내주는 API

- GET, POST 방식
* GET ⇒ 통상적으로 데이터 조회(Read)를 요청할 때
            예) 영화 목록 조회
        ⇒ 즉, 서버에 있는 데이터를 수정하지 않고 그냥 조회해올 때 사용
        ⇒ (클라이언트 → 서버)  데이터 전달: URL 뒤에 물음표를 붙여 key=value로 전달
        ⇒ url 예) google.com?q=북극곰
        ⇒ 즉 데이터 필드를 사용하지 않기 때문에 이렇게 빈칸으로 둠.  data = {}

* POST ⇒ 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
              예) 회원가입, 회원탈퇴, 비밀번호 수정
          ⇒ 즉, 서버에 있는 데이터를 수정, 변경 및 삭제할 때 사용
          ⇒ 데이터 전달: 바로 보이지 않는 HTML body에 key:value 형태 (데이터 필드)로 전달

 

 

클라이언트 > 서버 API 요청 (POST 방식)

# ajax로 클라이언트 > 서버 API 호출 (GET 방식)
## 해당 사례의 경우, 그냥 Console 창에 입력하고 있음.
$.ajax({
    type: "POST",
    url: "/test",
    data: {title_give: '봄날은간다' },
    success: function(response){
        console.log(response)
    }
})
# 위 코드 실행 시, 아래와 같은 값을 리턴하고 있음.
{msg: '이 요청은 POST!', result: 'success'}

 

 

서버 > 클라이언트 API 응답 (POST 방식)

# app.py (서버 > 클라이언트 응답; POST방식)

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

## HTML을 주는 부분
@app.route('/')
def home():
    return render_template('index.html')

## API 역할을 하는 부분
@app.route('/test', methods=['POST'])
def test_post():
    title_receive = request.form['title_give']
    print(title_receive)
    return jsonify({'result':'success', 'msg':'이 요청은 POST!'})

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

클라이언트에서 value 값으로 넣어 요청했던 '봄날은 간다'가 출력되고 있다.

 

 

 

클라이언트 > 서버 API 요청 (GET 방식)

# ajax로 클라이언트 > 서버 API 호출 (GET 방식)

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",  ## URL 뒤에 물음표를 붙여 key=value로 전달
    data: {},  ## 데이터 필드 없음.
    success: function(response){
        console.log(response)
    }
})
# 위 코드 실행 시, 아래와 같은 값을 리턴하고 있음.
{msg: '이 요청은 GET!', result: 'success'}

 

 

서버 > 클라이언트 API 응답 (GET 방식)

# app.py (서버 > 클라이언트 응답; GET 방식)

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

## HTML을 주는 부분
@app.route('/')
def home():
    return render_template('index.html')

## 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!'})

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

'IT > Computer Science' 카테고리의 다른 글

[Blazor & C# 핸즈온] 페이지, 라우팅 및 레이아웃을 사용하여 Blazor 탐색 개선  (0) 2021.12.29
[Blazor & C# 핸즈온] Blazor 웹 앱에서 데이터와 상호작용  (4) 2021.12.21
[C#] 콘솔에 출력하기 - Console.Write()과 Console.WriteLine()차이  (0) 2021.10.29
Terminal에서 code . 으로 vscode 열기 오류날 때  (0) 2021.10.10
[VS Code] 자주 쓰는 VS Code 단축키  (0) 2021.10.10
'IT/Computer Science' Related Articles more