wisePocket

프로젝트 사진용 로고

ohnyong — Sat, 7 Oct 2023 09:37:12 +0900

프로젝트용 사진링크

ohnyong — Wed, 27 Sep 2023 14:08:37 +0900

[Flask] Team Project(GameInsight) 05 프로젝트 완료 및 발표 후기

ohnyong — Sat, 12 Aug 2023 22:00:12 +0900

최종적으로 팀 프로젝트는 종료되었지만 숙제들이 남아있다.

1. 느낀점

3일이라는 기간에 혼자도 아닌 모두 실력이 부족한 팀으로 진행했지만 딱 계획한대로 완성해서 기획 단계에서 그나마 일할 범위를 잘 정한것 같았다. 내 개발 환경에서 갑자기 에러가 발생해서 발표 당일 새벽 5시까지 작업하고 3시간만 자고 바로 또 추가 작업을 했다. 내 로그인 및 로그아웃 기능에 따라서 다른 팀원들의 기능에도 영향을 미치는 상황이었기 때문에 무조건 오류를 해결했어야 했고 잠을 잘 수가 없었다. 우여곡절끝에 마무리해서 기분은 좋다.

더하여 Java가 아닌 Python의 Flask Framework를 맛본것만으로 전반적인 프로젝트의 흐름을 빠르게 익힐 수 있었던 것이 큰 도움이 되었다. 이전에 Java로 바로 프로젝트를 들어가니 조금 이해도가 부족한 아리까리한 상황에서 프로젝트까지 들어가니 버거운 느낌이 있었다. 이번 Python 과정을 통해서 간략하게 프로젝트에서 흐름들을 읽기 편했고, 앞으로도 조금 쉬운 테스트들은 Python으로 진행해도 되겠다는 생각이 들었다. 그만큼 이해하기 쉬웠고 빠르게 진행할 수 있는 언어였다. 앞으로 Java로 집중하긴 하겠지만 간단한 미니 프로젝트나 테스트를 위해서 Python을 적극적으로 사용할 수 있을 것 같다. 또한 멘토링을 통해서 TypeScript, Nest.JS, Kotlin, RedisDB 등 트렌드면서 내가 주력으로 배우고 싶은 Java와 RDBMS와 조금 가까운 친척들을 알게 되었다. 하나만 깊게 판 개발자는 금방 다른 언어에 적응한다고 하는데 그 다른 언어들이 무엇인지 관심을 가지게 되었다. 이럴수록 더욱 Java 기본기를 잘 다지고 싶다는 생각을 하게 되었다. 나도 저런 트렌드에도 탑승 할 수 있는 기본 실력을 잘 갖추고 싶다.

또한 이번 프로젝트는 MongoDB를 사용했고 로컬이 아닌 Atlas Cloud환경에서 사용했다. Cloud 환경을 통해 예전 프로젝트는 로컬에서 진행했던게 얼마나 이해도가 부족했었는지 뼈저리게 느꼈다. 또한 Oracle이 아닌 MongoDB로 No-SQL의 편리함을 확실하게 느꼈고, 아직 대규모 트래픽, 대량의 파일 등을 다뤄보지는 않아서 그런지 관계형데이터베이스가 안정적이라는 것이 어떤 부분에서 그런지 아직 체감되지는 않고 있지만 일단 SQL문에서 type을 안쓰는 내가 좀 어색하게 느껴졌었다. 그만큼 편하기도 했다. 더해서 MySQL을 통해서 RDBMS의 양축인 Oracle, MySQL을 어느정도 찾아보면서 다룰 수 있을 정도로 익숙해지고 있다. 좀 더 숙달되기 위해서는 꾸준히 백준이나 프로그래머스 문제를 풀어나가야겠다. 단순히 코딩 테스트를 위함이 아니라 실제로 내가 필요한 문장들을 연습하는 경우가 많아서 꾸준히 해봐야겠다. 여기서 더 나아가 Redis같은 DB도 나중에 스스로 공부해볼 생각이 있다. 많은 기업들이 사용하는 것 같고 특히 TOSS같은 성장세를 가진 기업이 적극활용한다해서 관심을 갖고 있다. 아직 기본기를 더 다지고 응용할수있는 사람이 되어야 한다.

배포를 통해서 AWS EB로 배포하기, Docker로 배포하기, Github로 배포하기 등 다양한 방법을 시도해서 뭔가 아직 정확한 디테일 개념까지는 충분히 이해되지 않았지만 특히 내가 직접 NAS로 배포하면서 이것 저것 찾아보다보니 어느정도 큰 흐름정도는 잡은 것 같다. 이제 HTTP, 통신, DNS, DDNS, PORT 등 아직 기초적으로 부족한 이론들이 많다. 아무튼 이것 조차도 배포라는것을 해보면서 이런 이론이 필요하다고 느꼈기 때문에 무조건 익혀야 될 기본 상식이라고 생각되었다.

발표 또한 너무 많은 양을 설명하려했다. 발표를 끝내고 아차싶었다. 발표는 무엇 했는지 선보이는 것 보다 어떤 문제들을 만났고, 트러블슈팅 과정을 설명하는 것을 많은 분량을 넣었어야 했다. 기능은 거기서 거기일거다. 나는 출제자의 의도를 또 파악하지 못했고, 그저 사업계획서를 발표하는 것 처럼 기능을 팔려고 설명하고 있었다. 지금은 만났던 위와 같은 어려운점들에 대해서 부족했던것, 아쉬웠던것, 해결했던것, 해결하는 과정 등을 발표했어야 맞았다. 다음 발표들은 이런 부분들을 생각해서 분량을 조절하고 해야겠다. 사실 4시 발표인데 3시 30분에 끝났고 발표에 대한 준비가 미흡했던 점도, 내가 일정관리에 미흡했던 것이고, 트러블 슈팅을 너무 오래했던 문제가 있다. 또한 CSS를 간략하게 테마를 사용했어야 했는데 잘 알지도 못하는 프론트단을 오래 건들였던 것이 내 스케쥴을 망가트린것 같다. 다음부턴 이런 문제들이 발생 할 수 있으니 계획 부분에서부터 생각해야겠다.

2. 시연 영상

이전에 영상 편집을 해봤기 때문에 손쉽게 Premire를 이용해서 적당히 만들었다. 원래 이런 미디어 편집하면 아주 치밀하게 하는 편이지만 마치 레전드 코딩을 보여주나? 싶은 BGM을 깔았지만 사실 허접하기 그지없다. 그래도 모든 기능을 다 보여주었기 때문에 만족스럽다.

3. Notion 프로젝트 소개 페이지 배포

Notion을 개인 결제하고 적극적으로 사용하기 시작했다. 너무 효율적으로 나의 기록을 관리 할 수 있다. 부가 기능들이 너무 편리하다. 이 블로그도 이 글을 마지막으로 직접적으로 글을 업로드 하지는 않을 것이다. Notion 을 연동하는 방법을 찾을 것이다.

https://ohnyong.notion.site/GameInsight-536ac8bfbd5445f19dff65eeddd385b4?pvs=4

GameInsight

게임인사이트는 간편한 게임 관련 정보를 제공하는 서비스 페이지입니다.

ohnyong.notion.site

4. Git 협업 트리

기능별로 브랜치를 구분하자 잊지말자.

5. Slack 커뮤니케이션

슬랙 또한 잘 사용하고 있지만, 나는 디스코드 서버를 만들까 생각중에 있다. 기본적으로 화면 공유, 방송, 보이스채널이 지원되고 뭔가 채널 형식으로 다양한 기록, 공략, 개발일지 등 긴 히스토리를 남길 수 있어서 좋은 창고가 될 것 같다. 또한 그 서버 안에서 네트워크를 만들어보고 싶은 욕심도 든다. 시간이 되면 서버개설 후 꾸며보는것도 생각해봐야겠다.

6. 팀원들의 후기

팀원 모두 잘 따라와줬고 너무 합이 잘맞는 팀원들이었다. 무슨 기능을 더해보지 계속해서 욕심을 가진 사람들이 모였었고 생각하는 방향이 일치해서 더욱 추진력을 얻어서 다들 열심히 참여했었다. 개발에 대한 열정이 높았지만 제한된 시간이 아쉬웠고, 좀 더 치밀한 프로젝트를 하고 싶은 팀원들이었다.

7. 배포 링크

배포에서 상당히 문제가 있었다. 분명히 똑같은 deploy 폴더를 업로드하는데 계속해서 서버에서 문제가 나타났다. 에러 코드는 502, 더 큰 문제는 팀원 한명은 그대로 배포가 된다는 점이었다. 이건 내 환경에 대한 문제였다. ChatGPT에 소스를 다올려도 이해를 못하겠는 해결안만 제시해줬다. 천천히 다시 모든것을 진행했다. 일단 되는 팀원이 있다는건 내 문제가 100%라는 것이다. MacOS의 문제일까? 아니다. 애초에 내 로컬이 배포하는 것이 아니라 AWS 서버에서 배포되는 것이기 때문에 업로드 된 파일에 문제가 있을 것이다. 그럼 업로드 과정에서 무엇이 다를까? 우린 동일한 최종 병합 버전을 배포했는데 누군 되고 안된다. 그럼 어떤것이 문제일까? 문제는 Dependency 주입이었다. pip 패키지 매니저로 설치한 패키지가 달랐고, 나는 가장 중요한 jwt를 설치 안한 상태로 수십번 시도하고 있었던 것이다. 따라서 eb가 업로드하는 과정에서 내 로컬, 가상환경에 있는 라이브러리 패키지를 카피해서 가야하는데 그게 빠져있던 것이었다. 너무 허무하게 내 실수였다. 분명히 jwt가 설치되어서 토큰이 발급되는것으로 알고 있었는데, 어떻게 테스트는 되었던 것일까? 아직도 정확하게 모르겠다. 아마도 내가 배포에 문제가 생겨서 설치된 모든 라이브러리를 삭제하고 리스트를 넘겨받아 재설치를 진행했는데 그 마지막에 jwt를 설치 안한것으로 보여진다. 이것을 못찾았으면 나는 또 수십시간을 투자해서 별것아닌 실수를 잡고있었을 것이다. 다시 처음부터 흐름을 찾아가고 멘탈을 잡고 실수한것이 무엇일지 차분히 생각해보면서 문제를 해결해야겠다는 생각이 들었다.

http://mywebpo.eba-dpmwge7s.ap-northeast-2.elasticbeanstalk.com/mainsection

Game Insight

각종 게임의 순위정보! 전문가 및 유저 리뷰를 확인 할 수 있는 커뮤니티 페이지 입니다.

mywebpo.eba-dpmwge7s.ap-northeast-2.elasticbeanstalk.com

