왕가's history

프로젝트 진행 중에 BE 담당자가 swagger를 서버에 올려주지 않고, yaml 파일로 전달 줘서 불편함을 겪고 있었습니다. swagger홈페이지 열어서 yaml파일을 import해도 되지만, 따로 페이지를 작성하여 보고자하는 목적에 해당 라이브러리를 사용하게 됐습니다. https://www.npmjs.com/package/@types/swagger-ui-react 설치 npm i @types/swagger-ui-react 홈페이지 나와있는대로 npm 설치 사용법 import SwaggerUI from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; export default function Swagger() { const url = '폴더..

일반적인 pagenation은 간단히 설명하고, useSWRInfinite에 대해 소개하고자 합니다. https://swr.vercel.app/ko/docs/pagination Pagination 기본 pagination은 useSWRInfinite를 필요로 하지 않습니다. function Page ({ index }) { const { data } = useSWR(`/api/data?page=${index}`, fetcher); // ... 로딩 및 에러 상태를 처리 return data.map(item => {item.name}) } function App () { const [pageIndex, setPageIndex] = useState(0); return setPageIndex(pageIndex..

Mutate mutate는 원격 데이터 및 캐싱된 값을 변경, 갱신하기 위해 사용됩니다. 다른 곳에서 해당하는 키값에 데이터를 post나 delete, patch 등 작업이 일어났을 경우, 캐싱된 데이터를 갱신해야 될 때 사용된다고 보면 됩니다. (revalidation) Global과 Bound 두 가지로 나눠져 있습니다. Global Mutate useSWRConfig 또는 swr을 import 해서 사용하게 됩니다. import { useSWRConfig } from "swr" function App() { const { mutate } = useSWRConfig() mutate(key, data, options) } /////////////////////////////////////// impor..

2023.07.03 - [Front-End/Library] - Library] SWR 저번 게시글에 이어서 SWR 여러 개념? 기능? 들을 설명하려고 합니다. 전역설정 만약 SWR을 사용하는데 fetcher가 중복된다면 고려해서 사용하면 좋을 듯한 기능입니다. import useSWR, { SWRConfig } from 'swr' function Dashboard () { const { data: events } = useSWR('/api/events') const { data: projects } = useSWR('/api/projects') const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // 오버라이드 // ... } funct..

SWR(Stale-While-Revalidate) swr은 데이터를 가져오기 위한 React hook 라이브러리로 보시면 됩니다. 서버에 GET요청을 하고, 결과를 받아와 간편하게 사용할 수 있습니다. 단순히 axios만 사용하는 것보다 효율이 좋다고 보시면 됩니다. 대표적인 특징으로 빠르고, 가볍고, 재사용이 가능한 데이터를 가져온다. 내장된 캐시 및 요청 중복을 제거 실시간으로 동작 3가지를 볼 수 있을 듯합니다. (저는 캐시 데이터를 사용하고, 중복으로 요청을 안 한다는 게 큰 장점으로 생각합니다.) 공식 홈페이지는 아래와 같습니다. https://swr.vercel.app/ko 설치 npm i swr yarn add swr 기본 구성 const { data, error, isLoading, isV..

Swiper 이번에 프로젝트 진행하면서 사용한 Swiper 라이브러리에 대해 적어보려고 합니다. 공식 홈페이지는 아래와 같습니다. https://swiperjs.com/react 제가 요즘은 React만 사용하고 있기 때문에 React방식으로 작성하였습니다. 설치 npm i swiper 기본 구성 HTML 삽입 미리보기할 수 없는 소스 공식 홈페이지에 나와있는 소스에서 이것저것 수정해 봤습니다. 간단히 설명하고, 제가 사용했던 방법 설명하려고 합니다. modules : 기본 Swiper 외에 모듈을 추가하여 디자인을 수정할 수 있습니다. Navigation, Pagination, Scrollbar 총 3가지 모듈을 추가한 상태입니다. 사용된 모듈들은 추가로 옵션을 설정할 수 있습니다. 위 예시로는 pag..

2023.06.27 - [Front-End/Library] - Library] Axios 이전 Axios글을 기반으로 마지막 코멘트에 달았던 내용들을 다뤄보려고 합니다. 동시요청 axios .all([axios.get(), axios.get(), req3...]) .then(axios.spread((res1, res2, res3, res4) => { // 요청 성공했을 때 }) ) 한 번에 여러 개의 데이터를 갖고 오고 싶을 때 사용하면 될 듯합니다. Instance const axiosInstance = () => { const instance = axios.create({ baseURL: 'http://localhost:3000/account', withCredentials: true, xsrfCoo..

Axios Node.js와 브라우저를 위한 HTTP 비동기 통신 라이브러리로서, Promise 타입입니다. BackEnd ↔ FrontEnd 사이의 통신하는 수단으로, JS에서 주로 사용되는 ajax나 fetch와 같다고 보면 됩니다. Promise기반이라 데이터를 다루는데 편리함 Response가 자동으로 JSON형태로 변경 CSRF보호 기능이 내장 기본적으로 내장된 것이 아니기 때문에 따로 설치가 필요 등으로 볼 수 있을 것이다. fetch와 ajax를 보완한 라이브러리로 볼 수 있습니다. CSRF(XSRF) : 웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(CRUD 등)를 특정 웹사이트에 요청하게 하는 공격 설치 npm install axios yarn ad..