Flask의 CRUD 기본 정리 - GCP 프로젝트에서 사용할 백엔드!

박경현·2024년 8월 4일

Flask

이번 GCP 프로젝트를 위해 백엔드를 고민하던 중 우리의 제 7의 멤버이자 실세 GPT께서
무겁지 않은 프로젝트에서 사용하기 편하고 배우기도 편하다는 Flask(?)를 추천해줘서 이걸로 결정했다.

플라스크를 연습해보니 함께 하는 팀원분들께도 API설명 해줄때 스프링보다 코드가 직관적이라
훨씬 낫겠다 싶었다

Flask를 선택한 이유

아직 팀원들에게 말은 안했지만 프론트는 React를 사용하게 될 확률이 99%다.

저번 프로젝트때 사용한 streamlit은 도처히 못쓰겠다...

Flask는 여러가지 장점이 있는데 그 중 우리와 연관된 것들을 적어봤습니다.

코드가 직관적이고 AI모델의 API를 빠르게 개발하고 배포할 수 있습니다.
우리가 참고할 수 있는 문서가 많습니다(streamlit으로 풀스택 개발할때는 너무 부족해서 힘들었다)
React로 만든 정적파일에 Restful API형태로 주고 받을 수 있어 매우 편합니다.

Flask를 GCP VM Instance에서 만들어서 연습하기

일단 Compute Engine에 가서 ubuntu를 사용하는 가장 작은 Ec2를 만들어줍니다.
그리고 아래 순서대로 적어주면 기본 플라스크를 위한 환경은 구축이 끝나게 됩니다.

sudo apt update
sudo apt install python3-pip
pip3 install flask

app.py를 vsc로 원격으로 연결한 뒤 만들어 줍니다 -> vm내부의 ssh의 경우 코드 작성이 불편합니다.
차고로 5000번 포트를 사용하므로 방화벽 5000을 풀어줍니다 (sudo ufw allow 5000해도 된다)

app.py

from flask import Flask, request, redirect

app = Flask(__name__)

@app.route('/)
def index():
	return 'hi'
    
app.run(debug=True) # 무조건 맨 아래에 이게 있어야 작동합니다!!

from -> 필요한 라이브러리를 가져옵니다
app = ~ => flask인스턴스를 app이라는 이름으로 만들게 됩니다.
이따 python3 app.py하면 서버가 활성화 됩니다.

@app.route('/') => 127.0.0.1/5000/ 으로 들어가면 아래 함수에 작성된 리턴값인 hi가 출력됩니다.

Flask에서 Read

이제는 간단하게 리스트를 작성해서 화면에서 작성하면 리스트에 추가되서 보여지게 만들어보자!

import flask from Flask, request, redirect

app = Flask(__name__)

nextId= 4
topics = [
	{'id' : 1, 'title' : 'html', 'body' : 'html is ...'},
    {'id' : 2, 'title' : 'css', 'body' : 'js is ...'},
    {'id' : 3, 'title' : 'js', 'body' : 'js is ...'},
]

def template(contents, content, id=None):
	contextUI = ''
    if (id!=None):
    	contextUI = f''' 
        	<li><a href="/update/{id}">update</a></li>
            <li><form action="/delete/{id}/"method="POST"> 
            	<input type="submit" value="delete"/>
            </form></li>
        '''
	return f ''' 
    	<!doctype html>
        <html>
        	<body>
            	<h1><a href="/">WEB</a></h1>
                <ol>
                	{contents}
                </ol>
                {content}
                
                <ul>
                	<li><a href="/create/">create</a></li>
                    {contextUI}
                </ul>
            </body>
        </html>
    '''
def getContents():
    liTags = ''
    for topic in topics:
        liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
    return liTags
    
@app,route('/')
def index():
	return template(getContents, f'<h2>hello</h2>')
    
@app.route('/read/<int:id>/')
def read(id):
	title = ''
    body = ''
    for topic in topics:
    	if topic["id"] == id:
        	title = topic["title"]
            body = topic["body"]
            break
     return template(getContents(), f'<h2>{title}</h2><h4>{body}</h4>', id)
	
    
app.run(debug=True) # 무조건 맨 아래에 이게 있어야 작동합니다!!

Flask에서 Create

이제 create는 내가 적은 내용을 해당 url로 전달해주어야합니다 -> POST로 넘아갑니다
우리가 보는 화면은 GET 방식으로 전달온 내용입니다!

그래서 create로 된 url은 각각 POST, GET방식일때 어떻게 처리해줄지 적어주어야합니다

GET일때 => form으로 화면에서 유저가 title, body를 작성하고 create버튼 누르면 전송됩니다.
POST일때 => 작성된 내용을 바탕으로 newTopic을 만들고 topics에 저장하고 해당 url로 redirect합니다.

@app.route("/create/", methods=['GET', 'POST'])
def create():
	if request.method == 'GET':
    	content = ''' 
        	<form action="/create/" method="POST">
                <p><input type="text" name="title" placeholder="title"/></p>
                <p><textarea placeholder="body" name="body"></textarea></p>
                <p><input type="submit" value="create"/></p>
            </form>
        '''
       return template(getContents(), content)
    else:
    	global nextId
        title = request.form['title']
        body = request.body['body']
        newTopic = {'id' : nextId, 'title':title, 'body':body}
        url = f'/read/{nextId}/'
        nextId += 1
        topics.append(newTopic)
        redirect(url)

Flask에서 Update - 이건 create와 비슷하기에 생략하겠습니다.

Flask에서 Delete

@app.route('/delete/<int:id>', methods=['POST'])
def delete(id):
    for topic in topics:
        if topic["id"] == id:
            topics.remove(topic)
            break
    
    return redirect("/")