지난 글에선 에디터를 붙이는데 성공하였다.
사실 개발이 많이많이 진행되었는데 블로그에 글을 안남겨놓다보니까 아주 과거 시점의 글을 써야하게 됐다...
죄송합네다
에디터를 통해 등록된 글이 저장될 테이블을 만들자.
우선 이렇게 테이블을 만들었다.
설명할 내용은 없지만, 굳이 설명을 하자면 글번호이자 유니크한 ID가 될 ID 컬럼을 생성하고 AUTO_INCREMENT 속성을 줬다.
그 외엔 아주 기본적으로 제목, 작성자, 내용, 작성일자를 가지고 있고, 가린 부분은 권한 처리에 대한 부분이다.
글 목록을 구현함에 있어서 가장 복잡했던 부분은 Paging에 관한 부분이었다.
구현 전에 머리로 생각할때의 페이징처리는 단순히 아래와 같았다.
내가 한번에 보여주고 싶은 글의 수는 5개
전체 글이 20개 있으면 페이지 4개!
...ㅋㅅㅋ...
이번에 윤선이랑 블로그 만들면서 로그인이나, 이런 글 목록에서 뼈저리게 느낀건
뭐든 직접 해보기 전에는 그 일이 얼마나 어렵고, 쉬운지는 모른단 것이다.
난 쉬운 줄 알았지 ㅋㅋ;
https://github.com/AdeleD/react-paginate#readme
쌩유베리감자탕하게도 관련한 라이브러리가 존재한다.
react-paginate는 전체 글 수와 한 페이지에 보여줄 개수만 넘겨주면, 알아서 페이징 처리를 해준다.
/* 게시글 통계 */
SELECT
COUNT(1) AS TOTAL_CNT
, CEIL(COUNT(1) / ${LIMIT}) AS TOTAL_PAGE
FROM LOVE_YS_POST
<choose>
<when test='권한.equals("관리자")'>
WHERE 권한 IN ('0','1')
</when>
<otherwise>
WHERE 권한 IN ('0')
</otherwise>
</choose>
우선 전체 글 수와 페이지 수를 가져올 쿼리는 이런 식으로 작성했다.
아래 권한 부분을 제외하면, 크게 특별한건 없는 쿼리이고 저 LIMIT은 한 페이지에서 몇 개 보여줄건지에 관한 변수이다.
즉, 총 12개의 글이 작성되었고 한 페이지에 5개씩 보여주고자한다면
12 ÷ 5 의 올림값인 3이 전체 페이지로 계산된다.
화면에서 1번과 같은 코드를 통하여 ListStatus (글 통계를 저장할 변수)가 세팅되면
2번 코드가 돌아 load(글 통계변수 세팅여부)에 값이 설정되게 된다.
3번은 페이지 수 로드여부에 따른 페이징 컴포넌트의 렌더링을 처리한 부분이다.
빨간 네모 박스친 부분은 load란 변수가 true일때만 렌더링된다.
이를 통하여 전체 페이지가 몇 페이지인지 가져와지지 않았을 때 렌더링되는 것을 방지한다.
(라이브러리에 기본적으로 세팅되어있는 값이 아마 있었던 것 같다.)
페이지를 누르면 해당 페이지에 속하는 데이터들을 가져와야 목록으로 뿌려줄 수 있다.
여기 마지막에 있는 onPageChange에 바로 page가 변할 때마다 수행할 이벤트를 지정할 수 있다.
onpageChangeHandler의 내용은 위와 같다.
주소에 선택된 페이지를 넣어주고 page 변수에 선택된 페이지를 세팅한다.
page 변수가 세팅되면 2번과 같은 함수가 돌게되고
/* 글 목록 */
SELECT
CONTENTS_ID
, CONTENTS_TITLE
, CONTENTS
, CREATE_DATE
, PAGE_GROUP
FROM
(
SELECT
ID AS CONTENTS_ID
, TITLE AS CONTENTS_TITLE
, AUTHOR AS CONTENTS_AUTHOR
, CONTENTS AS CONTENTS
, DATE_FORMAT(CREATE_DATE,'%Y-%m-%d %H:%i:%S') AS CREATE_DATE
, CEIL(ROW_NUMBER() OVER(ORDER BY CREATE_DATE DESC)/5) AS PAGE_GROUP
FROM LOVE_YS_POST
<choose>
<when test='권한.equals("관리자")'>
WHERE 권한 IN ('0','1')
</when>
<otherwise>
WHERE 권한 IN ('0')
</otherwise>
</choose>
) A
WHERE PAGE_GROUP = (${PAGE_NUM} + 1)
ORDER BY CREATE_DATE DESC
이런 쿼리를 통해 해당 페이지의 글들을 가져오게 된다.
최신순대로 글을 나열하고, 해당 글들이 속하는 페이지 그룹을 계산하여 현재 선택한 페이지에 맞는 글들을 가져온다.
*굳이 페이지 그룹을 계산하는 이유는 권한 및 여러 조건에 맞는 글들만 가져오기 위해서이다.
뿌려줄 글을 가져오고 나면, 해당 글 수만큼 map 함수를 돌며 Part 컴포넌트를 생성하고
Part 컴포넌트는 컴포넌트 클릭시 글을 조회할 수 있는 기능을 갖는 컴포넌트가 된다.
아까 페이징 부분을 제외하고 글 하나하나가 Part 컴포넌트가 되겠다.
이렇게하면, 기본적인 글 목록을 뿌려주는건 해결!
'원앙둥지' 카테고리의 다른 글
도와줘요! 박사님! - 클라이언트와 웹 서버 (0) | 2022.02.07 |
---|---|
윤선이와 블로그 만들기_5. 글 조회와 되돌아오기 처리 (0) | 2021.02.02 |
LUVLOG_S1 (0) | 2020.12.27 |
윤선이와 블로그 만들기_3. 에디터(Toast UI Editor) 붙이기 (2) | 2020.11.21 |
윤선이와 블로그 만들기_2. 리액트(React) 붙이기 (0) | 2020.11.11 |