[Flask] Team Project(GameInsight) 04 기능 구현시 발생한 문제와 트러블슈팅 회고, 아쉬운점

ohnyong — Sat, 12 Aug 2023 21:24:31 +0900

내가 팀에서 맡은 기능 부분은 회원 가입 및 로그인이다.

기능 구현 기능들 나열보다는 기능 구현에서 발생한 오류와 새롭게 알게된 부분에 대해서 정리해보고자 한다.

1. 모듈화 미흡에 대한 아쉬움

우선 app.py가 정신 없다.
4명이 작성한 기능이 모두 app.py안에서 route를 통해 맵핑되어 있다. 보기 정신이없고 찾는데도, 보수하는데도 오래걸린다. 주석으로 대체하려했지만 생각보다 많은 코드들이 사용되면서 시인성이 좋지 않았다. 이것과 관련되서 저번에 한번 찾았던 기능인 블루프린트 객체 활용하는 것이 있었는데, 기획 과정에서 이 부분을 잊고 시작해서 아쉽게도 모듈화 하지 못했다. flask에서도 blueprint를 통해 객체화 시키는 것이 가능한 것으로 보여진다. 다음 프로젝트에서는 spring으로 객체화 시키는 것 위주로 진행하겠지만, flask도 충분히 가능하다는 것을 인지하고 flask 프로젝트에서는 모듈화를 적용시켜봐야겠다 생각했다.

이 부분에 대해서 적용된 예제를 찾아봤다. 우선적으로 프로젝트 구조는 다음과 같다.

.
|ㅡ main
|ㅡ templates
|ㅡ*.html 파일들
|ㅡ __init__.py
|ㅡ board.py
|ㅡ member.py
|ㅡ run.py

run.py에서는 main 폴더에서 app 객체를 가져와 실행만 하는 역할을 한다.
run.py
from main import app

if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=True, port=5000)
[출처] [Python Flask] #20 플라스크 모듈화, 블루프린트 Blueprint|작성자 넬티아
main 폴더의 __init__.py 코드에서 app 객체를 선언하고 각종 모듈, 데이터베이스, 블루프린트 등 값을 설정한다.
# __init__.py
from flask import Flask
from flask import request
from flask import render_template
from bson.objectid import ObjectId
from flask_pymongo import PyMongo
from datetime import datetime
# 기타 필요한 모듈 선언

app = Flask(__name__) # app 객체 선언
app.config["MONGO_URI"] = "mongodb://localhost:27017/WhisperTalk" # pymongo DB 경로 설정
salt = 'neltia' # secret key
now = str(datetime.now())
myHash = hashlib.sha512(str(now + salt).encode('utf-8')).hexdigest()
app.config['SECRET_KEY'] = myHash
mongo = PyMongo(app)


from . import board  # board.py 내용 호출
from . import member # member.py 내용 호출


app.register_blueprint(board.blueprint) # 각 블루프린트에 내용 등록
app.register_blueprint(member.blueprint)
[출처] [Python Flask] #20 플라스크 모듈화, 블루프린트 Blueprint|작성자 넬티아
board.py는 게시판의 내용을 보고, 글을 쓰고, 글 목록을 확인하고, 수정하고, 삭제하는 등 게시판과 관련된 기능만 작성한다. main에서 import *로 모든 것을 불러왔기 때문에 app 객체를 불러오게 되어 __init__.py에서 초기기화한 값들을 가져올 수 있다. /board/[라우팅 경로]로 이동하면 각 기능이 수행된다. /board/view로 가면 글의 내용을 확인한다.
# board.py
from main import *
from flask import Blueprint


blueprint = Blueprint("board", __name__, url_prefix='/board')


@blueprint.route("/view/<idx>")
def board_view(idx):
    <후략>
[출처] [Python Flask] #20 플라스크 모듈화, 블루프린트 Blueprint|작성자 넬티아
member.py는 회원가입, 로그인 같은 회원과 관련된 기능만 작성한다. 마찬가지로 main에서 *를 불러오고 Blueprint로 /member에 라우팅해 /member/join으로 가면 회원가입이 동작한다.
[출처] [Python Flask] #20 플라스크 모듈화, 블루프린트 Blueprint|작성자 넬티아
from main import *
from flask import Blueprint

blueprint = Blueprint("member", __name__, url_prefix='/member')

@blueprint.route("/join", methods=["GET", "POST"])
def member_join():
    if request.method == "GET":
        <후략>
[출처] [Python Flask] #20 플라스크 모듈화, 블루프린트 Blueprint|작성자 넬티아
블루프린트를 사용해 /board/view, /member/join처럼 라우팅이 되기 때문에 url_for() 함수로 리다이렉트를 넘길 때 다음처럼 함수만 입력해서 라다이렉트 시키면 안 되고 함수 앞에 블루프린트 객체 이름을 붙여줘야 한다.

- redirect(url_for("board.board_view", idx=idx))

- redirect(url_for("member.member_join"))

[출처] [Python Flask] #20 플라스크 모듈화, 블루프린트 Blueprint|작성자 넬티아

2. 명명 규칙, 컨벤션 지정 미흡 아쉬움

4명의 기능에 대해서 어떻게 명칭을 정할지 정확하게 구분하지 않았다. 특히 이부분은 위 모듈화가 미흡했던 부분과 연결된다.
누구는 index.html에 직접 작업하기도 했으며 나는 별도 페이지html(ex: register.html은 회원 가입 div만 포함된 페이지)를 작성하고 block을 include하는 방식을 선택했다. 이 부분을 모두 통일시켜서 알려줬으면 좀 더 깔끔한 index.html을 유지하고, 유지보수적으로도 유리하여 어느 부분을 고쳐야 하는지도 빨리 찾을 수 있었을 것이고 다른 개발자가 열어보더라도 빠르게 해당 부분을 찾을 수 있었을 것이라 생각했다. 나는 모듈화시키기를 진행하고자했으나 이 부분을 공지하고 충분히 회의를 했어야 했는데 팀장으로써 역할을 못한 부분이다. html과 script또한 마찬가지이며, style.css까지 모듈화 시켰지만 각 기능마다 개인마다 만들었어야 되는 것을 정확히 인지 하지 못했던 점이 아쉽다. 다음 프로젝트에서는 충돌을 최대한 막을 수 있도록 컨벤션에 신경써야겠다고 생각했다.
파일이 제각각이다..

3. 비밀번호 암호화 방법

flask에서는 hashlib이라는 라이브러리를 통해서 비밀번호 암호화를 할 수 있다.
회원 가입시에도 해야되고 로그인 시 검증을 위해서도 동일하게 해쉬로 검색해야 한다. 이 부분에 대해서 추가적으로 찾아보니 해싱은 단방향 암호화 알고리즘이므로 원래의 문자열로 복구할 수는 없다고 한다. 따라서 검증에서도 반드시 해싱된 값끼리 검증을 하도록 설정해야 한다.
  # 회원가입 때와 같은 방법으로 pw를 암호화합니다.
    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
https://docs.python.org/ko/3/library/hashlib.html

hashlib — Secure hashes and message digests

Source code: Lib/hashlib.py This module implements a common interface to many different secure hash and message digest algorithms. Included are the FIPS secure hash algorithms SHA1, SHA224, SHA256,...

docs.python.org

4. JWT 토큰을 이용한 로그인 구현

예전에 세션을 통해서 구현했었는데, 쿠키로 한다고? 어떤 방식인지 궁금했다. 배우기로는 쿠키는 보안성이 취약하다고했는데 그걸 보완한 부분인가 의심되기도했다.

우선 JWT 토큰의 흐름을 내 코드를 분해하며 분류해보았다.
1. 사용자가 id와 password를 입력하여 로그인을 시도합니다.
@app.route('/api/login', methods=['GET', 'POST'])
def api_login():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']
    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

    # id, 암호화된pw을 가지고 해당 유저를 찾습니다.
    result = db.user.find_one({'user_id': id_receive, 'user_password': pw_hash})
2. 서버는 요청을 확인하고 secret key(내가'서버'가 정해둬야 함)를 통해 Access token을 발급합니다.
 if result is not None:
        # JWT 토큰에는, payload와 시크릿키가 필요합니다.
        # 시크릿키가 있어야 토큰을 디코딩(=풀기) 해서 payload 값을 볼 수 있습니다.
        # 아래에선 id와 exp를 담았습니다. 즉, JWT 토큰을 풀면 유저ID 값을 알 수 있습니다.
        # exp에는 만료시간을 넣어줍니다. 만료시간이 지나면, 시크릿키로 토큰을 풀 때 만료되었다고 에러가 납니다.
        payload = {
            'user_id': id_receive,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=200)
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
3. JWT 토큰을 클라이언트에 전달 합니다.(브라우저)
        # token을 줍니다.
        return jsonify({'result': 'success', 'token': token})
    else:
	return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})
-------로그인 완료-----아래는 로그인 상태인 경우-----------

4. 클라이언트에서 API 을 요청할때(로그인 상태) 클라이언트가 Authorization header에 Access token을 담아서 보냅니다.
@app.route('/api/logined', methods=['GET'])
def api_valid():
    token_receive = request.cookies.get('mytoken')
5. 서버는 JWT Signature를 체크하고 Payload로부터 사용자 정보를 확인해 데이터를 반환합니다.
   try:
        # token을 시크릿키로 디코딩합니다.
        # 보실 수 있도록 payload를 print 해두었습니다. 우리가 로그인 시 넣은 그 payload와 같은 것이 나옵니다.
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        print(payload)
6. 클라이언트의 로그인 정보를 서버 메모리에 저장하지 않기 때문에 토큰기반 인증 메커니즘을 제공합니다.
       # 여기에선 그 예로 닉네임을 보내주겠습니다.
        userinfo = db.user.find_one({'user_id': payload['user_id']}, {'_id': 0})
        return jsonify({'result': 'success', 'user_id': userinfo['user_id'], 'user_name': userinfo['user_name'],  'user_type': userinfo['user_type']})
    except jwt.ExpiredSignatureError:
        # 위를 실행했는데 만료시간이 지났으면 에러가 납니다.
        return jsonify({'result': 'fail', 'msg': '로그인 시간이 만료되었습니다.'})
    except jwt.exceptions.DecodeError:
        return jsonify({'result': 'fail', 'msg': '로그인 정보가 존재하지 않습니다.'})
