프로그래머스 인공지능 데브코스 3기 수업내용 정리 #15(Web Application with Flask)

Clay Ryu's sound lab·2021년 12월 27일

Note for 2021

목록 보기

15/33

4주차의 목표는
Flast를 활용해서 REST API 구축하기
Django를 활용해서 웹사이트 구축하기
https://justkode.kr/python/flask-restapi-1 참고
https://www.youtube.com/watch?v=iOueE9AXDQQ 참고

Flask

Python 기반 마이크로(작지만 있을건 다있는) 웹 프레임워크
다양한 장르의 프로젝트를 진행하다보면 프로젝트 관리를 위해서 독립적인 환경을 구축하는게 편해지게 된다. 그래서 가상환경을 사용한다.

0.가상환경 설정

pip install virtualenv
virtualenv <가상환경이름> #venv

1.가상환경에 진입하기

venv/Scripts/activate.bat
#위 방법이 잘 안된다면
cd로 Scripts까지 이동해서 activate.bat를 실행하면 된다.

2.flask를 설치하고

#설치된 모듈 확인, 처음 실행하면 
#numpy, pasdas 등이 설치되어있지 않음을 확인할 수 있다.
pip freeze
#해당 폴더에 flask를 설치하기
pip install flask

3.flask를 실행하기
해당 폴더에 app.py파일을 작성하고

flask run

인터넷과 웹

인터넷 : 전 세계 컴퓨터를 하나로 합치는 거대한 통신망
웹 : 인터넷에 연결된 사용자들이 정보를 공유할 수 있는 공간 ex)naver.com/ google.com
인터넷에서 웹에 속하지 않는 것은 대표적으로 메일 프로토콜이 있다.
웹페이지의 집합을 웹사이트라 한다.

웹사이트 내에서 정보의 상호작용의 방식

신발가게의 작동방식

1.손님이 원하는 색상과 사이즈를 담은 신발을 '요청'한다.
2.직원이 해당 요청을 '처리'한다.
3.손님의 요청에 '응답'한다.

우리가 Web을 사용하는 방법

1.웹 브라우저(chrome, safari...)를 켠다.
2.주소창에 주소를 입력한다.
3.Enter를 누르면 원하는 정보가 나온다.
3-1.혹은 에러페이지가 나온다.

Web의 동작방식

웹은 클라이언트와 서버 사이의 소통이다.
Client : 정보를 요청하는 입장
Server : 정보를 제공하는 입장
1.Client가 Server에 정보를 요청request한다.
ex)naver.com/blog
2.Server는 이 요청받은 정보에 대한 처리를 진행한다.
3.Server가 Client에게 요청에 대해 응답response한다.

프로토콜에 맞는 규칙에 따라서 어떤 정보를 교환한다는 의미이고
우리는 HTTP.를 붙인 request(HTTP Verb), response(HTML)를 주로 사용한다.

Flask with REST API

API(application programming interface)

프로그램들이 서로 상호작용하는 것을 도와주는 매개체

Think RESTful!

Representational State Transfer
웹 서버가 요청을 응답하는 방법론 중 하나
데이터가 아닌, 자원resouce의 관점으로 접근

REST API

HTTP URI(웹상에서 정보를 요청할 때 대상하는 위치의 식별자, 서로 다른 자료를 구분하는 개념으로 URL을 포괄한다)를 통해 자원을 명시하고
HTTP Method(함수와 비슷, 어떤 자료를 요청하는과정에서 쓰일 수 있는 정해져 있는 몇가지 요청방법, GET, POST, PUT등)를 통해 해당 자원(URI에 해당하는 ID가 가리키는 것을 자원으로 본다, 자원은 오로지 명사로 대상을 가리키는 것으로 URI를 설정하게 된다)에 대한 CRUD를 진행

REST API의 Stateless

Client의 Context를 서버에 유지하지 않는다.
일반적으로 서버는 클라이언트의 요청을 동일하게 응답해주어야 한다. 요청을 독립적으로 간주한다.

1.POST/shoes는 자원에 새로운 정보를 생성
2.GET/shoes는 DB에 shoes가 있는지 확인후 해당 자원 반환
서버입장에서 아이템을 1.GET하기 위해서 2.POST를 진행할 필요가 없다. 둘 사이는 독립적이다.

from flask import Flask, jsonify, request

#Flast 객체 선언, 파라미터로 어플리케이션 패키지의 이름을 넣어줌
app = Flask(__name__)

#자원
menus = [
    {'id':1,'name':'Espress','price':3800},
    {'id':2,'name':'Americano','price':3500},
    {'id':3,'name':'CafeLatte','price':4100}
]

