TOP
class="layout-aside-left paging-number">
본문 바로가기
[파이썬 Projects]/<파이썬 웹개발>

[파이썬] 플라스크(Flask) - 플라스크 프로젝트 - 메모앱(1)

by 기록자_Recordian 2024. 7. 23.
728x90
반응형
시작에 앞서
해당 내용은 <가장 빠른 풀스택을 위한 Flask & FastAPI>, Dave Lee 지음. BJ Public 출판.
내용을 토대로 작성되었습니다. 보다 자세한 사항은 해당 교재를 참고하시기 바랍니다.
메모앱 만들기 - 1단계: 애플리케이션 생성

 

플라스크 기능을 기반으로 간단한 웹 서비스 개발하기.

먼저 VSCODE에서 my_memo_app 폴더를 만들고 그 안에 templates 폴더와 app.py 파일을 만든다.

 

app.py 파일 내에 플라스크 애플리케이션의 기본 구조 작성

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Welcome to My Memo App!'

터미널에서 flask run을 실행하고

http://127.0.0.1:5000/ 에 접속하여 'Welcome to My Memo App!' 메시지가 뜨는 지 확인

메모앱 만들기 - 2단계: 템플릿 사용과 라우팅 확장

 

render_template 기능을 사용하여 HTML 템플릿을 렌더링하고, 다양한 URL 경로에 대한 처리 추가

먼저 templates 폴더 안에 HTML 템플릿 파일 생성

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>My Memo 앱에 오신 것을 환영합니다</title>
</head>
<body>
    <h1>My Memo 앱에 오신 것을 환영합니다</h1>
    <p>이것은 간단한 온라인 메모장 애플리케이션입니다. </p>
</body>
</html>

 

이제 플라스크 애플리케이션에서 루트 URL ('/') 경로에 대한 뷰 함수를 수정하여, render_template() 함수를 임포트하고 사용해서 home.html 템플릿을 렌더링

from flask import Flask, render_template

app = Flask(__name__)

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

터미널에서 flask run 을 재실행하여 확인

프로젝트 확장성을 고려하여 위 코드에 이어 다음 페이지 관련 코드도 추가

(About 페이지에 접근할 수 있도록 설정 기존 app.py 에 이어서 코드 작성)

@app.route('/about')
def about():
    return '이것은 My Memo 앱의 소개 페이지입니다'

flask run 재실행 후 http://127.0.0.1:5000/about 에 접속하면

'이것은 My Memo 앱의 소개 페이지입니다' 라는 메시지 표시

메모앱 만들기 - 3단계: 데이터베이스 연동 및 CRUD 구현

 

플라스크 애플리케이션에 MySQL 데이터베이스를 연동하고, CRUD 기능을 구현하여 애플리케이션에서 사용자 데이터를 효율적으로 관리

※ CRUD (생성, 읽기, 수정, 삭제)

◆ 데이터베이스 연동

먼저 MySQL 데이터베이스 서버에 my_memo_app 데이터베이스 생성

 

app.py 파일을 수정하여 데이터베이스 연동 및 모델 정의 추가. (기존 작성 코드는 그대로 유지)

라이브러리 설치

pip install Flask-SQLAlchemy==3.1.1
pip install pymysql==1.1.0

 

각자 MySQL 접속 환경에 따라 다음 SQLALCHEMY_DATABASE_URI 수정

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

# 데이터베이스 설정
# mysql://root:[비밀번호]@localhost:[root번호]/[db이름]
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:pw@localhost:3306/my_memo_app'
db = SQLAlchemy(app)

# 데이터 모델 정의
class Memo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.String(1000), nullable=False)
    
    def __repr__(self):
        return f'<Memo {self.title}'

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

@app.route('/about')
def about():
    return '이것은 My Memo 앱의 소개 페이지입니다'

# 데이터베이스 생성
with app.app_context():
    db.create_all()

◆ CRUD 기능 구현

CRUD 기능을 구현하여 사용자가 메모를 생성, 조회, 수정, 삭제 할 수 있게 한다.

from flask import Flask, render_template, request, jsonify, abort
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

# 데이터베이스 설정
# mysql://root:[비밀번호]@localhost:[root번호]/[db이름]
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:pw@localhost:3306/my_memo_app'
db = SQLAlchemy(app)

# 데이터 모델 정의
class Memo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.String(1000), nullable=False)
    
    def __repr__(self):
        return f'<Memo {self.title}'

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

@app.route('/about')
def about():
    return '이것은 My Memo 앱의 소개 페이지입니다'

# 데이터베이스 생성
with app.app_context():
    db.create_all()
    
# 메모 생성
@app.route('/memos/create', methods=['POST'])
def create_memo():
    title = request.json['title']
    content = request.json['content']
    new_memo = Memo(title=title, content=content)
    db.session.add(new_memo)
    db.session.commit()
    return jsonify({'message': 'Memo Created'}), 201

# 메모 조회
@app.route('/memos', methods=['GET'])
def list_memos():
    memos = Memo.query.all()
    return jsonify([{'id': memo.id, 'title': memo.title,
                     'content': memo.content} for memo in memos]), 200
    
