끄적끄적

게시판을 만들 때 테이블 리스트, 알람 리스트 를 만들 때 가상 테이블을 사용하여 효율을 향상시킬 수 있습니다.가상화란 현재 페이지에 보이는 부분만 렌더링하여 더 빠르고, 효율적인 성능이 나오게 합니다. 가장 대표적인 가상화 테이블의 라이브러리로는 react-window와 react-virtualized가 있습니다.한동안 react-virtualized가 react-window 보다 사용자수가 많았는데 갑자기 사용자가 역전이 되어있네요.react-virtualized가 용량이 약2~3배 가량 높고, 그만큼 좀 더 많은 기능을 제공하는 것 같지만,저는 단순히 테이블 요소만 리스팅하기만 하면 되므로 비교적 용량이 적은 react-window를 사용하겠습니다.# Yarnyarn add react-window#..

React에서 hook이란? 공식문서에서는 다음과 같이 정의합니다. Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. React 공식문서에서의 hook의 motivation의 결론은 다음과 같습니다. Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다. 저의 게시판에서 사용할 훅은 세션관리에 이용할 custom hook입니다.매 페이지마다 login session을 관리하여, token의 생명을 검사하고, refresh와 logout 등의 관리를 하는 hook입니다. 현재 로그인을 진행하면 cookie를 통해 accessToken과 refr..

이번 프로젝트에서 사용하기로 한 상태관리 라이브러리는 recoil 입니다. 그동안은 redux만을 사용해보았는데, 이번엔 recoil을 사용해보고 싶어서 사용해보기로 했습니다. 자주 하지 않은 업데이트, 메모리 누수.. 등 다양한 단점들이 존재하여 현재 Redux에 비해 매우 사용률이 저조하긴 하지만 그래도 react서 만든 것이기 때문에 한번쯤은 사용해볼 가치가 있다고 생각합니다. (devtools가 없어 개발자도구에서 확인이 불가능하여 매우 불편한점은.... 매우 불편...) 그래도 초기 세팅 및 사용법이 엄-청 간편하기 때문에 빠르게 작성하여 진행할 수 있다는 장점이 있습니다. // src/recoil/user.ts import { atom } from 'recoil' export const ses..

문득이자 예전부터 해보고 싶었던, 관련 분야의 게시판을 만들어 보기로 했습니다. 사실 게시판이라고 하면 단순히 CRUD만 있는 간단한 프로젝트 아니냐 라고 할 수 있지만, 그렇게 따지면 무엇이 신선하고 실용적일까.. 하는 생각에 사용자에게 친숙하지만, 내가 하고 싶은, 필요할 것 같은 서비스를 만들어 보는거 자체에 큰 의미가 있다고 생각해서 만들어 보게 되었습니다. 정확히 어떠한 서비스이냐는 서비스의 완성단계에 가면 부끄럽지만 소개를 한번 드리고 싶습니다. 같이 프로젝트를 진행하는 서버 개발자 한분과의 작업을 통해 진행할 것이며, 디자이너 및 기획자는 없기에, 최대한 디자인이 잘된 라이브러리를 이용해볼것입니다. 작업의 진행방향은 디자인구성(MUI) → 상태관리 라이브러리 세팅(Recoil) → API 연..

이전포스팅에서는 useQuery에 대해서 간단하게 알아보았습니다. useQuery가 data를 get 해오고 렌더링 하는 것이 주 목적이었다면, useMutation은 data를 post하고 delete하는데 목적이 있다고 생각하면 될 것 같습니다. 가장 기본적인 형태로는 import { useMutation } from 'react-query'; const mutation = useMutation(updateDataFunction); // 폼 제출 또는 상호 작용 후 실행 mutation.mutate(dataToUpdate, { onSuccess: () => { // 성공 후 작업 수행 }, onError: (error) => { // 실패 후 작업 수행 }, }); // or const someMut..

이전 포스팅에서 React-Query란? 에 대해서 간단하게 알아봤습니다. 그래서 오늘은 안쓸 이유가 없는 React-Query의 찐!기초 사용법을 알아보려고 합니다. 우선 라이브러리를 설치해 줍니다. npm i react-query 다른 파일들은 생성하지 않을꺼고 App.tsx에 간단하게 작성해보려고 합니다. 여기에서 사용할 Test API는 fake api 인 https://jsonplaceholder.typicode.com/guide/ 사이트를 참고합니다. import React from 'react'; import { QueryClient, QueryClientProvider, useQuery } from "react-query"; const queryClient = new QueryClient(..