JWT 의 주요한 이점은 사용자 인증에 필요한 모든 정보는 토큰 자체에 포함하기 때문에 별도의 인증 저장소가 필요없다는 것입니다.
분산 마이크로 서비스 환경에서 중앙 집중식 인증 서버와 데이터베이스에 의존하지 않는 쉬운 인증 및 인가 방법을 제공합니다.
개별 마이크로 서비스에는 토큰 검증과 검증에 필요한 비밀 키를 처리하기위한 미들웨어가 필요합니다. 검증은 서명 및 클레임과 같은 몇 가지 매개 변수를 검사하는 것과 토큰이 만료되는 경우로 구성됩니다.
토큰이 올바르게 서명되었는지 확인하는 것은 CPU 사이클을 필요로하며 IO 또는 네트워크 액세스가 필요하지 않으며 최신 웹 서버 하드웨어에서 확장하기가 쉽습니다.

JSON 웹 토큰의 사용을 권장하는 몇 가지 이유는 다음과 같다.

JWT 장점

URL 파라미터와 헤더로 사용

수평 스케일이 용이

디버깅 및 관리가 용이

트래픽 대한 부담이 낮음

REST 서비스로 제공 가능

내장된 만료

독립적인 JWT

JWT 단점

토큰은 클라이언트에 저장되어 데이터베이스에서 사용자 정보를 조작하더라도 토큰에 직접 적용할 수 없습니다.

더 많은 필드가 추가되면 토큰이 커질 수 있습니다. ==> 클라이언트에서 부담이 커진다는 이야기 같다. =

비상태 애플리케이션에서 토큰은 거의 모든 요청에 대해 전송되므로 데이터 트래픽 크기에 영향을 미칠 수 있습니다.

5. JWT, 그럼 Cookie와 Session과 또 뭐가 다른건가?

https://velog.io/@znftm97/JWT-Session-Cookie-%EB%B9%84%EA%B5%90-sphsi9yh

나와 정확히 같은 고민을하는 블로그를 찾았다. 나는 JWT가 결국 Session인가 했지만 생각해보니 Cookie처럼 클라이언트에 데이터를 남겼었다. 여기서 의문이 되었던 것이 이건 Session과 Cookie 두방식이 합쳐진 어떤 라이브러리인가? 생각했지만 또 생각해보니

현재 프로젝트에서 session은 사용 할 줄 알고 import했었지만 사용하지도않았었고, 패키지매니저를 통해 설치조차 안한 상태였다. 그럼 JWT는 뭔가? 쿠키인가? 그거 위험한거 아닌가? 라는 생각을 했었다. 따라서 JWT가 뭔지, Session, Cookie와 다른 점이 무엇인지 잘설명되있는 페이지를 찾아야 할 필요성을 느꼈다. 위 참고 링크는 내가 충분히 이해하고 내 생각대로 그려가며 정리를 하고 나의 글로 다시 작성하고자 한다. 생각해보니 전에도 카카오 로그인을 구현하는데 Oauth토큰을 받아서 진행되었다. 이것과 관련있지 않을까 생각해본다.

우선, 정리해야 될 내용, 아래 내용들이 무엇을 의미하는지, 차이점, 장단점 등은 공부해야된다.

1. Cookie

2. Cookie + Session

3. JWT

[Flask] Team Project(GameInsight) 03 전반적인 프로젝트 관리에 대한 회고, 아쉬운점

ohnyong — Sat, 12 Aug 2023 11:51:46 +0900

프로젝트를 어제 종료했고, 아쉬운 부분도 많이 남아있다.

전날 밤새 오류와의 싸움때문에 잠을 못자서 오늘 아침부터 회고를 작성하고자 한다. 팀 프로젝트는 종료되었지만, 너무 아쉬운 부분이 많다. 더 하고 싶다. 이대로 보내주기가 싫다. 너무 기간이 짧았다. 하지만 다음 프로젝트에서 이 회고들을 참고하고 더욱 발전된 완성도 높은 프로젝트를 완료하고 싶다. 무조건 그래야 한다.

https://youtu.be/Szj9XZU_7gE

우선 내가 맡은 부분은 다음과 같이 요약 할 수 있다.

전체적인 프로젝트의 아이디어 구체화, 서비스 기획

팀원과 회의를 통해 나온 아이디어로 부터 서비스 레퍼런스 탐색 및 기능 제안
일정 및 기초 컨벤션, 그라운드 룰 지정 및 공지
로드맵 작성은 생략했지만 간략화 시킨 일정에 대한 공지(짧은 기간이기에 시간여유 없음)

프론트엔드 부분을 담당

HTML 표준 레이아웃 구성(Header-Nav-Content(Section-Aside)-Footer 형태)
부트스트랩 활용하여 시간 대비 빠르게 디자인 구성을 완성하고 기능 구현에 집중 할 수 있도록 유도

Github 원격 저장소를 이용한 형상 관리를 팀원에게 소개 및 형상 관리 마스터 역할

Git과 Github 에 대한 설정과 팀원들에게 지시한 과정은 다음과 같다.
- 팀원들에게 기초적인 Git 지식이나 사용 방법을 인지하고 있는지 파악
- 이해도를 확인하기 위하여 테스트용 원격 저장소를 생성, 로컬과 연결 시켜두었으며
- 팀원들에게 테스트 원격 저장소에 "Push"해서 "Merge"요청하기를 지시
- Pull-Request 생성과 Master를 관리하는 나와 Pull-Request 요청자 팀원과의 코드 리뷰 및 병합 후 테스트 확인
- 실제 프로젝트 진행 할 로컬 Master 저장소 생성 및 원격 저장소 생성 및 연결 후
- 기초 개발 환경 구축 버전 생성(초기 환경 설정, README, 기초 dependency 임포트 문 작성, 기초 flask 이니시부분 작성
- 팀원 Collaborator 초대
- 위 기초 배포 개발 환경 구축 버전을 팀원들에게 클론 및 Branch 생성 지시
- 나 또한 Master 보호를 위하여 작업 Branch 생성
- 이후 개인 기능 구현 위치 설명, 공통 부분에 대한 충돌 가능성에 대한 원인과 이유, 그리고 작업에서 유의해야 할 부분들을 공지
- 개인 작업 시작
- 개인 작업 완료 후 Commit Message 작성 요령(컨벤션) 통일의 필요성과 git log -oneline으로 보여지는 화면 설명
- 기능 구현 완료 후 프로젝트 병합과 충돌 과정에 대한 코드 리뷰, 기타 로직에 대한 커뮤니케이션 진행, 병합 충돌 부분 해결
- 1차 최종 버전 병합 후 AWS EB배포

아이디어 회의 시간 이후 곧바로 내가 먼저 꺼낸 이야기는 이것이다.

깃허브 사용해보신분? Push를 해보신분?
아니라면 부끄러워 하지 마시고 지금 빠르게 알려주세요. 바로 알려드릴게요.

특히 Git, Github 활용 과정은 협업에서 필수적이었기 때문에 참여를 하고 안하고를 떠나서 팀원들의 피드백이 필요했다. 백업용으로만 로컬에서만 사용해본 사람도 있기 때문에 Push까지 해본 경험이 있어야 정확하게 판단 할 수 있었다.

사용해보지 못한 팀원들이 있었기 때문에 팀원들에게 쉽게 이해시키려고 또한 빠르게 이해시키려고 노력했다. 분명히 입문 사용법은 알려 주더라도 왜 이렇게 하지라는 물음이 생길 부분에 대해서 설명해주었다.

1. 프론트엔드 입장에서의 아쉬운 부분

기초적인 CSS와 부트스트랩을 사용했다.
하지만 부트스트랩 테마를 사용했으면 더 쉽게 다가갔을 수 있었을텐데, 그 부분을 직접 구성하려다보니 시간을 많이 사용했다.
생각해보니 이전 프로젝트에서도 사용했엇는데 왜 HTML을 직접 작성했는지 나도 내가 이해가 안된다.

https://startbootstrap.com/
https://themewagon.com/theme-framework/bootstrap-5/
https://bootstrapmade.com/

물론 다시 한번 기초 HTML을 작성해보고 구조를 다시 생각해보고 검색해보면서 도움은 되었다. 하지만 시간적 제약이 있는 경우였고, 디자인에 자신없던 상황이면 최대한 경험을 활용했으면 좋았을 텐데 기획 과정에서 이 부분을 놓친 것이 아쉽다.

다음 팀 프로젝트에서는 Front-end 담당자와 디자이너가 붙겠지만 내가 혼자 구현하고자하는 개인 프로젝트의 경우 이 테마들을 잘 활용하면 나 또한 깊은 이해도가 없어도 충분히 깔끔한 홈페이지를 구성 할 수 있을것이라 믿는다.

또한 이 블로그의 소스를 일부 수정하면서 느낀것들이지만 백엔드를 공부하더라도 프론트엔드에 대한 이해도가 필요했다. 어떤 강의에서들은 적 있다. "관리자 페이지는 백엔드의 꽃" 백엔드라해서 프론트엔드 전혀 안하는게 아니다. 기본적으로 관리자 페이지는 만들 줄 알아야 되고 그 관리자 페이지를 사용하는 사람도 사람이다. 사용성을 생각해야 한다는 것이고 그것은 UX/UI에 대한 고려도 들어가야 한다는 것이다. 이 개발블로그는 사실 누가 보는지 상관없다. 결국 가장 많이 들어오는 사람은 "나"다. 관리자란 말이다. 관리자 페이지가 모바일에서도, 어느 웹에서도 잘 보이게 해야 내가 글쓰기가 편하다. 그래서 나는 HTML을 조금 뜯어고치면서 "나"의 만족 = 관리자의 만족을 위해서 소스를 살펴보았고 문제들을 고쳐나가보았다.

또한 Notion 페이지를 만들어보면서 Notion에서 얼마나 많은 사용자 고려가 있었는지도 파악 할 수 있었다. Notion페이지 만드는것도 아주 재밌는 일이라 블로그를 옮겨볼까 생각중이다. 내부적으로 Database도 쉽게 구성 할 수 있고, 갤러리, 임베드 등 너무 많은 기능들이 편리하다. 일단 반응형으로 잘 작동한다는 것이 얼마나 많은 기능들이 숨겨져있는지 존경스러울 뿐이다. Notion같은 프로그램 만들 수 있을까? 만들고 싶다.

특히 @Media라는 어노테이션을 사용하는것에 관심이 있었다. 초급 CSS과정에선 배우지 않은 부분이었는데 반응형 웹과 관련된 태그였다. 마치 java의 if문처럼 활용되서 나도 이해하는데 편리했고, 실제로 적용시켜보는 테스트를 블로그를 통해서 진행해봤었다. 나는 건축과 출신이라 그런지 생각보다 디자인 감수성이 높지만 CSS의 높은 이해도가 부족한게 아쉽다. 지금은 기능 구현의 기본기에 충실할 때지만 시간이 되면 프론트엔드와 관련된 지식들도 꾸준히 사이드로 겸비할 필요성을 느꼈다.

2. 형상 관리 관리자로써의 아쉬운 부분

아직도 아쉬운 점은 "기능별" Branch 생성이다. 아직까지도 day_1, day_2처럼 전체적으로 영향을 주는 형상관리를 진행하고 있었다. 이는 당장 급하게 형상관리에 대하여 팀원들에게 알려주는데 급급해서 해당 부분을 인지했음에도 버릇처럼 실수해버렸다. 물론 팀원별로 애초에 기능을 구분했기 때문에 이름으로 구분하는것 자체가 그 기능에 대한 branch생성으로 우회해서 생각 할 수 있지만 근본적으로 좀 더 "branch의 목적"에 맞게끔 사용했어야 했다. 나 또한 Login, Logout, Join 처럼 기능을 분리해서 관리했어야 했다. 다음 프로젝트에서는 무조건 "기능"에 따라서 Branch를 관리해야 겠다.
Branch를 이렇게 하지 마라! 기능으로 구분하자!! Branch명 = 기능!! ex) Login Branch를 Merge하면 Master에 Login 기능이 생기는 것이다!

