Node.js CRUD 게시판 생성을 정리합니다. Show 이번 포스트는 Read입니다. 📋 게시판 html간단히 작성한 page.html입니다.
포스트의 숫자가 10개가 넘어가면 페이징이 적용되도록 되어있습니다. 또한 테이블 컬럼이 번호, 제목, 글쓴이의 3개로 이루어져 있으므로 만약 테이블에 3개 미만의 값이 들어가는 경우, 여기에 주목할 것은 ASP.NET 인라인 식과 페이징입니다. ASP.NET 인라인 식
html 페이지에 있는 <%=~%>, <%~%> 은 ASP.NET 프레임워크에서 제공하는 인라인 식입니다.
이 외 4가지의 인라인식이 더 있습니다. 참고 링크를 아래에 남깁니다. ✔ 페이징단순히 포스트를 나열하는 경우 갯수가 많으면 많을 수록 화면이 복잡해집니다. 따라서 사용자의 직관성 개선을 위해 포스트를 10개씩만 제한하여 표시합니다.
페이징을 간단하게 정리하면 다음과 같습니다.
그러므로 따로 어려운 것 없이, 그대로 for문으로 작성하고 만약 남은 포스트가 없는 경우 for문을 강제로 끝내면 됩니다. 페이징 번호는 (총 갯수)➗(출력할 갯수)로 구해 html에 출력합니다.
앞서 언급한 인라인식을 통해 선택한 페이징 번호를 전달합니다. 완성된 html 화면입니다. 📋 게시판 접속 라우터 - 1
사용자가 정상적으로 게시판 버튼을 클릭했을 때 사용됩니다. 곧장 1번 페이징의 게시판 화면으로 보내줍니다. req.session.refresh는 조회수 폭증을 막는 값으로 임의로 설정해둔 것으로 후술할 작성글 접속 라우터 부분에서 정리합니다. 📋 게시판 접속 라우터 - 2
페이징 번호를 클릭했을 때 거쳐가는 라우터입니다. ID 컬럼 기준으로 내림차순으로 정렬시킨 조회 결과 값을 통해 특이사항으로는 포스트가 아예 없는 경우에 대한 분기입니다. 글이 없는데 페이징 로직이 실행된다던가..하는 데에서 오는 비효율성을 막고 또한 포스트가 저장되는 board 테이블의 AUTO_INCREMENT를 1로 초기화하여 pageEmpty.html은 page.html과 구조가 모두 똑같지만 대략 아래와 같은 화면으로 구성되어 있습니다.
📋 작성글 html
html파일은 다음과 같이 3가지로 나뉘어져 있습니다.
위의 html은 1번에 해당되는 예시입니다. 당연히 자기 자신의 post에 대한 추천을 누르면 안되므로 반대로 2번의 경우, 글 수정 및 삭제 버튼 대신 추천 버튼이 있고
📋 작성글 접속 라우터
작성된 글에 접근했을 때 거치는 라우터입니다.
0게시판 화면에서, 제목을 클릭하면 포스트에 접근할 수 있습니다. 우선 현재 사용자가 글의 작성자인지 확인하고, 맞다면 그에 맞는 페이지를 렌더링합니다. 글의 작성자가 아니라면 방문자로 취급한 분기로 넘어갑니다. user 테이블엔 사용자들이 추천한 글의 ID를 모아둔 recomPost 컬럼이 있습니다. 해당 컬럼 값 중, 현재 접근하려고 하는 글의 ID가 포함되어있는지 확인하여 포함되어 있다면 추천 해제 버튼이 있는 html, 구조는 다음과 같습니다. ✔ 조회수 폭증 방지여러 커뮤니티나 카페를 보면, 조회수나 추천수를 기반으로 그 중 간혹 발생하는 것이 새로고침을 통한 조작인데요, 그것을 미리 방지하는 세션 값을 심어두었습니다. 1해당 값의 초기화 위치가 곳곳에 분포되어있어, 부득이 구조도로 표현합니다.
위와 같이 하면 처음 포스트에 접근했을 때만 조회수가 증가하고 이후 새로고침을 해도 refresh값이 false이기 때문에 조회수가 증가하지 않습니다. 🙄 후기추천, 추천해제 라우터는 그저 전달받은 ID를 통해 DB 값을 검사하고 값을 증가시키거나, 또는 감소시키는 것뿐이라 작성하지 않았습니다. 다음 작성할 Update에서는 드디어 async await로 구성시켜둔 부분이 나옵니다. |