본문 바로가기
IT

Flask - 애플리케이션(메모앱) 만들어보기 #5

by 고래(부와 성공) 2024. 11. 19.

안녕하세요

 

오늘도 저번 시간에 이어 Flask 기반의 메모앱을 만들어 보도록 하겠습니다.

 

저번시간은 Flask-Login을 활용해서 사용자의 로그인, 로그아웃 인증부분을 구현해 봤구요,

 

오늘은 온라인 메모 프로젝트의 핵심 기능인 사용자별 메모 관리를 구현해보려고 합니다.

 

이를 위해 우선 메모 모델을 수정해서 각 메모가 특정 사용자에게 속하도록 설정을 하는 것이 필요합니다.

 

그래서 이를 바탕으로 사용자가 자신이 작성한 메모만 조회 및 관리를 할 수 있도록 애플리케이션의 라우트를 개선토록 합니다.

 

1. 사용자별 메모 관리 구현하기

사용자별 메모 관리 구현을 위해 Memo 모델에 사용자 참조를 추가해야 합니다. 이를 통해 각 메모가 어떤 사용자에게 속하는지를 식별할 수 있습니다.

 

class Memo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id')) # 사용자 참조 추가
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.String(1000), nullable=False)

    def __repr__(self):
        return f'<Memo {self.title}>'

 

이 변경으로 Memo 인스턴스는 이제 user_id  속성을 통해 User 인스턴스와 연결합니다. 이것은 사용자가 자신으 ㅣ메모를 관리하는데 아주 중요한 역할을 합니다.

 

사용자별 메모 관리를 위해 메모 조회 라우트를 수정합니다.

이제 로그인한 사용자는 자신이 작성한 메모만 볼 수 있습니다.

# 메모 조회
@app.route('/memos', methods=['GET'])
@login_required
def list_memos():
    #memos = Memo.query.all()
    #return jsonify([{'id': memo.id, 'title': memo.title, 'content': memo.content} for memo in memos]), 200
    # 로그인 사용자 자신것만 리스트 보기
    memos = Memo.query.filter_by(user_id=current_user.id).all() # 현재 로그인한 사용자의 메모만 조회
    return render_template('memos.html', memos=memos, username=current_user) # 사용자별 메모를 표시하는 템플릿 렌더링

 

이 라우트는 로그인한 사용자의 ID(current_user.id)를  사용하여 Memo 테이블에서 해당 사용자의 메모만 필터링합니다.

그런 다음, 이 메모들은 memos.html 템플릿에 전달하여 사용자가 자신의 메모를 볼 수 있도록 합니다.

 

다음 소스는 메모 생성 기능에서 현재 로그인한 사용자의 ID를 Memo 모델에 저장하여, 해당 메모가 어떤 사용자에 의해 생성되었는지 식별할 수 있도록 합니다.

# 메모 생성
@app.route('/memos/create', methods=['POST'])
@login_required
def create_memo():
    title = request.json['title']
    content = request.json['content']
    new_memo = Memo(user_id=current_user.id, title=title, content=content)  # 현재 로그인한 사용자의 ID 추가
    db.session.add(new_memo)
    db.session.commit()
    return jsonify({'message': 'Memo created'}), 201

 

 

다음 소스는 메모 업데이트 기능에서 먼저 해당 메모가 현재 로그인한 사용자의 것인지 확인 후, 메모를 업데이트 하는 기능입니다.

# 메모 업데이트
@app.route('/memos/update/<int:id>', methods=['PUT'])
@login_required
def update_memo(id):
    memo = Memo.query.filter_by(id=id, user_id=current_user.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']) 
@login_required       
def delete_memo(id):
    memo = Memo.query.filter_by(id=id, user_id=current_user.id).first()  # 현재 로그인 사용자의 메모만 선택
    if memo:
        db.session.delete(memo)
        db.session.commit()
        return jsonify({'message': 'Memo deleted'}), 200
    else:
        abort(404, description="Memo not found")

 

 

자 그럼 마지막으로 맨 처음 메모 조회시 라우팅 하는 소스 중 렌더링 할 수 있도록 설정한 memos.html 을 작성해보도록 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메모 조회 리스트</title>
    <style>
        /* CSS 스타일 시작 */
        body { font-family: Arial, Helvetica, sans-serif; }
        .memo { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; }
        .memo-title { font-weight: bold; }
    </style>
</head>
<body>
    <h1>나의 메모</h1>
    <p><a href="/memos/create">새 메모 추가</a></p>
    {% for memo in memos %}
    <div class="memo">
        <h2 class="memo-title">{{ memo.title }}</h2>
        <p>{{ memo.content }}</p>
        <a href="/memos/update/{{ memo.id }}">수정</a>
        <a href="/memos/delete/{{ memo.id }}">삭제</a>
    </div>
    {% endfor %}
</body>
</html>

 

[memos.html 소스 설명]

● 새 메모 추가 링크 : 사용자가 새 메모를 쉽게 작성 할 수 있도록 [새 메모 추가] 링크를 연결함

● 메모 목록 : {% for memo in memos %} 루프를 사용하여 사용자의 모든 메모를 나열함

● 메모 제목 및 내용 : 각 메모를 {{ memo.tilte }}, {{ memo.content }} 로 표시함

● 메모 수정 및 삭제 링크 : 각 메모에 대한 수정 및 삭제기능 구현

 

그러면 소스 수정이 되었으니 하나씩 테스트 해봅니다.

 

1) 회원가입

먼저 새 사용자 계정을 생성합니다. 아래와 같이 curl 명령을 사용하여 회원가입을 진행합니다.

 

 

 

MySQL Command 확인

 

2) 로그인

방금 생성한 계정으로 로그인하기 

로그인 성공 메시지 !!

 

 

 

3) 메모생성하기

메모 생성시 curl로 로그인했던 메시지를 참조하여 쿠키값을 넣어줘야 함

즉, Set-Cookie 이하 [session=] 부터 [; HttpOnly; Path=/] 전까지를 카피에서 쿠키값을 넣어서 실행해야 함

 

 

 

 

MySQL Command 로 확인해보기

 

 

4) 메모 조회하기

 

 

아주 잘 나오는 것을 확인할 수 있습니다.

 

5) 메모 업데이트

특정 메모를 업데이트 합니다. 마찬가지로 로그인한 쿠키값을 이용하며 메모ID를 URL에 기입해 줍니다

 

MySQL Command 확인

 

6) 메모 삭제

위에서 작성했던 메모를 삭제합니다.

 

MySQL Command 확인

 

7) 로그아웃

 

 

이렇게 해서 CRUD 및 인증 테스트를 전부 마쳤습니다.

 

그럼 다음시간에 또 뵙겠습니다.

저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

Flask - 애플리케이션(메모앱) 만들어보기 #6  (0) 2024.11.23
Fedora 리눅스 워크스테이션 버전 설치 및 nVidia 드라이버 설치방법(Fedora KDE Plasma의 문제점 발견)  (0) 2024.11.22
Flask - 애플리케이션(메모앱) 만들어보기 #4  (1) 2024.11.17
Flask - 애플리케이션(메모앱) 만들어보기 #3  (1) 2024.11.17
Flask - 애플리케이션(메모앱) 만들어보기 #2  (3) 2024.11.15

관련글

티스토리툴바