아직도 궁금한 점은 실무자들이 현업에서 이러한 형상 관리 부분을 어떻게 진행하는지, Pull-Request에 대한 메시지를 어떻게 작성하는지 실제 실무자들의 진행 과정을 어깨넘어로 보고 싶은 궁금증이 생겼다.

인터넷으로 찾아보면 회사마다 다르다, 어느정도 템플릿은 있다. 뭐 이정도의 답변이 많아서 어떤 것이 맞는 정보인지 분별이 되지 않았다.

주변에 있는 멘토님들을 잘 활용해서 실제 프로젝트 Github를 또는 가장 유사한 프로젝트의 원격 저장소의 커뮤니케이션 모습을 참고할만한 곳을 소개받아야 겠다.

특히 실무에서 사용되고 있는것을 알아보고 싶은 것은 다음과 같다.

Branch의 기준
- 이런 강의 프로젝트에서는 대부분 그냥 매일 저장용으로 사용되는데, 예전부터 인터넷에 찾아보았던 내용과 멘토님의 말씀에 따르면 "기능 구현" 에 따라 나눈다고 알고 있다. 그 기능의 범위가 어느정도인지 실무자들의 Github를 보고 싶다.

Commit Message의 형태 및 Commit 시점
- 지금은 배우는 과정이기 떄문에 쓸모없는 메시지가 많이 들어가고 있다. 실제로는 어떤 내용들이 들어가는지, 그럼 부족한 내용들은 세부 설명에다 기록하긴 하는데, Commit Message의 범위가 어느정도인지 알고 싶고, 초과하는 범위는 따로 기록을 하는 것인지 궁금하다.

Pull-Request와 Merge의 진행
- 단순히 내가 하고 있는 방법은 각 브랜치(나 및 팀원) 들이 Commit 후 Push를 진행하면, Github에서 해당 Branch로부터 변동사항이 파악되면서 'Create Pull-Request' 가 생성된다. 이 말은 Master(형상 관리자)인 내가 Pull-Request를 하고 있는 상황인데,
이 Create Pull-Request는 작업자(요청자) 가 해야 하는 것인지, 그리고 말그대로 요청문이기 때문에 팀원이 해야 되는 것이 맞다고 생각한다. 그 이전에 단순 Collaborator로 들어와도 Github에 접속하면 Master에 접근 할 수 있고 나 말고도 초대자들도 Default로 Master Branch를 잡고 있던데, Collaborator의 Master 접근을 막을 수 있는지, 또한 팀원에게는 Pull-Request 요청 권한만 줄 수 있는지, Master만이 그 요청을 수락하고 Merge를 진행 할 수 있는지 이런 세부적인 사항이 궁금하다.

Master의 Merge이후
현재는 1개의 프로젝트에 기록용으로 사용하기 때문에 위에서 언급한 Branch를 기능 보다는 팀원의 이름으로 한다던지 이런식인데, 기능으로 구분한다면 (ex: Branch1 name : Login, Branch2 name : Logout, Branch3 name : Join)

https://ohnyong.notion.site/GameInsight-536ac8bfbd5445f19dff65eeddd385b4?pvs=4

GameInsight

게임인사이트는 간편한 게임 관련 정보를 제공하는 서비스 페이지입니다.

ohnyong.notion.site

https://www.youtube.com/watch?v=Szj9XZU_7gE

[DevTalk] AWS EB.. EC2?

ohnyong — Sat, 12 Aug 2023 08:14:01 +0900

https://fopman.tistory.com/m/22

[Flask] Team Project(GameInsight) 02 기능 구성 중 오류 발생 및 해결 과정

ohnyong — Thu, 10 Aug 2023 09:12:27 +0900

Login 관련 기능 중 에러 해결

아직 app.py에 API를 작성하고 있는 중에 오류가 발생했다.

AssertionError: View function mapping is overwriting an existing endpoint function: login

검색을 통해서 확인하니 하나의 파일에 동일한 함수가 두개 선언 된 경우 발생 할 수 있다고 한다.

1. 코드 살펴보기

라우트에 중복된 URL로 보내는 것이 있는지 확인해보았다.

# 라이브러리 임포트
# Flask Framework
# view페이지 렌더링을 위한 render_template 메서드
# 요청 데이터에 접근 할 수 있는 flask.request 모듈
# dictionary를 json형식의 응답 데이터를 내보낼 수 있는 jsonify 메서드
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

# MongoDB사용을 위한 pymongo와 certifi 임포트
# MongoDB(Atlas Cloud)를 사용하기 위한 pymongo 임포트
from pymongo import MongoClient
import certifi
# DB 커넥션 구성
ca = certifi.where()
client = MongoClient('mongodb+srv://ohnyong:test@cluster0.lu7mz8j.mongodb.net/?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.gameinsight

# 웹 크롤링을 위한 임포트
import requests
from bs4 import BeautifulSoup

# 로그인 및 회원가입 부분을 위한 라이브러리 임포트 추가
from flask import session, redirect, url_for;
# 비밀번호 암호화를 위한 Hashlib 사용
# JWT 패키지를 사용합니다. (설치해야할 패키지 이름: PyJWT)
import jwt
# 토큰에 만료시간을 줘야하기 때문에, datetime 모듈도 사용합니다.
import datetime
# 회원가입 시엔, 비밀번호를 암호화하여 DB에 저장해두는 게 좋습니다.
# 그렇지 않으면, 개발자(=나)가 회원들의 비밀번호를 볼 수 있으니까요.^^;
import hashlib
# JWT 토큰을 만들 때 필요한 비밀문자열입니다. 아무거나 입력해도 괜찮습니다.
# 이 문자열은 서버만 알고있기 때문에, 내 서버에서만 토큰을 인코딩(=만들기)/디코딩(=풀기) 할 수 있습니다.
SECRET_KEY = 'inyongkim'

# ------------크롤링 PATH 부분----------------------------------------------------------------------------------------------------------------------

# 웹 크롤링 URL 지정과 requests를통한 데이터 가져오기->bs를 통한 파싱
# URL = "https://kworb.net/spotify/country/us_daily.html"
# headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
# data = requests.get(URL, headers=headers)
# soup = BeautifulSoup(data.text, 'html.parser')

# ------------크롤링 PATH 부분----------------------------------------------------------------------------------------------------------------------

# "localhost:5001/" URL요청에 메인 뷰 페이지 반환 응답
@app.route('/')
def home():
   token_receive = request.cookies.get('mytoken')
   try:
      payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
      user_info = db.user.find_one({"user_id": payload['user_id']})
      return render_template('index.html', nickname=user_info["name"])
   except jwt.ExpiredSignatureError:
      return redirect(url_for("login", msg="로그인 시간이 만료되었습니다."))
   except jwt.exceptions.DecodeError:
      return redirect(url_for("login", msg="로그인 정보가 존재하지 않습니다."))

# ------------기능 구현 함수 부분----------------------------------------------------------------------------------------------------------------------

# 회원가입 양식을 보여주는 부분
@app.route('/joinForm')
def user_Join():
   return render_template('joinForm.html')

# 로그인 페이지를 보여주는 부분
@app.route('/loginForm')
def login():
    msg = request.args.get("msg")
    return render_template('loginForm.html', msg=msg)

# 회원가입 기능 API
@app.route("/api/join", methods=["POST"])
def join():
    user_name_receive = request.form['user_name_give']
    user_id_receive = request.form['user_id_give']
    user_password1_receive = request.form['user_password1_give']
    user_postcode_receive = request.form['user_postcode_give']
    user_address1_receive = request.form['user_address1_give']
    user_address2_receive = request.form['user_address2_give']
    user_email_receive = request.form['user_email_give']
    user_type_receive = request.form['user_type_give']

   # PW 암호화
    pw_hash = hashlib.sha256(user_password1_receive.encode('utf-8')).hexdigest()

   # user_num 고유번호 추출 방법
    user_list = list(db.user.find({}, {'_id': False}))
    user_num = len(user_list) + 1

    doc = {
        'user_num': user_num, # 추후 특정 유저를 찾기 위해 'num' 이라는 고유 값 부여
        'user_name' : user_name_receive, # 이름
        'user_id' : user_id_receive, # 아이디
        'user_password1' : pw_hash, # -------- 암호화된 비밀번호(Hashlib)
        'user_postcode' : user_postcode_receive, # 우편번호
        'user_address1' : user_address1_receive, # 주소1(시군구)
        'user_address2' : user_address2_receive, # 주소2(상세주소)
        'user_email' : user_email_receive, # 이메일
        'user_type' : user_type_receive, # 일반사용자 or 전문가
    }
    db.user.insert_one(doc)
    # [POST-7] insert가 완료되었으니 완료 메시지를 반환한다.
    return jsonify({'msg': 'POST 연결 완료!'+'회원가입 완료!'})
    

# 로그인 기능 API
# id, pw를 받아서 맞춰보고, 토큰을 만들어 발급합니다.
@app.route('/api/login', methods=['POST'])
def login():
    user_id_receive = request.form['user_id_give']
    user_password1_receive = request.form['user_password1_give']

   # PW 암호화
    pw_hash = hashlib.sha256(user_password1_receive.encode('utf-8')).hexdigest()

    # id, 암호화된pw을 가지고 해당 유저를 찾습니다.
    result = db.user.find_one({'id': user_id_receive, 'pw': pw_hash})

    # 찾으면 JWT 토큰을 만들어 발급합니다.
    if result is not None:
        # JWT 토큰에는, payload와 시크릿키가 필요합니다.
        # 시크릿키가 있어야 토큰을 디코딩(=풀기) 해서 payload 값을 볼 수 있습니다.
        # 아래에선 id와 exp를 담았습니다. 즉, JWT 토큰을 풀면 유저ID 값을 알 수 있습니다.
        # exp에는 만료시간을 넣어줍니다. 만료시간이 지나면, 시크릿키로 토큰을 풀 때 만료되었다고 에러가 납니다.
        payload = {
            'user_id': user_id_receive,
            'expiry_time': datetime.datetime.utcnow() + datetime.timedelta(seconds=5)
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

        # token을 줍니다.
        return jsonify({'result': 'success', 'token': token})
    # 찾지 못하면
    else:
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})

