한 걸음씩 성장하기

Introduction 개발초기 빠른 메이킹을 위해서 UI 라이브러리 중 MUI를 주로 사용하였었습니다. 그러다 보니 컴포넌트를 만드는 실력은 크게 늘지 않았습니다. 대신 자연스럽게 다른 방법을 찾게 되었습니다.MUI 컴포넌트들은 어떤 방식의 구조와 코드로 만들어진걸까? 그렇게 작업하면서 틈이 생기면 가끔 들여다보곤 했습니다. 이번에는 새로운 프로젝트를 진행하면서 MUI에서 제공하는 기능은 챙기면서 커스텀이 필요하다고 판단되어 최근 MUI에서 제공하는 Input을 커스텀하여 Input Component를 만들어보게 되었습니다.빠르게 최종적인 코드는 아래와 같고, 이번 작업을 하면서 배워간 요소들을 작게나마 풀어보려 합니다.import { Box, Input as MUIInput, styled, Typog..

Recoil 사용법 React의 아버지, 페이스북에서 만든 React 전용 상태관리 라이브러리입니다. 설치, RecoilRoot, 폴더구조, atom, atomHook, selector, selectorFamily 순으로 알아보도록 하겠습니다. Recoil 설치 npm npm install recoil yarn yarn add recoil RecoilRoot Recoil 초기연동할 때 사용됩니다. Recoil은 Redux에 비해서 초기설정이 쉽습니다. 우선 Redux를 사용할 때 루트에 Provider 태그를 감싸주는 것처럼 Recoil은 RecoilRoot를 감싸줍니다. // App.js import { RecoilRoot } from "recoil"; import Home from "./Compone..

Recoil-persist 사용이유 새로고침 시에도 데이터가 날아가지 않게 관리를 해주어야 할 때가 옵니다. 주로 사용자가 로그인한 상태에서 새로고침을하면 사용자의 로그인 정보 데이터가 날아가게 되는 곤란한 상황이 발생합니다. 이를 해결하는 방법이 localStorage또는 sessionStorage에 저장하는 겁니다. localStorage : 로컬에 도메인별로 지속되는 storage (브라우저를 닫아도 사라지지 않음) sessionStorage : 세션이(탭, 브라우저)가 종료될 때까지 지속되는 storage (브라우저를 닫으면 사라짐) Recoil-persist 설치방법 npm install recoil recoil-persist Recoil-persist 사용하는 법 예시로 사용자의 MBTI 결과..