'22.07.21 Today I Learned

<학습내용>

- git stash

- 페이징 처리하는 법(어이없는 실수 포함..)

 

---

 

1. git stash

 

프로젝트를 하면서 git을 쓰고 있다보니 git에 대해서 다양하게 공부해보게 되는 것 같다. 그동안 commit, push만 쓰다가 이제 rebase도 알게 되고 cherry-pick도 알게 되고 오늘은 stash에 대해서 알게 됐다.

 

git stash는 일종의 현재 작업한 코드 변경사항을 임시저장을 하는 것이다. git stash를 하면 임시저장이 되면서 작업하던 변경사항들은 사라진다. git stash는 주로 어떤 작업을 하다가 다른 요청이 있어서 다른 작업을 해야되는 경우에 브랜치를 바꿀 일이 있을 때 쓰면 꽤 유용하게 쓸 수 있을 것 같다. 하던 작업을 커밋하기는 좀 껄끄러울 때 stash를 해두면 좋을 것 같다.

 

[사용방법]

 

명령어

- stash할 때: git stash

- stash한 거 불러올 때: git stash apply

- stash한 거 불러옴과 동시에 staged 하고 싶을 때: git stash apply --index

- stash한 거 삭제할 때: git stash drop

 

 

 

2. 페이징 처리하는 법(어이없는 실수 포함)

 

프로젝트에서 댓글을 불러올 때 속도가 좀 느린 거 같아서 페이징을 적용해보려고 페이징 기능을 구현해보게 됐다. 제공해준 스프링 심화반 강의에서 페이징을 다뤘기에 참고하면서 할 수 있어서 좋았다. 다만 프론트를 구성할 때 강의내용대로하면 안 되는 부분이 있어서 그걸 찾느라 삽질한 부분, 그리고 내가 어이없는 실수를 하면서 시간을 하아아아아안참 삽질한 부분이 좀 아쉬웠다.

 

[백엔드]

 

1. 컨트롤러

page는 페이지 번호를 말하는 것이고 size는 한 페이지당 보일 게시물의 개수를 의미한다. 그런데 코드를 보면 (page-1)을 해주는 부분이 있다. 이것은 프론트엔드와 백엔드가 페이지 번호 인덱싱을 하는 방식이 다르기 때문에 처리를 위해서 이렇게 해준 것이다. 프론트엔드 쪽에선 페이지번호가 1,2,3, ... 이런 식으로 가는데 백엔드 쪽에서는 0,1,2,... 이렇게 가기 때문에 클라이언트 쪽에서 넘어온 페이지번호에서 -1 을 해줘야 서버에서 인식을 하고 처리를 할 수 있다. 

 

 

2. repository

 

repository 부분은 Page를 활용해주면 된다. 그리고 인자에 Pageable pageable을 추가해주면 된다.

 

 

3. service

 

Pageable을 사용해서 페이징을 해주게 한 다음 아까 만들어 둔 repository에 있는 쿼리메소드를 사용하면 된다. 

 

 

백엔드 쪽은 Spring Data JPA를 사용해서 하면 어렵지 않게 할 수 있었다. Spring Data JPA가 없다면 엄청 복잡했을텐데 이렇게 간단하게 할 수 있어서 신기했다.

 

 

[프론트엔드]

 

JS 코드

function getComments() {
    let newsId = getNewsId();
    $('#comment-container').empty();
    $('#pagination').pagination({
        dataSource: `http://localhost:4993/api/comments/${newsId}`,
        locator: 'items',
        totalNumber: 120,
        alias: {
            pageNumber: 'page',
            pageSize: 'size'
        },
        pageSize: 3,
        showPrevious: true,
        showNext: true,
        ajax: {
            beforeSend: function() {
                $('#comment-box').html('댓글 불러오는 중...');
            }
        },
        callback: function(data, pagination) {
            $('#comment-container').empty();
            for (let i=0; i<data.length; i++) {
                let comment = data[i];
                let commentId = comment.commentId;
                let modifiedDate = comment.modifiedAt;
                let time = time2str(new Date(modifiedDate));
                let content = comment.content;
                let username = comment.profileResponseDto.username;
                let nickname = comment.profileResponseDto.nickname;
                let profilePicLink = comment.profileResponseDto.profile_pic == "default" ? "/static/profile_pics/profile_placeholder.png" : getProfileUrl(username);
                addHTML(commentId, time, content, username, nickname, profilePicLink);
            }
        }
    })
}

 

HTML 코드 추가할 것

<div id="pagination" class="pagination"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>

 

프론트엔드 쪽은 pagination.js 라는 제이쿼리 라이브러리를 사용했다. 제이쿼리 라이브러리이기 때문에 제이쿼리를 head 태그 안에 넣어둬야한다.

 

 

간단설명

 

- datasource는 내가 요청을 보낼 컨트롤러의 주소를 써주면 된다. 이 부분에서도 처음에 좀 삽질을 한 것이 있는데 앞에 http:localhost:4993 을 안 붙여주니까 404 에러가 계속해서 떴었다. 그냥 ajax 콜을 할 때는 이 부분을 따로 안 붙이고 할 수 있도록 세팅을 해둔 것이 있는데 여기선 ajax 콜이 아니기 때문에 붙여줘야 했던 것이었다.

 

- totalNumber는 페이지 총 개수이다. 임의로 일단 120개로 해뒀다.

 

- alias는 쿼리파라미터로 들어갈 page와 size의 이름을 자기가 수정할 수 있게 하는 것이다.

 

- pageSize는 한 페이지에 보일 게시물의 숫자를 의미한다.

 

- ajax는 callback에 도달하기 전 수행할 동작을 의미한다.

 

- callback이 일종의 ajax 콜의 success에 해당한다고 보면 된다. 두 개의 인자를 가지는 data에는 요청을 해서 받아온 응답 데이터가 들어있다. pagination에는 pagination.js 라이브러리가 제공하는 Object가 들어있다. 

 

 

[어제 내가 삽질한 이유]

 

코드를 다 짜고 화면에서 테스트를 해보니 페이지를 넘길 때마다 해당 페이지에 있는 글만 불러와지는 것이 아니라 전에 있는 페이지 밑에 계속 댓글이 붙어서 나오는 것이었다. 도대체 이유를 모르겠어서 애먼 JS 코드만 한참 찾고 공식문서만 한참 뒤졌는데 원인이 아예 다른데 있었다. 

 

$('#comment-container').empty();

 

이 부분이 문제였다. comment-container라는 아이디를 가진 div를 비우고 댓글을 불러와야한다. 그런데 내가 원래 그 div의 아이디를 comment-box로 해놨었는데 그걸 미처 바꾸지 않았던 것이다. 그래서 div가 비워지지 않고 댓글이 불러와졌던 것이다.

 

정말 어제 하루종일 이것 때문에 고생고생고생삽질삽질삽질을 했는데 이런 단순한 휴먼에러였다는게 믿기지가 않으면서 한편으로 짜증도 나면서 정말 침착하게 코드를 봐야한다는 것을 다시 한 번 느낄 수 있었다.

 

 

 

<참고>

pagination.js 라이브러리 공식문서

https://pagination.js.org/index.html

Pagination.js | Home