# [유저 정보 확인 API]
# 로그인된 유저만 call 할 수 있는 API입니다.
# 유효한 토큰을 줘야 올바른 결과를 얻어갈 수 있습니다.
# (그렇지 않으면 남의 장바구니라든가, 정보를 누구나 볼 수 있겠죠?)
# 
@app.route('/api/userinfo', methods=['GET'])
def api_valid():
    token_receive = request.cookies.get('mytoken')

    # try / catch 문?
    # try 아래를 실행했다가, 에러가 있으면 except 구분으로 가란 얘기입니다.

    try:
        # token을 시크릿키로 디코딩합니다.
        # 보실 수 있도록 payload를 print 해두었습니다. 우리가 로그인 시 넣은 그 payload와 같은 것이 나옵니다.
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        print(payload)

        # payload 안에 id가 들어있습니다. 이 id로 유저정보를 찾습니다.
        # 여기에선 그 예로 닉네임을 보내주겠습니다.
        userinfo = db.user.find_one({'user_id': payload['user_id']}, {'_id': 0})
        return jsonify({'result': 'success', 'user_name': userinfo['user_name']})
    except jwt.ExpiredSignatureError:
        # 위를 실행했는데 만료시간이 지났으면 에러가 납니다.
        return jsonify({'result': 'fail', 'msg': '로그인 시간이 만료되었습니다.'})
    except jwt.exceptions.DecodeError:
        return jsonify({'result': 'fail', 'msg': '로그인 정보가 존재하지 않습니다.'})

# ------------기능 구현 함수 부분------------------------------------------------------------------------------------------------------------------------

# app이라는 메인 함수 
if __name__ == '__main__':
    app.run('0.0.0.0', port=5001, debug=True)

라우트로 URL 응답을 하는 부분은 다음과 같다

@app.route('/')def home(): #메인페이지 반환
@app.route('/joinForm') def user_Join(): #회원 가입 페이지 반환
@app.route('/loginForm') def login(): #로그인 양식 페이지 반환
@app.route("/api/join", methods=["POST"]) def join(): #회원가입 POST 응답(DB insert) 기능 및 결과 반환
@app.route('/api/login', methods=['POST']) def login(): #로그인 POST 응답(DB read) 및 JWT토큰 생성 및 반환
@app.route('/api/userinfo', methods=['GET']) def api_valid(): #로그인 시 로그인 유저를 확인(특정)하는 기능(전용 메뉴 이용 등에 활용)

로그인과 관련된 오류 메시지였기 때문에 위 셋 중 하나가 문제인 것이다.

살펴보면 로그인 양식 페이지 반환과 로그인 POST응답, 토큰 생성 부분의 함수 이름이 "def login()"으로 동일한 것으로 체크되었다. 해당 부분을 구분하여 다시 작성해 보았다. 또한 함수명을 통일 시키고 명칭으로부터 페이지 반환과 기능을 어느정도 구분하여 파악 할 수 있도록 위해서 user_Join()의 경우 user_joinForm()으로 수정, 잘못 기록된 def login()의 경우 user_loginForm()으로 수정하여 통일했다.

역시나 해당 부분 함수 명칭을 바꿔서 다시 서버를 시작하니 정상적으로 가동되는 것을 확인했다.

프로젝트 소개와 팀 소개는 다음 노션 페이지에서 확인 할 수 있습니다.

https://ohnyong.notion.site/GameInsight-536ac8bfbd5445f19dff65eeddd385b4?pvs=4

GameInsight

게임인사이트는 간편한 게임 관련 정보를 제공하는 서비스 페이지입니다.

ohnyong.notion.site

해당 프로젝트는 아래 깃을 통해 업데이트되고 있습니다.

https://github.com/yzpocket/GameInsight

GitHub - yzpocket/GameInsight

Contribute to yzpocket/GameInsight development by creating an account on GitHub.

github.com

[Flask] Team Project(GameInsight) 01 (프로젝트 기획 과정 및 개요)

ohnyong — Wed, 9 Aug 2023 23:55:25 +0900

팀 프로젝트 3일안에 간단한 서비스 페이지 완성해보기

팀장으로 자처해서 팀원들에게 여러 의견을 주도적으로 받고 본인을 포함한 인적 자원의 가능성을 체크했다. 간단한 회의를 통해 팀원들이 보여준 이해도와 자신감으로 우리 팀은 4명으로 충분히 할 수 있다고 판단되는 범위를 정했다.

개발 기간은 3일이지만 사실상 아이디어 창출을 위한 브레인스토밍 반나절, 문서화 2~3시간을 사용했고, 나는 팀장으로써 이전 경험들을 토대로 좀 더 원활한, 안정적인 프로젝트 시작을 위해서 공통 환경 구축, 그라운드 규칙, 개요, 커뮤니케이션 툴, 협업 툴을 체크하고 미숙한 부분이 있으면 핵심적인 부분의 사용법과 간단한, 알기 쉽도록 안내하느라 반나절이 다 지나갔다. 추후 기초적인 발표 준비와 배포 과정까지 생각해야 되서 사실상 3일이 아니라 하루만에 작업을 완료해야 되는 상황이다. 하지만, 비교적 짧은 기간에 각자 맡은 부분을 최선을 다해서 구현해보자는 목표를 가졌다. 또한 아이디어 창출, 기획, 배포, 정리 까지도 개발의 한 부분이다. 사실상 맘편히 쉽게 연습 할 수도 있었지만 우린 마치 마감일이 코앞에 다가와서 프로젝트를 단숨에 끝내야 되는 상황을 스스로 자처한 것이다.

다소 무리해보이는 스케쥴을 가능하게 하기 위해서는 기획 부분에서 개발 부분을 고려할 뿐만 아니라, 인적 자원의 능력, 물리적인 시간, 구현 가능성을 빠르게 판단해야 했다. 구현할 기능의 범위를 파악해야 했고 개인 부분의 범위는 알아서 정해야 한다. 모두 각자 범위를 선택 할 수 있도록 선택권을 주었으며 이번 미니 프로젝트로 개개인에게 좋은 경험이 되었으면 하는 바람도 있었다.

1. 아이디어 회의

공통 분모 찾기

프로젝트의 주제를 정하는 것이 가장 오래 걸릴 수도, 나중에 후회 할 수도, 잘못 선택 할 수도 있는 중요한 부분이다. 실제로 시간은 소모되지만 개발 중 피보팅하기 위험부담이 크기 때문에 신중하게 결정해야 한다.

우리는 공통 관심사를 찾기 시작했다. 좋아하는것? 주변에서 서비스를 본것? 해보고 싶은것? 팀장으로써 적극적으로 아이디어를 발굴하기 위한 질의를 시작했고, 팀원들 모두 적극적으로 본인의 의견을 제시했다.

우리가 정한 관심사와 프로젝트의 주제는 게임 정보로 정해졌다.
남자들로 구성되서 사실상 공통된 주제로 이야기 할 수 있는 것은 정해져있다. 게임, 군대, 이성. 나는 비교적 다양한 취미를 가지고 있지만 다른 팀원들의 이해도가 부족 할 수 있어서 그들의 관심사를 이끌어내고 내것과 비교했다.

나는 수년간 해외 게임 인사이트 분석 작가로 활동했기 때문에 이미 게임 분석과 관련된 정보들을 수없이 접해왔기 때문에 해당 주제로 선택 된 것에서 다양한 아이디어를 빠르게 확장 시킬 수 있었다. 물론 일적으로 접근 안하더라도 남성이라면 기본적인 게임에 관심이 있는 가능성이 높고 관련된 정보들도 찾아보는 것에 익숙할 것이었다. 다행히 모든 팀원이 관심사가 있었다. 또한 이미 다양하게 정보들이 제공되는 레퍼런스가 많다. 나는 Metacritic과 Steam, SteamChart, 한국의 GameMeca, Inven과 같은 게임 언론을 소개했으며 우리가 만들 수 있는 기능들을 정리해봤다.
아이디어를 개연성있고 빠르게 연결 시킬 수 있는 마인드맵(Gitmind)

2. 협업 준비를 위한 내부 테스트 진행

Git, Github의 미니멈 테스트와 기본기 테스트
프로젝트를 빠르게 "착수" 해야 한다. 전처럼 강의를 보는 시간도 아니며, 연습문제를 푸는 시간도 아니다. 나는 우선 팀장으로써 최대한 빠른 착수를 위해서 기초적인 Git 사용 상태를 체크했으며, Github를 통해 내가 생성한 원격 리포에 푸시를 해보라는 실습을 던져주었다. 10분내로 모든 팀원들로부터 Branch가 각자 생성되었으며, 원격 저장소에 Push되어 Pull-Request 방식으로 Merge 할 수 있는 상황이 나타났다. 일부 이해도가 부족한 부분은 빠르고 쉽게 설명하고 간단한 오류를 해결했다.

3. 계획을 기반으로 아이디어 구체화, 실질적 기획단계로 넘어가기 팀 소개 페이지 작성

Google Slide를 통한 화면 설계
실질적인 기획 단계로 빠르게 넘어가야 한다. 간단한 프로젝트기 때문에 DB및 비지니스 로직 플로우 차트는 개요에서 정리하기로 하고 팀 소개 페이지에서 약식으로 API소개 페이지를 작성 할 때 DB 설계등을 진행하는 방식으로 추진했다. 직접 개발 작업과도 연관 되는 화면 설계는 빠르고 자유롭게 화면 구상을 그려낼 수 있는 PPT를 활용했다. 이 부분을 혼자 하려니 너무 시간이 오래걸렸는데, 팀원의 제안을 통해서 Google Slide에서 동시 작업을 진행했다. 따라서 나는 팀원들에게 기초적인 HTML 표준 레이아웃이라는 것에 대해서 설명해주고 이것을 지향하는 쪽으로 페이지를 구성해보자는 의견을 제시했다. 이해도가 높아진 팀원들로부터 공통적인 레이아웃을 토의하여 구성하고 이후 각자 파트에 대해서 화면 설계를 진행 했다.

