[Instagram] 클론 백엔드 팀프로젝트 중간점검

1. 진행상황

#구현한 기능

>Carstagram컨셉에 맞는 느낌의 배경디자인

>회원가입 페이지 레이아웃, 기입한 정보 DB에 저장, 비밀번호 암호화

>로그인 페이지 레이아웃, (로그인시 토큰 유지 방법 구현중)

>메인페이지 게시글 댓글 기능

>메인페이지 게시글 사진업로드 및 게시 기능

 

#구현해야 할 기능

>회원가입 페이지 백엔드 기능

>로그인,로그아웃 기능

>좋아요 기능

>댓글 모두보기 (모달) 기능

>마이페이지 게시물 올리기, 각게시물 (모달) 댓글,좋아요,타임스탬프 기능

 

 

 

2. 진행중 어려웠던 점

1. 경로문제

> app.py 에서 로컬서버로 실행을 해서 페이지를 불러오는 과정에서 불러오지 못한 경우가 많았음.

@app.route('/')
def main():
    return render_template('index.html')

@app.route('/')에서---->> @app.route('/main') 라고 썼을때 http://localhost:5000/ 이렇게 인터넷창에 적으면 

접속이 안되고 http://localhost:5000/main 이라고 지정해야지만 접속이 된다. 

 

> css나 javascript를 불러오는 경로도 static 앞에 ../ 를 붙여줘야지만 적용이 된다.

<link rel="stylesheet" href="../static/style/mainstyle.css" type="text/css">
<script src="../static/scripts/mainscripts.js" rel="stylesheet" type="text/javascript"></script>

>경로를 지정해주는 또 다른 방법

<link rel="stylesheet" href="{{ url_for('static', filename ='bootstrap-5.1.3-dist/css/bootstrap.css') }}" />

 

html에서 a태그 링크를 타고 다른 html로 이동할때 경로 지정 예시

 <a class="navbar-brand" href="/">
            <img src="../static/image/Carstagram_rogo4.png"></a>

이 코드 처럼 메인 페이지가 app.py에서 @app.route('/') 라면 href="/"    @app.route('/main')이라면 href="/main"

이렇게 지정을 해야 한다. 이미지도 마찬가지로 static 앞에 ../를 붙여줘야 한다.

 

 

 

2. 동일 모달창 다른 게시물 버튼으로 적용시키기(JS -> jQuery)

 

>Javascript 기존코드로 작성했을때는 한개의 버튼에서만 동작을했고 코드도 굉장히 길다.

// 모달 열기
    const modal = document.getElementById("modal-option");
    const buttonOpenModal = document.getElementById("open-modal");
    buttonOpenModal.addEventListener("click", e => {
        modal.style.top = window.pageYOffset + 'px'; // 모달띄울시, 스크롤이 내려가면 창이 뜨는 위치 수정
        modal.style.display = "flex";  // 모달 나타나게하기
        document.body.style.overflowY = "hidden"; // 모달 띄웠을때 스크롤안되게하기

    });
    // 모달 x 눌러 닫기
    const buttonCloseModal = document.getElementById("close-modal");
    buttonCloseModal.addEventListener("click", e => {
        modal.style.display = "none";
        document.body.style.overflowY = "visible";
    });
    // 모달 아닌곳 눌러 닫기
    modal.addEventListener("click", e => {
        const evTarget = e.target
        if (evTarget.classList.contains("modal-overlay")) {
            modal.style.display = "none";
            document.body.style.overflowY = "visible";
        }
    });

 

>jQuery로 다음과 같이 작성을 했을때 코드도 간략해지고, 모든 버튼에서 같은 모달이 잘 적용되었다.

>이때 css도 같이 수정을 해주었는데, position: absolute; 에서 fixed로 수정을 하면 누른 시점의 화면기준으로 나온다.

>메뉴바 위로도 배경흐릿해지는걸 적용하기 위해 z-index도 메뉴바와 동일하게 적용한다.

// 모달
$(document).on('click', function () {
// 모달 띄우기
    $(".btn-open-popup").click(function () {
        $(".modal-overlay").fadeIn(); #서서히 나타나게하는 애니메이션 효과
        $('body').css("overflow", "hidden"); #모달열었을때 스크롤 안되게하는
    });
// 모달 닫기
    $(".close-area").click(function () {
        $(".modal-overlay").fadeOut(); #서서히 사라지게 하는 애니메이션 효과
        $('body').css("overflow", "scroll"); #닫았을때 다시 스크롤생기는
    });
});

https://ssimplay.tistory.com/460

[참고 블로그]

[jQuery] 모달창 만들기

 

 

3. 가장 애먹었던 게시물 마다 댓글을 DB에 저장하고, 댓글을 달았던 게시물에 댓글을 DB에서 불러오기

 

일반적으로 하드코딩한 게시물에 댓글을 남기는건 어렵지 않았다.

