📒 [ TIL ] 2022.05.09_15일차 # 인스타 UI클론(6)

[ 2022-05-09 (월) 오늘의 TIL ]

[ Today Project ]

인스타그램 UI클론 백엔드개발 + 프론트 추가개발
: 이번 프로젝트는 팀프로젝트로 시작합니다.

[ Today Learn ]

• 로그인한 아이디 또는 사용자이름의 메인페이지와 개인페이지이동 구현하기
• 개인프로필이미지 클릭시 메뉴모달 html 구현하기
• 회원가입기능 및 로그인기능(함수 및 ajax요청) 프론트개발

✏️ 내가 배운것, 얻은것

아래와 같이 회원가입을 할때 5개의 값을 받아 db에 저장했고,
'profile_pic_real'에는 고정된 기본 프로필이미지 값을 저장했다.

# 회원가입 기능
@app.route('/sign_up/save', methods=['POST'])
def sign_up():
    id_receive = request.form['id_give']
    name_receive = request.form['name_give']
    username_receive = request.form['username_give']
    pw_receive = request.form['pw_give']

    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

    doc = {
        'id': id_receive,
        'name': name_receive,
        'username': username_receive,
        'pw': pw_hash,
        'profile_pic_real': 'profile_pics/profile_placeholder.png'
    }
    db.users.insert_one(doc)
    return jsonify({'result': 'success'})

근데 여기서 문제는 로그인할때 받는 값은 id와 pw 단 두개뿐이었고, 로그인할 수 있는 id는 'id'와 'username' 두 개 모두로 설정하고싶었는데, python문법을 어떻게 적용시켜야할지 계속 고민하다 아래와 같이 if문을 적용해서 설정할수 있었다.

🧩 적용 예시

# 로그인기능
@app.route('/sign_in', methods=['POST'])
def sign_in():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']

    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
    result = db.users.find_one({'id': id_receive, 'pw': pw_hash}) 

    if result is None:       # 없으면 
        result = db.users.find_one({'username': id_receive, 'pw': pw_hash})
    print(result)

    if result is not None:     # 있으면 
        payload = {
            'id': result['id'],
            'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)  # 로그인 24시간 유지
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

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

근데 여기서 또다른 문제가 발생했다. 로그인 후에는 메인페이지의 프로필사진과 개인페이지를 이동할때 등 username을 이용하여 코드를 짰는데, id로 로그인을하면 해당 username이나 프로필 사진이 보이지 않고, username으로 로그인했을때만 해당 유저의 username과 프로필사진이 보였다.
그래서 아래와 같이 my_info변수와 user_info변수를 이용해서 값을 걸러내어 jinja를 이용하여 html에서 구현할 수 있도록 파라미터로 넘겨주었다.

🧩 적용 예시

@app.route('/user/<username>')
def user(username):
    token_receive = request.cookies.get('mytoken')
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        my_info = db.users.find_one({"id": payload['id']}, {"_id": False}) # 로그인한 아이디가 db의 'id'이랑 같은게 있나

        status = (username == my_info['username'])  # 내 프로필이면 True, 다른 사람 프로필 페이지면 False  / 자신의 유저네임 동일한지

        user_info = db.users.find_one({"username": username}, {"_id": False})


        return render_template('detail.html', user_info=user_info, status=status)
    except (jwt.ExpiredSignatureError, jwt.exceptions.DecodeError):
        return redirect(url_for("home"))

아래는 프로필이미지와 username을 jinja를 이용하여 적용한 html이다.
href로 해당유저의 개인페이지로 이동할 수 있도록 함께 적용했다.

 <div class="right-body">
            <div class="feed-name" style="flex-direction: row;">
                <div class="big-profile-box">
                   <a href="/user/{{ user_info.username }}" > <img class="profile-img" style="cursor: pointer;"
                         src="{{ url_for('static', filename=user_info.profile_pic_real) }}"></a>
                </div>
                <div class="name-content">
                    <a class="feed-name-text" style="margin:20px 130px 0px 0px;"
                       href="/user/{{ user_info.username }}" >{{ user_info.username }}</a>
                </div>

[👍 오늘의 결과물 ]

• menu modal
  

• 로그인유저의 메인페이지
  

• 로그인유저의 개인프로필페이지
  

🌱 느낀 점

튜터님들께서 로그인기능과 회원가입기능은 기본중의 기본이라고 하셨는데, 처음으로 구현해본 기능이라 이해하는 시간이 많이 필요해서 시간이 오래 걸렸다. 😂
하지만 하루만에 구현한것 치고는 빨리 구현했다고 긍정적으로 생각하고싶다.
팀원들도 다들 나처럼 처음해보는 기능이라 이해하는데 시간이 좀 필요해보였다.
팀원들과 기능을 각자 분담하여 진행중이긴하나, 내일 내가 맡은 마지막기능인 로그아웃기능을 빨리 끝내고 해보고싶었던 좋아요 및 저장기능을 구현해봐야할 것같다.

🎁 자세한 코드는 Moonmoo 에 게시했습니다