#2. 리뷰작성 화면

리뷰 작성화면

왼쪽 탭의 리뷰작성 버튼을 누르면 리뷰를 작성할 수 있는 페이지로 이동하게 된다. 

 

1) 리뷰 작성 시 모든 칸이 작성되어 있는지 확인해주어야 하며

2) submit 버튼을 누르면 ajax 통신으로 post요청을 보내게 되어, Reviews 콜렉션에 작성한 리뷰가 저장되어야 한다.

3) 잘 저장되었다면 프론트엔드로 res.status(200)을 보내게 된다.

 

먼저 프론트엔드에서 1, 2번 기능은 다음과 같이 코드를 작성한다.

 

<script>
            function submitReview() {
                // 입력된 정보 받아오기
                let title = $("#title").val();
                let username = $("#username").val();
                let password = $("#password").val();
                let content = $("#exampleFormControlTextarea1").val();
                let musicUrl = $("#basic-url").val();

                // 리뷰작성을 위한 정보들을 다 입력했는지 확인
                if (!title || !username || !password || !content || !musicUrl) {
                    alert("모든 정보를 입력해주세요!");
                    return false;
                }

                // 정보가 다 있다면 api에 POST요청 보내기
                $.ajax({
                    type: "POST",
                    url: "/api/write",
                    data: {
                        username: username,
                        password: password,
                        title: title,
                        content: content,
                        musicUrl: musicUrl
                    },
                    success: function (response) {
                        alert(response['message']);
                        location.href = '/';
                    }
                })
            }
        </script>

jQuery로 각 input칸에 적힌 value들을 가져온다. 그 후 값들이 다 있는지 검사한 후에, 다 존재한다면 작성한 내용들을 post요청으로 보낸다. post요청이 잘 이루어졌다면, 백엔드로부터 성공 메시지를 받아 alert로 출력한 뒤, 메인화면으로 렌더링해준다.

 

post요청으로 전달받은 리뷰 데이터를 백엔드에서는 다음과 같이 처리해준다.

var express = require('express');
const Reviews = require("../schemas/reviews");
var router = express.Router();

// 작성한 글을 저장하는 기능
router.post('/write', async(req, res)=>{
  const { username, password, title, content, musicUrl } = req.body;
  new_review = await Reviews.create({ username, password, title, content, musicUrl });

  if (new_review){
    res.send({message: "저장완료"})
  }

}) 

POST요청의 body에 담긴 데이터들을 꺼내서 Reviews 컬렉션에 이 데이터들로 새로운 리뷰를 만들어 준다. async, await를 거쳐 새 리뷰가 잘 생성되었다면, 저장완료 메시지를 보내준다.