# 메모 업데이트
@app.route('/memos/update/<int:id>', methods=['PUT'])
def update_memo(id):
    memo = Memo.query.filter_by(id=id).first()
    if memo:
        memo.title = request.json['title']
        memo.content = request.json['content']
        db.session.commit()
        return jsonify({'message': 'Memo updated'}), 200
    else:
        abort(404, description="Memo not found")
        
# 메모 삭제
@app.route('/memos/delete/<int:id>', methods=['DELETE'])
def delete_memo(id):
    memo = Memo.query.filter_by(id=id).first()
    if memo:
        db.session.delete(memo)
        db.session.commit()
        return jsonify({'message': 'Memo deleted'}), 200
    else:
        abort(404, description="Memo not found")

※ 중요 에러 2가지!

1. curl 명령어 수행 시, 

Invoke-WebRequest : 'Headers' 매개 변수를 바인딩할 수 없습니다. "System.String" 유형의 "Content-type: application/json" 값을 "System.Collections.IDictionary" 유형으로 변환할 수 없습니다.

Invoke-WebRequest : 'Headers' 매개 변수를 바인딩할 수 없습니다. "System.String" 유형의 "Content-type: application/json" 값을 "System.Collections.IDictionary" 유형으로 변환할 수 없습니다.

라는 오류가 뜨면, vscode 에서 ctrl+shift+p 를 눌러 '명령 표시 및 실행' 을 실행 한 후,

terminal select default profile 클릭 후에 Command Prompt 를 선택하면 curl 명령어 입력 시에 해당 오류가 더이상 뜨지 않는다.

 

2. cmd 터미널에서 curl 명령어 수행 시,

curl: (7) Failed to connect to 127.0.0.1 port 5000 after 2030 ms: Couldn't connect to server

curl: (7) Failed to connect to 127.0.0.1 port 5000 after 2030 ms: Couldn't connect to server

에러가 발생한다면

이 오류는 curl 명령이 로컬 서버의 5000번 포트에 연결하지 못했음을 나타냄을 의미한다.

 

이럴 때는 터미널에 하단의 명령어를 입력하면 된다.

flask run --host=127.0.0.1 --port=5000

 

그리고 이제 curl 명령어를 통해 CRUD 기능 테스트를 해보면 된다.

◆ CRUD 기능 테스트 (curl 명령어)

- 메모 생성

curl -X POST http://127.0.0.1:5000/memos/create -H "Content-Type: application/json" -d "{\"title\":\"Test Memo\", \"content\":\"This is a test memo.\"}"

▶ 이런 오류가 뜨길래 구글링을 해보다가 못 찾아서 챗 GPT에 물어보니,

 

JSON 키 대소문자 일치: Flask 코드에서 request.json['content']를 사용하고 있지만, curl 명령에서는 "Content"로 대문자 "C"를 사용하고 있습니다. JSON 키는 대소문자를 구분하므로, 이를 "content"로 변경해야 합니다.

 

curl -X POST http://127.0.0.1:5000/memos/create -H "Content-Type: application/json" -d "{\"title\":\"Test Memo\", \"content\":\"This is a test memo.\"}"

그래서 C 를 c로 바꿔 다시 입력했더니,

잘 나온다.

 

전에도 어떤 코드가 오류나서 몇 시간을 헤매다가 해결 못하고, 다음 날에야 해결했는데,

그때도 대소문자가 문제 였었다... (글자 하나로, 그것도 대소문자 때문에 에러가 난다니, 조금은 가혹하다)

 

- 메모 조회

curl http://127.0.0.1:5000/memos

 

- 메모 업데이트

메모 조회의 결과에서 ID를 확인하여, 특정 ID의 메모를 수정할 수 있다.

(다음은 ID가 1이라고 가정)

curl -X PUT http://127.0.0.1:5000/memos/update/1 -H "Content-Type: application/json" -d "{\"title\":\"Updated Memo\", \"content\":\"Updated content.\"}"

 

- 메모 삭제

메모 조회의 결과에서 ID를 확인하여, 특정 ID의 메모를 삭제할 수 있다.

(역시 ID가 1이라고 가정)

curl -X DELETE http://127.0.0.1:5000/memos/delete/1

다음 내용

 

[파이썬] 플라스크(Flask) - 플라스크 프로젝트 - 메모앱(2)

시작에 앞서해당 내용은 , Dave Lee 지음. BJ Public 출판.내용을 토대로 작성되었습니다. 보다 자세한 사항은 해당 교재를 참고하시기 바랍니다.이전 내용(메모앱 1단계 - 3단계) [파이썬] 플라스크(Fl

puppy-foot-it.tistory.com

 

728x90
반응형

'[파이썬 Projects] > <파이썬 웹개발>' 카테고리의 다른 글

[파이썬] 플라스크(Flask) - 플라스크 프로젝트 - 메모앱(3)  (0) 2024.08.08
[파이썬] 플라스크(Flask) - 플라스크 프로젝트 - 메모앱(2)  (0) 2024.07.25
[파이썬] 플라스크(Flask) - 성능 개선 팁  (2) 2024.07.23
[파이썬] 플라스크(Flask) - 테스팅(testing)  (2) 2024.07.22
[파이썬] 플라스크(Flask) - 배포(Deployment)  (2) 2024.07.22

관련글

티스토리툴바