[Instagram] 클론 백엔드 프로젝트 3

 

1. 회원가입 기능

 

어제 오늘은 프로젝트 막바지여서 정말 정신없이 코딩에만 집중해서 시간을 보냈다.

우선은 팀원이 맡았던 회원가입이 완성되질 않아서 프로젝트 진행에 차질이 생겨서 붙어서 

해결을 해야 진행이 가능해지기때문에 회원가입 기능을 만드는데 집중을 해서 만들어 나갔다.

 

@app.route('/sign_up', methods=['POST'])
def register():
    name_receive = request.form['name_give']
    pw_receive = request.form['pw_give']
    nickname_receive = request.form['nickname_give']
    email_receive = request.form['email_give']
    date_receive = request.form['date_give']


    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
    doc = {
        'name': name_receive,
        'pw': pw_hash,
        'nick': nickname_receive,
        'email': email_receive,
        "date" : date_receive
    }

    db.users.insert_one(doc)

    return jsonify({'result': 'success'})

api는 우선 간단하게 배우고 아는 선에서 코드를 작성했고 이를 토대로 클라이언트쪽 코드도 작성을 해나갔다.

function sign_up() {
    let useremail = $("#useremail").val()
    let username = $("#username").val()
    let usernick = $("#usernick").val()
    let userpw = $("#userpw").val()
    let today = new Date().toISOString()

    if (useremail == "") {
        alert("이메일을 입력해주세요.")
        return;
    } else if (username == "") {
        alert("이름을 입력해주세요.")
        return;
    } else if (usernick == "") {
        alert("닉네임을 입력해주세요.")
        return;
    } else if (userpw == "") {
        alert("비밀번호를 입력해주세요.")
        return;
    }

    $.ajax({
        type: "POST",
        url: "/sign_up",
        data: {
            name_give: username,
            pw_give: userpw,
            nickname_give: usernick,
            email_give: useremail,
            date_give: today
        },
        success: function (response) {
            if (response['result'] == 'success') {
                alert('회원가입이 완료되었습니다.')
                window.location.href = '/login'
            } else {
                alert(response['msg'])
            }
        }
    })
}

이렇게 두가지 코드를 작성하는건 어렵지 않았는데 중복확인도 해야했기에, 새로운 함수를 더 사용하고 

api도 추가로 버튼마다 기능을하게 만들어서 처리를 했다.

@app.route('/check_email', methods=['POST'])
def check_dub1():
    email_receive = request.form['email_give']
    exist = bool(db.users.find_one({"email": email_receive}))

    return jsonify({'result': 'success', 'exist': exist})


@app.route('/check_nick', methods=['POST'])
def check_dub2():
    nickname_receive = request.form['nickname_give']
    exists = bool(db.users.find_one({"nick": nickname_receive}))

    return jsonify({'result': 'success', 'exists': exists})

처음에 이 API가 하나로 되어있었는데, 그렇게 하다보니 중복확인 버튼이 두가지가 있는 페이지에서 각각 적용되게 하고

싶었는데 중복적용이 되는바람에 API를 두개로 나누면 되지않을까하는 생각에 두개로 나누어서 코드를 작성했다.

API가 두개인만큼 클라이언트쪽도 두개의 함수로 나누어서 코드를작성했다. 또하나의 문제는 중복확인을

하려고 post요청을 보내면 DB에 확인한 정보가 저장되는 문제였다. 이것도 또한 하나로 합쳐졌을때 중복적용

문제때문에 두가지로 나누어서 하니 해결이되었었다. 

function check_email() {

    let useremail = $("#useremail").val()

    $.ajax({
        type: "POST",
        url: "/check_email",
        data: {
            email_give: useremail
        },
        success: function (response) {
        console.log(response)
            if (response["exist"]) {
                alert("중복된 이메일입니다.")
            } else if (useremail == "") {
                alert("이메일을 입력해주세요.")
            } else {
                alert("사용가능한 정보입니다.")
            }
        }
    });
}

function check_nick() {

    let usernick = $("#usernick").val()

    $.ajax({
        type: "POST",
        url: "/check_nick",
        data: {
            nickname_give: usernick
        },
        success: function (response) {

            if (response["exists"]) {
                alert("중복된 닉네임입니다.")
            } else if (usernick == "") {
                alert("닉네임을 입력해주세요.")
            } else {
                alert("사용가능한 정보입니다.")
            }
        }
    });
}

 

회원가입 페이지를 해결을 하려고 새벽1시까지 작업을 했었다.. 

다른작업을 하다가 회원가입페이지를 처음 코드를 접해봐서 일단은 기본적인 기능들이 가능한 상태로 만드는데 

