[연습장] Youtube Data API를 통한 유튜브 동영상 리스트를 만들어 보자. (8) 댓글 기능 구현 - 댓글 테이블에서 SELECT 해오기

 

이번에는 동영상을 선택했을 때 각 videoId마다 등록되어 있는 댓글을 목록으로 표출 해보려고 한다. 

아마 댓글은 이걸로 마지막.. ( 물론 수정, 삭제, 답글 기능을 넣을 수도 있지만 생략 )

 

그럼 바로 시작해보도록 하자.

 

동영상을 클릭했을 때, 댓글을 가져와야 하니, 해당 기능은 기존 로직을 조금 수정해주었다.

 

 

프론트단

============================================================================

 

youList.js 수정

loadVideo (item) {
    let url = '//www.youtube.com/embed/'+item.id.videoId+'?rel=0';
    this.$children[1]._data.url = url;
    // this.$children[1].loadPlayList(item); 삭제
    this.$children[1].init(item); // init 함수 생성후 item을 넘김
    this.$children[1]._data.isVisible = true;
}

 

 

기존의 관련영상을 가져오는 함수만 호출했던 로직에서 init이라는 함수를 호출하면서 item을 넘겨주도록 했다.

 

 

videoPop.js

// 기존 reply컴포넌트에 replyList를 props로 전달하는 것을 추가
<reply :item="item" :replyList="replyList"></reply>



init (item) { // init함수 생성
    this.item = item;
    this.loadPlayList();
    this.loadReply();
},
 async loadReply(){ // loadReply 함수 생성

    let commmentData = { // 데이터 적재
        'videoId' : this.item.id.videoId
    }
    const response = await fetch('/selectComment.do',{ //비동기 통신
        method : 'POST',
        headers : {
            'Content-type' : 'application/json'
        },
        body : JSON.stringify(commmentData)
    });
    const json = await response.json(); // Promise객체 정제
    this.replyList = json; // replyList에 담아줌
    
},

 

 

init함수로 item을 받아 한번에 처리하도록 코드를 수정하였다. 그리고 <reply> 컴포넌트에서

item만 넘기던 것을 비동기통신을 통해 가져온 replyList 또한 같이 넘겨주도록 수정하였다.

 

 

reply.js

export default{
	// props로 replyList를 받아주도록 수정
    props: ['item' , 'replyList'],
	template : `
            // 댓글 목록을 추가함.
            <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 650px;">
                <div class="list-group list-group-flush border-bottom scrollarea">
                    <div v-for="reply in replyList">
                        <div class="d-flex w-100 align-items-center justify-content-between">
                            <strong class="mb-1">{{reply.content}}</strong>
                            <small class="text-muted">{{reply.createDate}}</small>
                        </div>
                        <div class="col-10 mb-1 small">{{reply.writer}}</div>
                    </div>
                </div>
            </div>

            <div class="b-example-divider"></div>
            `

 

 

reply.js에서 props로 받는 데이터 및 template외에는 변경한 게 따로 없어서, 나머지 코드는 안올린다.

그냥 replyList를 부모 컴포넌트로부터 받아, 댓글 목록을 v-for로 돌리는 로직을 추가해주었다. 

 

 

백엔드단

============================================================================

 

IndexController.java

@RequestMapping(value="/selectComment.do", method = RequestMethod.POST)
@ResponseBody
public List<IndexVO> selectComment(@RequestBody IndexVO commmentData) {
    return indexService.selectComment(commmentData);
}

 

IndexService.java

public List<IndexVO> selectComment(IndexVO commmentData) {
    return indexMapper.selectComment(commmentData);
}

 

IndexMapper.java

public List<IndexVO> selectComment(IndexVO commmentData);

 

IndexMapper.xml

<select id="selectComment" parameterType="indexVO" resultType="indexVO">
    select * from replyTable where VIDEO_ID = #{videoId}
</select>

 

이 정도의 간단한 쿼리문은 그냥 어노테이션 방식을 써도 될 것 같지만, 같은 방식을 계속 써줘야 코드작성 방식이

혼용 되지 않으니 xml방식으로 작성하였다. 결과는 아래와 같다.

 

 

결과화면

 

 

이렇게 댓글까지 정상적으로 작성되었다. 다음에 시간이 되면 네이버 오픈 API를 통해 로그인을 하고

로그인 한 사람만 댓글이 작성되고, 작성자ID를 직접 넣어줄까 한다..