아고라 스테이츠 서버구현 / 리액트로 리팩토링 하기

오늘 배운 것

아고라 스테이츠 서버구현 / 리액트로 리팩토링 하기

• React에서 페이지네이션을 구현해봤다.
  react-js-pagination 라이브러리를 설치하여 간편하게 구현할 수 있었다.

  activePage: 현재 페이지
  itemsCountPerPage: 한 페이지당 보여줄 리스트 아이템의 개수
  totalItemsCount: 총 아이템의 개수
  pageRangeDisplayed: Paginator 내에서 보여줄 페이지의 범위
  prevPageText: "이전"을 나타낼 텍스트 (prev, <, ...)
  nextPageText: "다음"을 나타낼 텍스트 (next, >, ...)
  onChange: 페이지가 바뀔 때 핸들링해줄 함수

  props로는 현재 페이지를 변경하는 함수(setCurrentPage)를 받아와 페이지네이션 버튼을 누르는 이벤트가 발생할 때, 상태변경함수를 이용하여 페이지가 바뀌도록 하였다.
  

• 이번 프로젝트에서는 기능별로 컴포넌트, 페이지, api 폴더를 나눈 후, 구현을 시작하였고 css도 css-module을 이용하여 스타일이 겹치지 않도록 하였다
  

아쉬웠던 점은 리액트로 처음부터 기능들을 구현하려는데 css 디자인에 시간을 너무 할애한 것이다. 여기서 HTML, CSS, JS의 중요성을 다시한번 느끼게 되었다.

이후에 구현할 기능들은 생성한 게시글 삭제 / 게시글을 클릭하면 나오는 모달창 CSS로 꾸며볼 예정이다.

++ 서버를 실행하면 react의 index.html을 가져와서 보이게 하고 싶었지만 sendFile을 하면 path 오류가 계속 발생하여 포기했지만 시간날 때 꼭 구현 해봐야겠다.