프로젝트 소개 페이지(Notion) 제작
기획을 마무리 했으면 빠르게개요를 작성해서 프로젝트 전체적인 로드맵을 확인해야 한다. 또한 결국 작업해야 되는 것이며, 프로젝트 시작단계에서 작성하면 기획 기준을 정확하게 인지 할 수 있다. 개발하다가 "뭐하려고 했더라?" 와 같은 상황이 안나타나고 기능 개발에만 집중 할 수 있다. 나는 빠르게 노션으로 소개 페이지 레이아웃을 작성하고 필수적인 요소들을 양식화하고 팀원들에게 배포했다. 각자 부분만 작성하면 된다. 팀장은 주도적으로 안내하거나 양식정도를 제공해주는 가이드가 되어야지 모든것을 해줄 필요는 없다고 생각한다. 오히려 모든 것을 대신 해주면 당장 편하더라도 팀원들의 성장을 방해 할 수 있다고 생각한다. 말그대로 협업이므로 책임을 합리적으로 분산시키고 각자의 주도적인 참여를 유도 하는 것도 팀장으로써 해결해야 할 문제라 생각한다. 아래 링크는 노션으로 제작한 팀 및 프로젝트 소개 페이지이며 모두 제공해준 양식에 따라 빠르게 작성해주었다.
https://ohnyong.notion.site/GameInsight-536ac8bfbd5445f19dff65eeddd385b4?pvs=4

GameInsight

게임인사이트는 간편한 게임 관련 정보를 제공하는 서비스 페이지입니다.

ohnyong.notion.site

프로젝트 개요 README.MD 게시 및 gitignore 추적제외
원격 저장소에 Readme 파일을 통해 개요를 작성했다. 소개 페이지 외에도 Github의 대문도 꾸미는게 기본적인 상식이라 생각했다. README 파일에 대해서 팀원들에게 설명하고 기초적인 정보들을 입력했다. 추후 변경 사항 등이 발생하면 업데이트 될 예정이다. 서비스에 대한 소개, 팀원의 소개, 각자의 구현 기능 소개하고 있다.
또한 불필요한 로컬 System 설정 파일이나 MacOS, Windows의 호환 문제 등을 해결하기 위해서 gitignore.io의 도움을 받아 gitignore로 추적을 제외할 파일을 지정하여 원격 저장소 마스터 브랜치로 푸시했다.

4. 팀 커뮤니케이션 Slack

Slack을 통한 커뮤니케이션 및 공지 안내
팀 커뮤니케이션은 Slack을 이용한다. 고정글, 코드블럭, 이미지 등을 자유롭게 공유 할 수 있기 때문에 특히 규칙 및 공통 변경 사항에 대해서 공지 할 때 모두가 확인 할 수 있는 팀 채팅방을 개설했다.

5. 프로젝트 착수

실제 프로젝트 원격 Repository 생성과 기본 프로젝트 구조 생성 및 마스터 배포
이제 시간이 없기 때문에 바로 공통 기초 환경을 구축했다. 모두 아무것도 없는 페이지에서 시작하면 서로 파일의 경로가 다르거나 파일의 이름이 제각각이거나 엉망이 되고 병합과정에서 충돌이 난발해서 오히려 시간이 오래 걸리며, Git을 쓰는 이유 조차 희미해진다.

따라서 나는 시간적 여유가 없기 때문에 보다 분명하게 준비 할 필요가 있었다. 최초 공통 프로젝트 구조를 생성하고, 메인 파일인 app.py와 공통될 라이브러리 임포트, db커넥션, 런 이니시, 포트 설정 등 공통 환경 부분을 작성했다. 주석을 통해서 작업 할 부분을 구분해주고 이제 각자 본인의 코드가 삽입하면 된다.

또한 /template/index.html, /static/js, /static/css로 최소한의 모듈화를 통해서 코드 오류 충돌을 최소화 하고자 환경을 구축했다. 이렇게 최초 프로젝트 시작 버전을 원격 리포에 등록했으며 팀원들이 모두 Pull로 받아 브랜치를 생성했고, 나 또한 Master 브랜치는 병합용으로 원본을 보존하며 병합 시에 나도 동일하게 Pull-Request 과정을 진행하도록 Branch를 생성하여 프로젝트 개발에 착수 했다.

프로젝트 소개와 팀 소개는 다음 노션 페이지에서 확인 할 수 있습니다.

https://ohnyong.notion.site/GameInsight-536ac8bfbd5445f19dff65eeddd385b4?pvs=4

GameInsight

게임인사이트는 간편한 게임 관련 정보를 제공하는 서비스 페이지입니다.

ohnyong.notion.site

해당 프로젝트는 아래 깃을 통해 업데이트되고 있습니다.

https://github.com/yzpocket/GameInsight

GitHub - yzpocket/GameInsight

Contribute to yzpocket/GameInsight development by creating an account on GitHub.

github.com

[Flask] Team Project(GameInsight) 00 (개요)

ohnyong — Wed, 9 Aug 2023 23:55:01 +0900

Flask_project_Game_Insight

[Flask] Flask framework 프로젝트(project Game_Insight)

️ 프로젝트 소개

게임 관련 랭킹, 전문가 리뷰 및 유저 리뷰를 확인 할 수 있는 웹 페이지 서비스

️ 개발 기간

23.08.09일 - 23.08.11일

‍ ‍ 맴버구성

(팀장) 김인용 - 로그인 및 회원 가입, 수정 및 삭제
(팀원) 조영익 - 전문가 리뷰 부분
(팀원) 정강용 - 유저 리뷰
(팀원) 김우응 - 랭킹 정보

⚙️ 개발 환경

MainLanguage : PYTHON
IDE : VisualStudio Code 1.79.2 (Universal)
Framework : Flask Framework
Database : MongoDB(5.0.11) Atlas Cloud
SERVER : AWS EB 배포 예정

주요 기능

️ View 구성

Header부분 :
- 웹 페이지 타이틀(title)
- 네비게이션(메뉴)
  - 전문가 리뷰 페이지 링크
  - 사용자 리뷰 페이지 링크
  - 회원가입 및 로그인 페이지 링크
Content부분 :
- 전문가 리뷰 페이지 :
  - (전문가)리뷰 입력 및 목록 출력
- 사용자 리뷰 페이지 :
  - (유저)리뷰 입력 및 목록 출력
Aside 부분 : 모든 페이지에서 보이도록 함
- 랭킹 데이터 페이지 :
  - 랭킹 데이터 등 자료 출력
Footer부분 :
- 기본 내용 입력
Modal 또는 팝업 윈도우 :
- 회원 가입 및 로그인 입력 부분

⚙ 각자 기능 설명 부분

✅ 회원 가입 및 로그인 구현 - 김인용

회원 가입 양식
- 회원 아이디
- 비밀번호
- 이메일 주소
- 이름
- 생년월일
- 주소(Daum주소 API연동은 아직 미정)
로그인
- 기본 정보
  - DB의 아이디
  - DB의 비밀번호
- 유효성 체크
  - View 필드값 == DB 필드값 검증
회원정보 수정, 삭제(일정상 미정)
- Update, Delete(시간 남는다면 구현 할 것)

✅ 전문가 리뷰 페이지 - 조영익

리뷰 작성
- 입력 양식
  - 게임의 게임메카 url
  - 게임 평점(별점)
  - 게임 한줄평
- 저장 정보
  - url 크롤링을 통한 og 정보
    - 게임 이름
    - 게임 이미지 링크
  - 게임 평점(별점)
  - 게임 한줄평
  - 등록 대상 id
- 작성자 조건에 부합하는 대상에게만 작성 버튼 노출 필요
  - 로그인 시에 불러올 수 있는 정보가 필요
리뷰 목록 호출
- 전문가 평점 버튼 입력 시 리뷰 목록 호출 (호출 순서는 최신순으로 정렬 필요)
- 좌측에 이미지, 우측에는 위에서 순서대로 게임명, 평점, 한줄평, 작성자 id 노출

✅ 사용자 리뷰 페이지 - 정강용

리뷰 작성
리뷰 목록 호출

✅ 랭킹 데이터 페이지 - 김우응

게임메카에서 랭킹 TOP 10 정보 가져오기
- 게임 사이트와 게임 회사 클릭시 사이트 연동해주기

Flask_project_Game_Insight

[Flask] Flask framework 프로젝트(project Game_Insight)

️ 프로젝트 소개

게임 관련 랭킹, 전문가 리뷰 및 유저 리뷰를 확인 할 수 있는 웹 페이지 서비스

️ 개발 기간

23.08.09일 - 23.08.11일

‍ ‍ 맴버구성

(팀장) 김인용 - 로그인 및 회원 가입, 수정 및 삭제
(팀원) 조영익 - 전문가 리뷰 부분
(팀원) 정강용 - 유저 리뷰
(팀원) 김우응 - 랭킹 정보

⚙️ 개발 환경

MainLanguage : PYTHON
IDE : VisualStudio Code 1.79.2 (Universal)
Framework : Flask Framework
Database : MongoDB(5.0.11) Atlas Cloud
SERVER : AWS EB 배포 예정

주요 기능

️ View 구성

Header부분 :
- 웹 페이지 타이틀(title)
- 네비게이션(메뉴)
  - 전문가 리뷰 페이지 링크
  - 사용자 리뷰 페이지 링크
  - 회원가입 및 로그인 페이지 링크
Content부분 :
- 전문가 리뷰 페이지 :
  - (전문가)리뷰 입력 및 목록 출력
- 사용자 리뷰 페이지 :
  - (유저)리뷰 입력 및 목록 출력
Aside 부분 : 모든 페이지에서 보이도록 함
- 랭킹 데이터 페이지 :
  - 랭킹 데이터 등 자료 출력
Footer부분 :
- 기본 내용 입력
Modal 또는 팝업 윈도우 :
- 회원 가입 및 로그인 입력 부분

⚙ 각자 기능 설명 부분

✅ 회원 가입 및 로그인 구현 - 김인용

회원 가입 양식
- 회원 아이디
- 비밀번호
- 이메일 주소
- 이름
- 생년월일
- 주소(Daum주소 API연동은 아직 미정)
로그인
- 기본 정보
  - DB의 아이디
  - DB의 비밀번호
- 유효성 체크
  - View 필드값 == DB 필드값 검증
회원정보 수정, 삭제(일정상 미정)
- Update, Delete(시간 남는다면 구현 할 것)

✅ 전문가 리뷰 페이지 - 조영익

리뷰 작성
- 입력 양식
  - 게임의 게임메카 url
  - 게임 평점(별점)
  - 게임 한줄평
- 저장 정보
  - url 크롤링을 통한 og 정보
    - 게임 이름
    - 게임 이미지 링크
  - 게임 평점(별점)
  - 게임 한줄평
  - 등록 대상 id
- 작성자 조건에 부합하는 대상에게만 작성 버튼 노출 필요
  - 로그인 시에 불러올 수 있는 정보가 필요
