728x90
728x90
React 환경에서 caver-js를 설치하고 컴파일하면, 에러가 발생한다. 🧅 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. caver-js에서 사용되는 패키지들이 webpack v5에 포함되지 않았기에 발생하는 문제이다. 이를 해결하기 위해 webpack.config.js에 설정을 해주거나, react-scripts의 버전(to v4)을 낮출 수도 있다. 🍄 webpack.config.js는 리액트에서 node_modules/react-scripts/config 폴더 내부에 존재한다. 하지만 이러한 방법들은 결국 임시방편에 지나지 않는다고 생각하였고, 다른 방법을 찾는 도중에 카이카스..
useCallback useCallback은 자주 볼 수 있는 hook인데, 사용처와 방법에 대해서 확실히 정리하기 위해서 글을 남기기로 하였다. 랜더링의 최적화를 위해서 사용되는 useCallback은 이미 랜더링되었던 동일한 함수라면, 다시 함수가 선언되지 않는다. useCallback은 콜백 함수를 memoization(메모제이션)하고, 의존성이 변경되었을 때만 메모제이션된 함수의 버전이 변경된다. useCallback의 첫 번째 인자로 함수가 들어가고, 두 번째 인자로 deps(의존성)이 들어간다. useCallback에서 반환된 콜백 함수를 변수에 담아 사용한다. deps에는 함수에 사용된 상태나 props가 모두 deps 배열에 포함되어야 한다. 🍉 useCallback 두 번째 인자인 배열(..
많은 데이터를 보여줘야 할 때, 가독성을 위해서 페이지를 나눠야할 필요가 있을 수 있다. Pagination을 통해서, 더 깔끔하게 사이트를 구성할 수 있다. Pagination 컴포넌트의 구현을 위해서 리액트 컴포넌트 라이브러리인 Material UI (mui)를 사용하였다. 🍙 mui 설치 : npm install @mui/material @emotion/react @emotion/styled 🍯 mui Pagination 사용 : https://mui.com/material-ui/react-pagination/#main-content 🍯 mui에서는 division을 나누기 위해서 Stack를 사용한다. React Pagination component - Material UI The Paginati..
프론트엔드 개발을 하다보면, 직면하는 문제가 있다. 나의 경우에는 커뮤니티 사이트를 만들고 있었는데, 댓글을 삭제한 뒤 해당 댓글이 삭제된 페이지를 다시 렌더링해야 했다. 이 경우, delete 요청을 보내고 다시 get 요청을 보내 댓글의 목록을 받아와야 할까? 하지만, 이렇게 하니 다시 Get으로 받아온 데이터는 아직 댓글이 삭제가 되지 않은 상태였다. 이 문제에 처음 직면하였을 때, 내가 선택한 방법은 삭제 후 결과를 받은 뒤 일정 시간이 지나고 다시 Get 요청을 보내 갱신된 데이터를 받는 것이었다. 그러나, 이 방법이 과연 좋았을까? 시간이 지나고 다시 해당 문제에 대해 찾아보니 낙관적 업데이트에 대해서 알게되었다. cont MyPage = () => { const [offButton, setO..
간단하게 리액트 커스텀 훅을 사용해보기로 하였다. 커스텀 훅은 내가 사용해보고 느끼기에, 커스텀 훅이란 기존의 훅이 사용된 함수를 의미하고, use로 시작하는 이름으로 네이밍한 것이 커스텀 훅인 것 같았다. 🍓 커스텀 훅을 만들어 사용함으로써, 반복되는 코드의 함수가 여러 번 재사용될 수 있다. 그리고 커스텀 훅을 사용하면서 알게된 훅의 사용법으로는, 훅은 조건부로 사용될 수 없고, 렌더링 될 때 조건에 상관없이 실행이 되어야 한다는 점이 있다. 다음으로 내가 만들어 사용해봤던 커스텀 훅의 몇가지 예시를 남긴다. useState를 이용한 input의 데이터를 관리하는 커스텀 훅 import { useState } from "react"; export const useCustomHook = () => { ..
React에서 손쉽게 Form을 작성하고 유효성 검사를 하기 위해서 두 라이브러리를 사용해보았다. npm i react-hook-form npm i yup npm i @hookform/resolvers import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; function Form() { // yup으로 유효성 검사 const schema = yup.object({ firstName: yup.string().required("이름을 입력해 주세요."), lastName: yup.string().required("성을 입력해 주세요."),..