집중을해서 다음 스테이지로 넘어갈 수 있었다.

 

2. 메인페이지 기능

로그인 기능과 회원가입 기능이 어제 완성이 되서 우리팀은 기본적인 기능들을 코드작업하고 수정할

기간이 얼마 남지 않아서 굉장히 초조했었다. 그래도 어떻게든 빨리 기능들을 구현하고자 

머리를 어떻게든 굴렸다. 우선은 매인페이지를 로그인을 통해 접속하게되면 우측에 내정보와

회원추천 리스트가 있는데, 이곳에 내정보에 로그인한 계정의 토큰값을 이용해

닉네임과 이름이 적용되도록 하고 마찬가지로 댓글, 포스팅한 계정의 닉네임이 댓글 옆 그리고

포스트 상단에 적용이되도록 코드작업을 진행했다. 맨처음에는 게시글을 업로드할때 DB에 

시간을 저장해서 시간이 지남에 따라서 게시글하단에 몇분전, 몇시간전, 몇일전 이런식으로

기록이 되게하는 작업을하다가 닉네임연결이 비슷한 맥락으로 연동이 되어있어서 

같이 작업을 하게되었다. 

 

이렇게 게시글에 글쓴이의 닉네임과 하단에 시간이 기록되는걸 볼 수 있다.

타임스탬프는 가이드라인에 있던 자료를 토대로 적용시키고 유저닉네임은 응용해서 적용하니

크게 문제없이 바로 적용되서 비교적 쉽게 넘어갔다.

 

3. 회원추천 기능

오늘 가장 시간을 많이 걸렸던 기능은 회원추천기능이다. 유저들의 닉네임을 가져와서 붙이기만 하면될줄 알았는데,

생각보다 조건들이 많았고, 반복문으로 돌려서 하니 무제한으로 붙는 경우나, 닉네임 값을 가져오는데있어서 생각보다

간단한 방법으로는 가져와지지가 않았었다. 그런데, 복잡한걸 다 적용시켜보고 했지만 결국에 안되서 다시 

원점으로 돌아와 적용시키니 닉네임이 나왔었다.. 정말 황당하면서도 처음에 했던게 틀리지않았구나 느끼면서도

왜 처음엔 안됐었던걸까 라는 의문이 남았었다. 또 유저들이 많아지면 신규로 회원가입한 사람을 기준으로 

갱신이 되게 하려고 회원가입한 시간을 DB에 저장해서 그 데이터를 가지고 나열을 하게 만들었다. 

 

user_list = list(db.users.find({}, {'_id': False}).limit(5).sort("date", -1))

 

4. 모달 상세기능

 

개인 페이지에는 인스타그램과 동일하게 사진이 업로드되어있고, 사진을 클릭하면 모달이 나오는데

이때 각 게시물에대한 내용을 모달에 불러오거나, 그에 해당하는 모달을 띄우게 만들어야 했다.

우리가 사용한 방식은 클라이언트 사이드 렌더링이었어서 더힘들었던것도 있었는데, 그래도

튜터님의 팁을 받아서 결국에 오랜시간 끝에 해결을 했다.

 

 

모달위에 모달을 띄우게 하는 점도 z-index를 이용해서 잘 적용을 해놔서 만족스럽다.

모달안의 내용들은 메인페이지에서 했던 과정이랑 비슷한 맥락이라 같은방법으로 적용을 시켜서

게시물주인의 닉네임과 댓글주인의 닉네임들을 다 불러오게끔 적용시켰다.

 

5. 프로젝트 주도

 

프로젝트 초기에는 역할을 분담하고, 차근차근 진행을 했지만 막바지에 다다라서 필수적인 부분 로그인과 회원가입 페이지의 구현이 늦어지면서, 최대한 빠른시간내에 남은 기능들을 적용시켜야 했기에 많은 어려움들이 있었는데

정말 신기하게도 프로젝트를 하는도중에 성장을 한건지 보이는게 점점 많아지면서 어느새 진행을 주도하고 있었다.

진행상황을 브리핑하고 하고있는 기능들이 겹치지않게 조율을 하고 내가 구현 할 수 있는 최대한 많은 기능들을

구현했다. 벌써 내일이면 발표인데, 아직 구현해야할 남은 기본기능들도 있고 완성도 자체는 만족스럽지 않지만,

많은 기능들을 직접 구현해보고 팀원들의 인정을 받은 점에서 많은 성취감을 느낄 수 있었던것같다. 

다음번에는 백엔드 웹개발 프로젝트를 하게되면 Jinja2를 사용해서 코딩을 해보고싶다.