리뷰 목록 호출
- 전문가 평점 버튼 입력 시 리뷰 목록 호출 (호출 순서는 최신순으로 정렬 필요)
- 좌측에 이미지, 우측에는 위에서 순서대로 게임명, 평점, 한줄평, 작성자 id 노출

✅ 사용자 리뷰 페이지 - 정강용

리뷰 작성
리뷰 목록 호출

✅ 랭킹 데이터 페이지 - 김우응

게임메카에서 랭킹 TOP 10 정보 가져오기
- 게임 사이트와 게임 회사 클릭시 사이트 연동해주기

프로젝트 소개와 팀 소개는 다음 노션 페이지에서 확인 할 수 있습니다.

https://ohnyong.notion.site/GameInsight-536ac8bfbd5445f19dff65eeddd385b4?pvs=4

GameInsight

게임인사이트는 간편한 게임 관련 정보를 제공하는 서비스 페이지입니다.

ohnyong.notion.site

해당 프로젝트는 아래 깃을 통해 업데이트되고 있습니다.

https://github.com/yzpocket/GameInsight

GitHub - yzpocket/GameInsight

Contribute to yzpocket/GameInsight development by creating an account on GitHub.

github.com

[Flask] Flask framework 미니프로젝트(project bucket) 09 (v1.1 업데이트 기능 추가 및 배포)

ohnyong — Tue, 8 Aug 2023 20:09:19 +0900

현재까지 미니 프로젝트에서 DB의 insert, read 기능만 구현했지만 이번엔 update기능을 추가했다.

신규 버전의 업데이트 내용은 다음과 같다.

NEW RELEASE
- 2023.08.08 - v1.1 완료 상태 업데이트 기능 추가 및 AWS EB 배포
  - 저장된 버킷리스트의 '완료' or '미완료' 상태를 구분 할 수 있는 DB내 done컬럼 추가
  - 앞으로 DB내 신규 생성되는 버킷 리스트글은 글 번호, done 상태 컬럼이 추가되어 입력 됨
  - 상태 기능 추가에 따른 뷰 페이지 버킷리스트 목록에 상태 변경 버튼 추가
  - 버튼을 통해 '완료' 상태로 전환 또는 잘못 누른 경우를 위한 '복구' 기능 추가
  - 기본적인 유효성 체크(상태 변경 버튼에 대한 확인 or 취소) 알림창 팝업 추가
  - AWS EB를 통한 배포 추가

부분 코드는 아래 노트에 기록했지만 전체 코드는 다음과 같다.

app.py

# 라이브러리 임포트

# Flask Framework

# view페이지 렌더링을 위한 render_template 메서드

# 요청 데이터에 접근 할 수 있는 flask.request 모듈

# dictionary를 json형식의 응답 데이터를 내보낼 수 있는 jsonify 메서드

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# [POST-3] MongoDB사용을 위한 pymongo와 certifi 임포트

from pymongo import MongoClient

import certifi

# [POST-4] DB 커넥션 구성

ca = certifi.where()

client = MongoClient('mongodb+srv://<user>:<pass>@<url>?retryWrites=true&w=majority',tlsCAFile=ca)

db = client.dbsparta

# "localhost:5001/" URL요청에 메인 뷰 페이지 반환 응답

@app.route('/')

def home():

return render_template('index.html')

# [POST-0] CREATE 부분부터 코드를 작성하는 것(==POST)이 확인이 가능(READ부터하면 데이터가없어서 테스트 어려움)

# fetch('URL')부분, 반환값은 res로 전달.

# "localhost:5001/bucket" URL POST방식 요청에 응답

@app.route("/bucket", methods=["POST"])

def bucket_post():

# [POST-1] 프론트로부터 무엇을 받아야 하는가? -> 프론트 input으로부터 (html)bucket->(js)bucket_give를 받을 것이다.

bucket_receive = request.form['bucket_give']

# ----start----[추가된 부분]

bucket_list = list(db.bucket.find({}, {'_id': False}))

count = len(bucket_list) + 1

# ----end----[추가된 부분]

print(bucket_receive)

# [POST-2] 클라이언트로부터 받은 데이터를 DB에 넣자 MongoDB연결을 위한 임포트부터 시작(더블체크)

# [POST-5] DB연결이 완료되었으니 Dictionary key:value형태 데이터들을 doc=리스트 객체에 담는다.

# INSERT_ONE

# 저장 - 예시

# doc = {'name':'bobby','age':21}

doc = {

# ----start----[추가된 부분]

'num':count, #버킷 등록 시, db에서 특정 버킷을 찾기 위해 'num' 이라는 고유 값 부여

'done' : 0, #'done' key값을 추가 해 각 버킷의 완료 상태 구분(0 = 미완료, 1 = 완료)

# ----end----[추가된 부분]

'bucket' : bucket_receive

}

# [POST-6] doc에 담았으니 DB에 insert 한다.

db.bucket.insert_one(doc)

# [POST-7] insert가 완료되었으니 완료 메시지를 반환한다.

return jsonify({'msg': 'POST 연결 완료!'+'DB 저장 완료!'})

# ----start----[추가된 부분]

# 등록한 버킷을 ‘완료’ 상태로 바꾸는 기능을 만들어 주세요

# - 이미지 참고 (▶️ 버튼을 눌러주세요)

# 1. 등록한 버킷을 ‘완료’ 상태로 바꾸는 기능을 만들어 주세요. 등록한 버킷의 우측에 ‘완료’ 버튼을 생성하고, 버튼을 클릭 시 버킷 문구 뒤에 ‘완료!!’ 가 추가되면 완성입니다!

# - [완료!] 버튼 클릭 시 → [완료!!] 텍스트 생기도록 하기

# 추가된 업데이트문

@app.route("/update", methods=["POST"])

def bucket_update():

num_receive = request.form['num_give']

print(num_receive)

#해당글 찾아서

find_content_filter = {'num': int(num_receive)}

#업데이트 할 부분 key부분 set

update = {'$set': {'done': 1}}

# [POST-6] doc에 담았으니 DB에 update 한다.

db.bucket.update_one(find_content_filter, update)

# [POST-7] update 완료되었으니 완료 메시지를 반환한다.

return jsonify({'msg': 'POST 연결 완료!'+'DB UPDATE 완료!'})

# 수정을 또 복구하는 업데이트문

@app.route("/restore", methods=["POST"])

def restore_post():

num_receive = request.form['num_give']

find_content_filter = {'num': int(num_receive)}

update = {'$set': {'done': 0}} # done 값을 0으로 업데이트

db.bucket.update_one(find_content_filter, update)

return jsonify({'msg': '복구 완료!'})

# ----end----[추가된 부분]

# [GET-0] CREATE 부분이 테스트 완료되어 DB에 자료가 추가되는 상황, READ로 View 페이지에 DB 데이터를 가져와서 보여주자.

# fetch('URL')부분, 반환값은 res로 전달.

# "localhost:5001/bucket" URL GET방식 요청에 응답

@app.route("/bucket", methods=["GET"])

def bucket_get():

# [GET-1] 필요한 데이터는? -> DB에서 API 데이터를 가져와야 한다.

all_bucket = list(db.bucket.find({},{'_id':False}))

# [GET-2] 가져온 데이터는? -> json으로 변환하여 반환 -> 프론트(js)로 이동

return jsonify({'result': all_bucket})

# app이라는 메인 함수

# if __name__ == "__main__" 의 의미는 메인 함수의 선언, 시작을 의미

# 이 파이썬 스크립트가 직접 실행될 때에는 main() 함수를 실행하라

if __name__ == '__main__':

app.run('0.0.0.0', port=5001, debug=True)

index.html

<!DOCTYPE html>

<head>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<title>인생 버킷리스트</title>

</head>

<body>

<h1>나의 버킷리스트</h1>

</div>

</div>

<li>

<h2>✅ 호주에서 스카이다이빙 하기</h2>

</li>

</div>

</body>

</html>

style.css

* {

font-family: "Gowun Dodum", sans-serif;

}

.mypic {

width: 100%;

height: 200px;

background-image: linear-gradient(0deg,

rgba(0, 0, 0, 0.5),

rgba(0, 0, 0, 0.5)),

url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");

background-position: center;

background-size: cover;

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.mypic>h1 {

font-size: 30px;

}

.mybox {

width: 95%;

max-width: 700px;

padding: 20px;

box-shadow: 0px 0px 10px 0px lightblue;

margin: 20px auto;

}

.mybucket {

display: flex;

flex-direction: row;

align-items: center;

justify-content: space-between;

}

.mybucket>input {

width: 70%;

}

.mybox>li {

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

margin-bottom: 10px;

min-height: 48px;

}

.mybox>li>h2 {

max-width: 75%;

font-size: 20px;

font-weight: 500;

margin-right: auto;

margin-bottom: 0px;

}

.mybox>li>h2.done {

text-decoration: line-through;

}

#fix_status {

display:none;

}

#restore_status:hover #origin_status{

display:none;

}

#restore_status:hover #fix_status{

display:block;

}

button:hover {

transition: 1.0s;

}

1.1 업데이트 노트

1. DB 설계 변경 및 insert 함수 변경 사항

insert로 등록된, read로 메인 페이지에서 보여지는 버킷 리스트 목록을 "버킷 리스트를 완료" 했다면 완료한 것으로 변경해서 보여주고싶었다.

중요한 부분은 해당 목록에서 "선택" 된 레코드에 대해서만 완료 or 미완료를 구분해야 한다.

이를 하기 위한 전제는 각 글마다 고유한 번호가 필요했다. 따라서 insert로 입력 할 때 마다 글 번호인 num을 콘텐츠와 함께 저장되도록 했으며, 자동으로 1씩 늘어나게 설정되었다. 마치 Oracle의 sequence, MySQL의 auto_increment와 비슷한 로직으로 매번 새로운 글 번호를 저장할 수 있도록 len()함수를 이용하여 변수를 선언 할당 했다.

더하여 버킷리스트의 상태를 done이라는 필드값을 추가해서 0일때, 1일때를 구분하여 버킷리스트 완료는 1, 버킷리스트 미완료는 0으로 표기했다. 기본으로 0을 할당하여 미완료 상태를 디폴트로 insert되게 된다.

@app.route("/bucket", methods=["POST"])
def bucket_post():
    ...
    
    #전체 버킷리스트의 목록을 불러온다
    #len() 함수를 통해서 전체 목록 갯수를 구할 수 있으며 +1로 다음 글번호를 지정한다.
    
    bucket_list = list(db.bucket.find({}, {'_id': False}))
    count = len(bucket_list) + 1
    
    
    ...
    
    # insert될 doc의 내용에 num, done을 추가한다.
    
    doc = {
    # ----start----[추가된 부분]
        'num':count,  #버킷 등록 시, db에서 특정 버킷을 찾기 위해 'num' 이라는 고유 값 부여
        'done' : 0,   #'done' key값을 추가 해 각 버킷의 완료 상태 구분(0 = 미완료, 1 = 완료)
    # ----end----[추가된 부분]
        'bucket' : bucket_receive
    }
    # [POST-6] doc에 담았으니 DB에 insert 한다.
    db.bucket.insert_one(doc)
    
        return jsonify({'msg': 'POST 연결 완료!'+'DB 저장 완료!'})

