Cooka프로젝트/게시판 2

pagination을 수정해보자!

pagination 이란? 쉽게 말해 페이지별로 다른 데이터를 보여주기위해 , 데이터를 일부만 받아오는 방식입니다. ❗ 실수하고 있던점 맨처음 페이지네이션을 구현해보자 했을때 , 기능을 구현하는데만 열중했었다. "SELECT * from recipe" 쿼리문으로 recipe table의 모든 행을 가져온뒤 ,그 데이터를 바탕으로 페이지를 나누었다. 간단한 예시코드 const [currentPage, setCurrentPage] = useState(1); //현재페이지넘버 const ITEMNUM=9; // 페이지당 보여줄 데이터의 갯수 const indexOfLast = currentPage * ITEMNUM; const indexOfFirst = indexOfLast - ITEMNUM; //indexO..

react-quill 라이브러리 이미지처리

react-quill라이브러리를 사용하여 게시글글 작성페이지를 구현했습니다. react-quill의 사용방법에대해는 자세히 다루지않겠습니다. 글내용인 안녕하세요가 html형식으로 출력되는걸 볼수있습니다. 하지만 이렇게 이미지를 넣게되면 이렇게 img파일이 아주긴 문자열로 저장되는걸 볼 수 있습니다. 그이유는 react-quill라이브러리에서 이미지를 삽입하면 이미지가 Base64인코딩된 문자열로 저장되기때문입니다. 이렇게되면 이미지파일을 직접 사용하는 것보다 더많은 데이터를 전송해야하고, 이로인해 웹페이지의 로딩속도가 느려질수 있습니다. 따라서, 이미지첨부를 하게되면 서버에api요청을 보내 response로 URL을 돌려받고, 이미지태그의 src에 인코딩된 문자열대신 URL을 넣어야합니다. 이작업을위해 ..