@app.route('/')
def hello_flask():
    return 'Hello World!'
    
# GET /menus | 자료를 가지고 온다.
@app.route('/menus')
def get_menus():
    return jsonify({"menus" : menus})

# POST /menus | 자료를 자원에 추가한다.
@app.route('/menus', methods=['POST'])
#전달받은 자료를 menus 자원에 추가
def create_menu(): #request가 JSON이라고 가정
    request_data = request.get_json() # {'name':..., 'price':...}
    new_menu = {
        'id' : 4,
        'name' : request_data['name'],
        'price' : request_data['price']
        }
    menus.append(new_menu)
    return jsonify(new_menu)
    
if __name__ == '__main__':
    app.run()

테스트는 postman에서 해볼 수 있다.

과제

실습에서는 GET 과 POST 를 이용해서 /menu 자원으로부터 데이터를 가지고오고, 자원에 데이터를 추가해보았습니다. 이는 자원에서 할 수 있는 4가지 logic인 CRUD(Create, Read, Update, Delete) 중 Read와 Create에 해당하는 부분입니다. 이를 바탕으로 다음 과제를 해결해봅시다.

필수 과제 : 메뉴 관리 CRUD 구현하기

1.HTTP 메서드 PUT 를 이용해 Update, DELETE 를 이용해 Delete 기능을 구현해주세요.
2.PUT /menu/<int:id> : 해당하는 id에 해당하는 데이터를 갱신합니다. (HTTPRequest의 Body에 갱신할 내용이 json으로 전달됩니다.)
3.DELETE /menu/<int:id> : 해당하는 id에 해당하는 데이터를 삭제합니다.
4.@app.route() 의 인자로 들어가는 경로에는 다음과 같이 사용해줄 수도 있습니다.

@app.route("/<name>") # URL에 <>를 붙임으로서 이를 함수의 인자로 대입할 수 있습니다.
def my_view_func(name):
    return name

보너스 과제 I: ID야 움직여라 얍!

1.새로운 menu를 추가하는 POST 영역에서 id가 4로 고정되어있는 문제가 발생합니다.
2.POST 요청이 들어올 때마다 id가 하나씩 증가하여 menu 리스트에 추가될 수 있도록 코드를 수정해주세요.
이 과제는 필수 과제 이후에 진행되어야 합니다.

from flask import Flask, jsonify, request

app = Flask(__name__)

#자원
menus = [
    {'id':1,'name':'Espress','price':3800},
    {'id':2,'name':'Americano','price':3500},
    {'id':3,'name':'CafeLatte','price':4100}
]

count=4
    
# GET /menus | 자료를 가지고 온다.
@app.route('/menus')
def get_menus():
    return jsonify({"menus" : menus})

# POST /menus | 자료를 자원에 추가한다.
@app.route('/menus', methods=['POST'])
#전달받은 자료를 menus 자원에 추가
def create_menu(): #request가 JSON이라고 가정
    request_data = request.get_json() # {'name':..., 'price':...}
    global count
    new_menu = {
        'id' : count,
        'name' : request_data['name'],
        'price' : request_data['price']
        }
    count += 1
    menus.append(new_menu)
    return jsonify(new_menu)
    
@app.route('/menus/<int:id>', methods=['PUT'])
def update_menu(id):
    request_data = request.get_json()
    update_menu = {
        'id' : id,
        'name' : request_data['name'],
        'price' : request_data['price']
        }
    menus[id-1] = update_menu
    return jsonify(update_menu)

@app.route('/menus/<int:id>', methods=['DELETE'])
def delete_menu(id):
    del menus[id-1]
    return {
        'delete' : 'seccess'
    }
    
    
if __name__ == '__main__':
    app.run()

보너스 과제 II : 데이터베이스 연동하기

1.수업에서 다룬 API는 서버를 재시작하면 모든 정보가 리셋되는 치명적인 문제가 있었습니다. 이를 해결하기 위해 데이터만을 저장하는 데이터베이스를 도입하여 Flask과 연동할 필요가 생겼습니다.
2.SQL과 ORM 중 하나를 선택하여 데이터베이스와 Flask app을 연동해봅시다. (즉, 자원에 CRUD가 발생하면 이 정보가 데이터베이스에 저장되어야합니다.)
이 과제는 필수 과제, 보너스 과제 I 이후에 진행되어야 합니다.

Clay Ryu's sound lab

chords & code // harmony with structure

이전 포스트

프로그래머스 인공지능 데브코스 3기 수업내용 정리 #14(Pandas와 Matplotlib 실습)

다음 포스트