TIL 2022.05.09 클론코딩 팀프로젝트(BE) - 5 (친구 추천 리스트, 팔로우/언팔로우)

친구 추천 리스트 출력

# 회원님을 위한 추천 리스트 출력
all_users_nick_list = []
# 모든 유저의 닉네임 추출
all_users = list(db.USER.find({}, {'nickname': True, '_id': False}))
for all_users_nick in all_users:
    all_users_nick_list.append(all_users_nick['nickname'])
# print(all_users_nick_list)  # 모든 유저의 닉 리스트
# print(user_info['following'])  # 내가 팔로우한 유저의 닉 리스트
user_info = db.USER.find_one({"id": payload['id']})  # id, num, nickname, feed_images, content, like, reply
# 모든 유저 닉 - 내가 팔로잉중인 유저 닉 - 나의 닉네임 = 추천 친구 리스트
recommend_info = []
recommend_nick = list(set(all_users_nick_list) - set(user_info['following']))  # 내 팔로잉 유저들 제외
recommend_nick.remove(user_info['nickname'])  # 나 제외
# print(recommend_nick)
for recommend in recommend_nick:
    reco = list(db.USER.find({'nickname': recommend}))
    if reco is not None:
        recommend_info.extend(reco)

# print(recommend_info)
# 추천 친구 리스트 중 랜덤으로 중복 허용하지 않으면서 3개만 뽑아서 출력
if len(recommend_info) >= 3:
    recommend_3 = random.sample(recommend_info, 3)
    return render_template('/Feed/index.html',
                       feeds=feed_info, users=user_info, recommend=recommend_3)
else:
    recommend_3 = '추천 할 회원이 없습니다.'
    return render_template('/Feed/index.html',
                           feeds=feed_info, users=user_info, recommend=recommend_3)

 

팔로우/언팔로우

index.html

<!-- 추천 회원 출력  -->
{% if recommend == '추천 할 회원이 없습니다.' %}
    <div>추천 할 회원이 없습니다.</div>
{% else %}
    {% for reco in recommend %}
        <div style="display:flex; flex-direction:row; justify-content: space-between; align-items: center; margin:10px 0px 10px 0px">

            <div style="display: flex; flex-direction: row">
                <div class="box" style="width: 35px; height: 35px">
                    <img class="profile"
                         src="{{ reco.profile_img }}">
                </div>
                <div style="margin-left:10px; text-align:left">
                    <div id="mynick{{ reco.nickname }}"
                         style="font-weight:bold; font-size: 14px">{{ reco.nickname }}</div>
                    <div style="color:gray; font-size:14px">인기</div>
                </div>
            </div>

            <div id="follow{{ reco.nickname }}">
                <a onclick="follow('{{ reco.nickname }}')"
                   style="font-size:14px; font-weight:bold; text-decoration:none;">팔로우</a>
            </div>
        </div>
    {% endfor %}
{% endif %}

클릭시 함수 호출 때 jinja2를 이용해서 {{reco.nickname}}을 주는 방식으로 함수에 파라미터로 전달

// 팔로우/언팔로우
function follow(reco_nickname) {
    alert(reco_nickname + '팔로우!')
    reco_nick = reco_nickname
    $.ajax({
        type: "POST",
        url: "/api/follow",
        data: {'nick_give': reco_nickname},
        success: function (response) {
            if (response['is_following'] == 1) {
                alert('팔로우 완료')
                let temp_html = `<a onclick="follow(reco_nick)" style="font-size:14px; font-weight:bold; text-decoration:none; color: black">팔로잉</a>`
                $('#follow' + reco_nickname).html(temp_html)
            } else {
                alert('언팔로우 완료')
                let temp_html = `<a onclick="follow(reco_nick)" style="font-size:14px; font-weight:bold; text-decoration:none;">팔로우</a>`
                $('#follow' + reco_nickname).html(temp_html)
            }
        }
    })
}

파라미터로 가져온 reco_nickname 값을 그대로 사용 가능하지만 let temp_html의 태그 속에 집어 넣을 때는 값을 변수에 한번 더 저장한 다음에 사용해야 입력 가능하다.

app.py

### nickname을 받아와서 내 계정에 팔로우 되어있는지 확인
### 팔로우 - nickname 을 받아와서 DB에 저장
### 언팔로우 - nickname 을 받아와서 DB에서 제거
@app.route('/api/follow', methods=['POST'])
def is_following():
    token_receive = request.cookies.get('mytoken')
    payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
    print(payload['id'])
    follow_nick = request.form['nick_give']
    print(follow_nick)

    my_follow = db.USER.find_one({'id':payload['id']})
    print(my_follow['following'])

    if follow_nick in my_follow['following']:
        db.USER.update_one({'id': payload['id']}, {'$pull': {'following': follow_nick}})
        print('DB 에 팔로우 제거 완료!')
        return jsonify(({'result': 'success', 'is_following': 0}))

    else:
        db.USER.update_one({'id': payload['id']}, {'$push': {'following': follow_nick}})
        print('DB 에 팔로우 추가 완료!')
        return jsonify({'result': 'success', 'is_following': 1})

mongoDB 쿼리 구문 사용 한 것

$push : 값 하나 추가로 집어 넣기 $pull : 해당 하는 값 빼기

 

주말에 이어서 팔로우/언팔로우 작업까지 완료했고 오늘 추가적으로 발생될 오류를 예외로 지정해서 출력오류가 나지 않도록 완성을 하였고 완성 후 추가적으로 배운 부분들에 대해 다시금 정리하고 직접 짜고 필요한 부분만 붙여놓았다.

 

지금 당장의 코드는 아직 css가 정리되어있지않아 좀 지저분한 느낌이 많이들지만 오늘, 내일 오후 까지 기능 작업을 완료한 뒤에 내일 오후에 css, javascript 파일을 생성해서 정리를 쫙 시작할 예정이다.

 

주말에 많은 내용을 공부하진 못하였지만, 몽고 DB 쿼리문도 여러개 써보게 되고 jquery 사용법도 하나씩 몸에 익혀나가게 되었고 나름 생각했던 대로 코드를 깔끔하게 짰고 작동도 잘되어서 유익한 시간이 되었다.

 

jinja도 jsp에서 사용하듯이 사용하는 방식이라 크게 어려움 느끼지 않아서 쉽고 간편하게 생각했던 대로 짤 수 있었던 것 같다. jinja는 flask에 포함된 라이브러리라 flask만 가져오면 사용가능해서 더욱 편리 한 것 같다.

 

내일은 팀원들과 같이 파일정리하고 최종 발표를 위한 준비를 최대한 해야 될 것 같다.