script.js

// [Read]

$(document).ready(function () {

show_bucket();

$('.status-container').mouseover( function() {

$(this).find('.origin-status').fadeOut();

$(this).find('.fix-status').fadeIn();

});

$('.status-container').mouseout( function() {

$(this).find('.origin-status').fadeIn();

$(this).find('.fix-status').fadeOut();

});

function show_bucket() {

fetch('/bucket').then(res => res.json()).then(data => {

// json 형식으로 변환, 반환된 데이터가 res 인자로 들어옴

// res.json()에 의해 Promise 객체로 변환되어 data에 저장

// data 내용 테스트

console.log("data===>"+data)

// data의 내용이 OpenAPI로부터 데이터 받는것과 동일

// 리스트 형태의 data를 rows 변수에 담고

let rows = data['result']

console.log("rows===>"+rows)

// 반복문 전에 하드코딩 부분 비워주기

$('#bucket-list').empty();

// forEach 반복문을 통해

rows.forEach((a)=>{

// 리스트에 있는 key의 value들을 각 변수에 담기

let bucket = a['bucket']

let num = a['num']

let done = a['done']

console.log("bucket===>"+bucket)

let contents = ``;

if(done == 0){

contents = `<li>

<h2> ${bucket}</h2>

</li>`

}else if(done == 1){

contents = `

<li>

<h2>✅ <span><del>${bucket}</del></span><div style="float:right">(완료!!)</div></h2>

<span id="fix_status">혹시 잘못 누르셨나요?!</span>

</button>

</div>

</li>`

}

// index.html에 위 변수들이 들어가도록 백틱 내 자리표시자${variable} 작성한 내용을 temp_html에 작성

let temp_html = contents

// 위 temp_html을 index.html의 #cards-box div에 붙여주기.

$('#bucket-list').append(temp_html)

})

}

// [Create]

function save_bucket() {

// index.html로부터 값 가져오기

let bucket = $('#bucket').val()

// formData 객체를 생성하고

let formData = new FormData();

// append()통해 {key,value}를 객체에 담는다

formData.append("bucket_give", bucket);

// POST 요청에 위 formData를 body에 담아 요청한다.

fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {

alert(data["msg"]);

// 브라우저 새로고침 추가

window.location.reload();

});

}

// [Update]

function update_bucket(num){

if (!confirm("정말 버킷리스트를 이루셨나요?/t 확인[예] / 취소[아니오]")) {

alert("취소[아니오]를 누르셨습니다.");

window.location.reload();

} else {

alert("확인[예]을 누르셨습니다.");

// alert(num);

// console.log(num);

let update_num = num;

let formData = new FormData();

formData.append("num_give", num);

fetch('/update', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {

alert(data["msg"]);

// 브라우저 새로고침 추가

window.location.reload();

});

// // formData 객체를 생성하고

// let formData = new FormData();

// // append()통해 {key,value}를 객체에 담는다

// formData.append("num_give", num);

}

function restore_bucket(num) {

if (!confirm("버킷리스트를 다시 복구할까요?? 확인[예] / 취소[아니오]")) {

alert("취소[아니오]를 누르셨습니다.");

window.location.reload();

} else {

alert("확인[예]을 누르셨습니다.");

let formData = new FormData();

formData.append("num_give", num);

fetch('/restore', { method: "POST", body: formData }).then((response) => response.json()).then((data) => {

alert(data["msg"]);

// 브라우저 새로고침 추가

window.location.reload();

});

}

2. bucket_update()의 업데이트 기능 함수 추가

우선 HTML 뷰페이지 단에서 나타나는 버킷리스트 목록은 js에서 append로 구성되어 있다. 따라서 버킷 리스트 자체의 수정은 js에서 우선적으로 수정한다. 일단 테스트용으로 버튼을 생성하여 onclick 이벤트로 update_bucket 함수를 부른다. 여기서 DB에서 저장된 글 번호를 대상으로 해야 한다. 글 번호를 특정하지 않으면 id를 아무리 지정해도 첫번째 글의 데이터밖에 못가져오게 된다. 따라서 상단의 bucket이라는 글 내용을 배열에 담았던것과 마찬가지로 db에 있는 num이라는 key, 또한 done이라는 key를 통해서 밸류들을 각자 배열로 저장한다.

function show_bucket() {
    fetch('/bucket').then(res => res.json()).then(data => {
		
        ...
        
        // forEach 반복문을 통해
        rows.forEach((a)=>{
            // 리스트에 있는 key의 value들을 각 변수에 담기
            let bucket = a['bucket']
            let num = a['num']
            let done = a['done']
            console.log("bucket===>"+bucket)
            let contents = ``;
            if(done == 0){
                contents =   `<li>
                                    <h2>  ${bucket}</h2>
                                    <button onclick="update_bucket(${num})" type="button" class="btn btn-outline-primary">완료하기?</button>
                                    <input id="content_num" type="hidden" placeholder="완료용 게시글의 번호" value="${num}"/>
                                </li>`
            }else if(done == 1){
                contents =   `
                                <li>
                                    <h2>✅ <span><del>${bucket}</del></span><div style="float:right">(완료!!)</div></h2>
                                    <div class="status-container">
                                        <button id="restore_status" onclick="restore_bucket(${num})" type="button" class="btn btn-outline-success">
                                            <span id="origin_status">축하해요!</span>
                                            <span id="fix_status">혹시 잘못 누르셨나요?!</span>
                                        </button>
                                    </div>
                                    <input id="content_num" type="hidden" placeholder="완료용 게시글의 번호" value="${num}"/>
                                </li>`
            }
            // index.html에 위 변수들이 들어가도록 백틱 내 자리표시자${variable} 작성한 내용을 temp_html에 작성
            let temp_html = contents
                                
            // 위 temp_html을 index.html의 #cards-box div에 붙여주기.
            $('#bucket-list').append(temp_html)
        })
    })
}

이후 나는 done이라는 버킷 리스트 달성 여부 필드에 따라 조건문을 통해서 두가지 형태로 append되도록 구성했다.

디폴트 상태(insert만 된 상태)의 버킷 리스트 내용은 '완료하기' 버튼이 나타나며 다음과 같은 코드로 최소한의 유효성체크 알림창과 /update라는 url로 POST 요청을 보내도록 구성했다.

// [Update]
function update_bucket(num){
    if (!confirm("정말 버킷리스트를 이루셨나요?/t 확인[예] / 취소[아니오]")) {
        alert("취소[아니오]를 누르셨습니다.");
        window.location.reload();
    } else {
        alert("확인[예]을 누르셨습니다.");
    
        // alert(num);
        // console.log(num);
        let update_num = num;
        let formData = new FormData();
        formData.append("num_give", num);

        fetch('/update', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
            alert(data["msg"]);
            // 브라우저 새로고침 추가
            window.location.reload();
        });
            // // formData 객체를 생성하고
            // let formData = new FormData();
            // // append()통해 {key,value}를 객체에 담는다
            // formData.append("num_give", num);
    }
}

완료된 상태인 경우 del 스타일과 완료메시지, 버튼 또한 축하해요라는 버튼으로 구분되도록 구성했다.

3. restore_post()의 복구 기능 함수 추가

더하여 축하해요라는 버튼이 나타나는 완료된 버킷 리스트도 사용자가 잘못 눌렀을 가능성을 생각해서 마우스오버(hover)를 통해서 버튼이 변경되며 복구 할 수 있는 기능을 추가했다. /restore라는 url을 통해 POST로 요청하도록 한다. 이 부분에도 기본적인 확인 유효성체크는 삽입하였다.

script.js는 다음과 같으며

function restore_bucket(num) {
    if (!confirm("버킷리스트를 다시 복구할까요?? 확인[예] / 취소[아니오]")) {
        alert("취소[아니오]를 누르셨습니다.");
        window.location.reload();
    } else {
        alert("확인[예]을 누르셨습니다.");
        
    let formData = new FormData();
    formData.append("num_give", num);

    fetch('/restore', { method: "POST", body: formData }).then((response) => response.json()).then((data) => {
            alert(data["msg"]);
            // 브라우저 새로고침 추가
            window.location.reload();
        });
    }
}

app.py의 함수 부분은 다음과 같다.

# 수정을 또 복구하는 업데이트문
@app.route("/restore", methods=["POST"])
def restore_post():
    num_receive = request.form['num_give']
    find_content_filter = {'num': int(num_receive)}
    update = {'$set': {'done': 0}}  # done 값을 0으로 업데이트

    db.bucket.update_one(find_content_filter, update)
    return jsonify({'msg': '복구 완료!'})

해당 부분은 버튼의 onclick이벤트를 통해서 완료를 실행하면 0->1로 변경되도록, 또한 복구 버튼을 누르면 1->0으로 다시 복구 되는 기능을 구현했다. 기본적으로 함수마다 window.location.reload()를 통해서 변경 사항이 새로 로드 되도록 구현했다. 이부분은 추후 ajax를 활용해서 구현하면 웹 페이지 전체를 로드 할 필요가 없기 때문에 효율적으로 고칠 수 있을 것 같다.

4. AWS Elastic Beanstalk 배포

AWS EB를 통해서 Amazon 서버를 활용한 배포를 진행했다. 주소는 다음과 같다. 배포과정은 이전에 기록을 잘 기록해두어서 손쉽게 진행 할 수 있었다. 다른점은 이전에 Key Pair를 생성해두었기 때문에 한번 더 할 필요 없던점, 그리고 이전 프로젝트가 존재하는 경우 deploy로 업데이트할지, create로 새 프로젝트를 만들지 설정 하도록 되어있다. 이전 미니 프로젝트 팬명록도 우선 지울 필요는 없기 때문에 create로 새로운 어플리케이션을 생성하는 것으로 진행했다.

http://bucketlist.eba-8gmu7v8e.ap-northeast-2.elasticbeanstalk.com/

인생 버킷리스트

bucketlist.eba-8gmu7v8e.ap-northeast-2.elasticbeanstalk.com

해당 프로젝트는 아래 깃을 통해 업데이트되고 있습니다.

https://github.com/yzpocket/Flask_project_bucket

GitHub - yzpocket/Flask_project_bucket

Contribute to yzpocket/Flask_project_bucket development by creating an account on GitHub.

github.com