백엔드 기초 입문과 미니 프로젝트 01

지난 2주 간 스파르타 코딩 클럽 사이트에서 제공하는 웹 개발 종합반 5주 완성 강의를 듣고 개인 미니 프로젝트를 진행했습니다.

프로젝트 목표

최신 영화 목록에 대해 별점과 코멘트를 등록할 수 있고, 각 영화마다 현재까지 달린 코멘트를 확인할 수 있는 사이트를 개발한다.

 

위 사진에서처럼 이미 정해전 영화 목록에 대해서 코멘트를 달 수 있는 기능과 영화 제목을 클릭하면 지금까지 달린 코멘트를 볼 수 있는 페이지로 전환되도록 구현하였다.

아래 내용은 입문자로서 구현하면서 고민했던 부분에 대한 내용이다.

 

html 전환

메인페이지에 나열된 특정 영화 제목 중 하나를 클릭하면 reviews.html 페이지로 넘어가되 reviews 페이지의 골격은 유지하면서 movie_id에 따라 콘텐츠가 다르게 적용되도록 구현한다.

고민했던 부분

20개의 영화를 대상으로 각각 href를 적용하고 싶지는 않았다.
그래서 a 태그의 href를 활용하여 클릭 시 reviews.html로 넘기는 과정에서 movie_id를 전달하고, reviews.html에서 받는 방법을 몰랐었는데 아래와 같이 해결할 수 있었다.

먼저 다른 html로 이동하기 위해서는 랜더링 설정이 필요하다. flask 기준에서는 아래와 같이 작성한다.

@app.route("/reviews")
def reviews_page():
    return render_template("reviews.html")

이동하고자 하는 reviews.html파일의 쿼리로 movie_id 데이터를 전달할 수 있다.

 

<script> 
  let temp_html = `<a href=/reviews?movieId=${movie_id} target="_blank" class="card-title">영화 제목</a>` 
  $('#cards-box').append(temp_html) 
</script>

reviews.html에서는 아래와 같이 URLSearchParams 메소드를 통해 쿼리 데이터를 받아 변수로 저장할 수 있다.

<script>
  const urlParams = new URLSearchParams(window.location.search); 
  const movieId = urlParams.get('movieId'); 
</script>

 

추가적으로 아래와 같은 방법도 시도해 보았다.

@app.route("/reviews/<movie_id>", methods=["GET"])
def get_review(movie_id):
    # MongoDB에서 리뷰 데이터 가져오기
    movie = list(db.movies.find({"movie_id": movie_id}, {"_id": False}))
    comments = list(
        db.reviews.find({"movie_id": movie_id}, {"_id": False}).sort(
            "upload_time", DESCENDING
        )
    )
    reviews = {"movie": movie, "comments": comments}
    return render_template("reviews.html", reviews=reviews)

<script>
  const reviews = JSON.parse('{{ reviews | tojson}}');
</script>

영화 제목 태그의 href를 /reviews/${movie_id}로 설정하여 fetch함수 없이 바로 백엔드로 보내도록 시도해보았다.
하지만 render_template 함수에서 html 랜더링과 함께 전달할 수 있는 데이터 길이에 한계가 있는 것으로 보였다.
프론트에서 전달받은 jsonString의 길이가 상대적으로 짧은 경우에는 프론트에 잘 전달되었지만 길 경우 JSON.parse 과정에서 오류가 발생하였다. 이는 jsonString이 도중에 잘려나가는 바람에 온전한 json 형태가 아니게 전달 되어서 "JSON 형태가 아니다." 라는 의미의 오류인 것으로 보인다.