하지만 업로드를 통해 DB에서 데이터를 불러와 .append 한 게시글에는

댓글이 달리지 않았고, 또한 댓글이 달리게 한 후에도 댓글이 첫번째 게시글에만 달리는등

한가지를 해결하면 연달아서 문제가 발생하는 상황이 닥쳤었다...

이에 관해서 열심히 구글링도 해보고 찾아봤지만 결국엔 튜터님의 도움을 받을 수 밖에없었다.

 

게시글=post 게시글마다 _id 고유번호가 있는데 이를 가져와서 각 게시물의 댓글이 붙여지는 div와

댓글이 등록되는 input창의 id값 혹은 class를 그 _id 번호로 지정을 해줘야 했다.

 

 

 

게시글을 불러오는 Ajax Get 코드에서 마지막 한줄을 추가해 post_id 로 고유번호를 가져왔다.

function post_listing() {
    $.ajax({
        type: "GET",
        url: "/listing",
        data: {},
        success: function (response) {
            let posts = JSON.parse(response['posts']) #JSON.parse를 붙여서 _id값을 가져올 수 있게 한다

            for (let i = 0; i < posts.length; i++) {
                let post_picture = posts[i]['post_pictures']
                let post_comment = posts[i]['post_comments']
                let post_pic = posts[i]['post_pic']
                let post_id = posts[i]['_id']['$oid'] # _id 고유번호를 가져오는 코드

이후에 댓글이 붙여지는 div에 class를 jQuery로 post_id로 지정을 해주었고

#댓글 붙여지는 div
<div class="${post_id}">
                    
</div>

댓글이 입력되는 input창의 id 값도 post_id로 지정을 해줬다.

댓글창을 id로 하고 div에 class로 준 이유는 input창의 class로 줘서 가져오면 입력값을 인식을 못했고 id로만 가져와야

인식이 가능했다. div는 class로 가져와서 붙여줘도 잘 붙어서 문제가 없다고 생각했다.

<input type="text" class="form-control" id="${post_id}" placeholder="댓글 달기 ..."/>

add_comment() 함수에도 post_id값을 넣어준다.

<button id = "comment-1"onclick="add_comment('${post_id}')">게시</button>

add_comment() 함수 코드

function add_comment(post_id) {
    let comment = $(`#${post_id}`).val()  #jQuery로 jQuery값으로 받은 id or class 불러올때 `` 백틱을 사용한다.

    $.ajax({
        type: 'POST',
        url: '/comment',
        data: {comment_give: comment, post_give: post_id},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    })
}

마지막으로 붙여주는 함수 코드 show_comment()

function show_comment() {

    $.ajax({
        type: "GET",
        url: "/comment",
        data: {},
        success: function (response) {
            let rows = response['comments']
            for (let i = 0; i < rows.length; i++) {
                let comment = rows[i]['comments']
                let post_id = rows[i]['post_id']
                             
                let temp_html = `<p>user_id</span> ${comment}</p>`

                $(`.${post_id}`).append(temp_html)
            }
        }
    });
}

 

 

4. 동적인 요소에 Event 바인딩 적용 문제

이제 댓글들을 각 게시물에 달리게 적용시키고나서 DB에서 데이터를 가져오는것까지 성공했는데..

게시물들이 하드코딩된것이 아니라 .append로 추가된 html에 코딩된 요소가 아니라서 

로딩하는 단계에서 temp_html이 로딩되는속도보다 DB에서 데이터가 더 먼저 도착해서 

게시글에 댓글이 표시가 안되는 문제가 생겼다.

$(document).ready(function () {
    show_comment()
})

구글링을 통해 임시방편으로 아래의 코드로 나오는걸 확인하고

$(document).on('click',function () {
    show_comment()
})

튜터님의 도움을 받아 임시방편으로 딜레이를 걸어서 나오게끔 해뒀다..

$(document).ready(function () {
    setTimeout(function () {
        show_comment();
    }, 500);
});

이러한 문제가 생길줄은 꿈에도 몰랐어서.. 렌더링 한다음에 호출하는 방법을 연구해봐야 할것같다..동기,,비동기 call

 

 

5. 느낀점

이번 백엔드 프로젝트를 진행하면서 한가지 가장크게 느꼈던 점은 프론트엔드를 처음했을때보다

더 어떻게 구현해야할지에 대한 구상이 안되서 훨씬 복잡하고 까다롭게 느껴졌다.

공부하지 않은 부분들까지 찾아서 적용해가면서 하는 부분이 정말 어려웠었고,

자료를 찾아도 이게 맞는지 틀리는지도 몰라서 일일히 적용해보고 에러나면서 하다보니

한가지 문제에도 해결하는데 시간이 많이 걸렸었다. 

남은기간동안 열심히 필수사항들을 구현해서 프로젝트를 잘 마무리하고 더 발전해서

찾은 자료들을 잘 적용시켜서 슥슥 구현해내는 개발자가 되고싶다.