일단 저장

페이지네이션은 배열 형태로 데이터를 가져와서 일정 크기로 잘라서 보여주는 것이다. 이를 구현하기 위해서 필요한 것은 총 게시물 갯수 totalCount 총 페이징 그룹 갯수 totalPages = Math.ceil(totalCount / limit) 한 페이지당 게시물 수 limit (viewPerPosts) 페이지당 보여줄 버튼 수 viewPerPages 현재 페이지 번호 currPage 페이지 첫째 번호 firstNum = currPage - ( currPage - 1 % viewPerPages) + 1 페이지 끝 번호 lastNum = currPage - (currPage % viewPerPages) + 5 정도가 필요하다 장점은 데이터를 가공하기가 한결 쉽다! DB단에서 SQL문으로 트리구조로 데..

Faker.js는 더미 데이터를 생성해주는 라이브러리다. 이미지도 숫자도 텍스트도 모두 생성해준다. React에 넣을 더미 데이터를 이미지 따로, 글 따로~ 무료 공개 API를 검색해서 일일이 붙이느라 덕지덕지 코드가 붙어 힘들었는데, 이제는 실제 서버 API를 붙이기 전까지 faker.js로 간편하게 더미데이터 뭉치를 만들 수 있다. 실 서버에서는 API에서 응답받은 데이터를 객체로 받아서 컬럼마다 떼어 쓸 것이므로 이쪽이 좀 더 적절해 보인다. npm install @faker-js/faker --save-dev import { faker } from '@faker-js/faker' const example = () => { const dummyData = { name: faker.name.first..

Swiper는 캐러셀 슬라이드를 쉽게 사용할 수 있는 라이브러리다. 하지만 CSS 파일을 import해야 스타일이 입혀지고 다양한 설정값이 있어서 원하는 대로 설정할 수 있으나 동시에 복잡하다는 단점이 있다. npm i swiper Swiper를 사용하려면 다음과 같이 작성한다. 공식 문서를 참고하여 자주 사용하는 기능 위주로 작성하였다. //Swiper컴포넌트와 슬라이드 컴포넌트를 불러온다 import { Swiper, SwiperSlide } from 'swiper/react' //Swiper의 기본 css import 'swiper/css' //navigation과 pagination은 import 해야 그려준다. import 'swiper/css/navigati..

CSR 클라이언트 사이드 렌더링 서버에 요청하면 html과 js를 받아 클라이언트 측에서 렌더링한다 (다운받는 동안 페이지는 비어있다) 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전제적인 페이지 완료 시점은 SSR보다 느려진다 클라이언트에서 그려주므로 서버 부하가 상대적으로 적다 SSR 서버사이드 렌더링 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라짐 더불어 SEO(search engine opti..

React에서는 CORS 오류를 피하기 위해서 package.json에 proxy를 추가해주거나, 혹은 웹팩 설정파일을 수정해야 했다. 그러나 Next.js에서는 Next.config.js 파일에 rewrites를 추가해주면 된다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async rewrites() { return [ { source: '/api/:path*',//api request path destination: 'http://localhost:8080/api/:path*',//목적 path }, ] }, } module.exports = nextConfig 백엔드인 스프링부트에서 설정할..

더보기 JSP를 쓰면 뷰가 종속되고 모델과 구분도 되지 않아서 불편하지만 thymeleaf를 쓰면 뷰를 독립할 수 있고 html로 읽어올 수도 있다 그러나 자바스크립트를 사용하는 frontend web framework와는 상이한 템플릿 문법을 따로 익혀야 하며 JSTL 태그 등으로 작성한 구문이 html만 불러온 상태에서는 동작하지 않을 수 있다 그에 반해서 React는 자바스크립트로 동작하며 자바스크립트 외에 다른 문법을 익힐 필요가 없다 만약 데이터를 불러와야 하는 부분이라면 그에 맞게 자바스크립트를 수정하면 될 일이다 리액트 문법 또한 자바스크립트로 구현되었다는 점이 장점이라고 생각한다 또한 react + springboot 통합빌드환경을 구성했더라도 react 와 springboot의 서버를 따..

Next.js 프로젝트에 Mui를 추가하는 것은 React 프로젝트에 추가할 때보다 몇가지 설정이 추가로 필요하므로 처음할 때는 혼란을 겪을 수 있다. material-ui 깃허브 레포지토리에 예제로 Next.js를 제공하므로 이것을 깃으로 받아서 사용하면 된다. https://github.com/mui/material-ui/tree/master/examples/nextjs GitHub - mui/material-ui: MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design syst MUI Core (formerly Material-UI) is the React UI library yo..

React의 SSR(서버 사이드 렌더링)을 위한 프레임워크인 Next.js 개발편의성이 리액트보다 좋다는 평이 많음 Windi css는 Tailwind css 와 스타일을 공유하지만 몇가지 유틸성이 추가되었다 (현재 Tailwind css는 v.3 이지만 Windi css는 Tailwind css v.2를 계승했다 완전히 같지는 않지만 유사한 점이 많다) 1. 클래스에 특정값을 지정할 수 있음. 테일윈드에서는 지정된 클래스 속성값을 넣어야 했으나 Windi css는 bg-[#FFFFFF] 이런 식으로 값을 지정할 수 있다. 2. breakpoint를 활용하여 스타일을 지정하는 것뿐(sm:w-full md:w-2/3) 아니라, 특정 폭 이상 이하를 < 를 사용하여 지정할 수 있다. 3. 가상선택자를 사용한..