반응형 React25 [React] Recoil의 effects를 이용해 localStorage, sessionStorage에 데이터 저장하기 ⚡ 전역 상태 Web Storage에 저장하기 리액트에서 전역 상태 관리를 위해 Recoil을 도입해서 사용했습니다. 여러 컴포넌트에서 사용하는 서버 데이터를 전역으로 저장했지만 새로고침을 하게 되면 데이터가 증발하고 다시 API를 호출해서 웹 스토리지에 데이터를 저장하는 방법을 사용했습니다. 그럼 Recoil Effects를 이용해 Web Storage인 Local Storage와 Session Storage에 자동으로 연동하는 방법을 소개합니다. ⚡ Web Storage Web Storage는 웹 브라우저에 직접 데이터를 저장할 수 있는 기능으로 Local Storage와 Session Storage 두 가지 종류가 있습니다. 쿠키는 4KB의 적은 용량이지만 웹 스토리지는 5MB라는 넉넉한 용량을 사.. 2023. 3. 22. Github Action + Docker + Nginx + React 야매 CI/CD 완성기 📒 Github Action + Docker + Nginx + React 야매 CI/CD 완성기 📌 계기 빈약한 서버 지식을 갖고 있었던 저는 입사 후 사내 구축된 CI/CD 환경을 보고 신문물을 만난 원주민마냥 깜짝 놀랐습니다. 이렇게 좋아보이는 기능을 제가 직접 해보지 않고선 직성이 풀리지 않죠. 그러다 어느날 몇 개월간 사용하지 않아 먼지 쌓여있는 개인 윈도우 노트북이 눈에 들어왔고, 기존 데이터를 밀어버린 후 우분투를 설치해서 하고 있던 개인 프로젝트를 자동으로 배포할 수 있게 도전해 봤습니다. 서버 쪽 기초 하나 없이 삽질했던 기억에 저와 같은 상황에 있으신 분들에게 조금이나마 도움이 되었으면 하는 마음에서 쓴 글이니 기술적인 부분에서는 많이 부족할 수 있습니다. 또한 분량 때문에 기능 구현에만.. 2023. 3. 20. [React/TypeScript] Debounce, 일정 시간동안 발생한 이벤트 중 마지막만 실행 ⚡Debounce란Debounce란 일정 시간 동안 연속적으로 발생했던 이벤트들 중마지막만 실행시켜 과다한 호출이나 렌더를 막아 최적화하는 기술입니다. 예를 들어 이번 개인 프로젝트 중 입력 시 중복체크를 위해 API를 호출하는데한 글자 타이핑할 때마다 API를 호출하는 것이 부담되어 Debounce를 도입하여 해결했습니다.const debounce = any>(fn: T, delay: number) => { let timeout: ReturnType; return (...args: Parameters): ReturnType => { let result: any; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { .. 2023. 3. 8. [React] input 한 글자 입력 시 focus out 되는 현상 ⚡input focus out issue 📌 현상 재현 HTML 삽입 미리보기할 수 없는 소스 📌 원인 반복문으로 컴포넌트 생성할 때 귀찮아서 키 값을 uuid 생성 함수로 부여했더니 다음과 같은 현상이 발생했습니다. input에 한 글자 입력하면 상태 변화로 인한 리랜더링 리랜더링으로 인한 uuid v4() 함수 재실행으로 키 값 변경 키 값 변경으로 인해 다른 요소로 인식해서 focus 유지 안됨 📌 해결 요소가 갖고 있는 고유의 값으로 key 값을 부여해 리랜더링이 일어나도 동일한 key를 유지할 수 있도록 했습니다. 2023. 3. 2. [React + Craco + TS] Alias 절대경로 + 폴더 index 절대경로 설정 방법 ⚡ Craco + Typescript, Alias로 절대경로 설정하기 이 글을 본다는 것은 상대경로와 절대경로의 차이에 대해 이미 알고 있고, 상대 경로 지옥에 빠져 본 것이라 생각해 그 둘의 차이점을 설명하는 것은 패스하겠습니다. 기존에 절대경로를 설정하는 방법 중 craco+ craco-alias 은 지원이 종료되어 사용할 수 없고 react-app-rewired 는 익숙치 않아 craco만을 이용해 설정하는 방법을 소개합니다. //상대경로 import { ComponentA } from '../../../components/ComponentA' //절대경로 import { ComponentA } from '@components/ComponentA' import { ComponentB } from '.. 2023. 2. 14. [React] 렌더링 배치, 리렌더링 최적화 기초 ⚡️ 리액트의 렌더링 배치 리액트는 상태 변경을 감지해 렌더링 과정이 작동하여 변경사항을 반영합니다. 이러한 점은 상태변경에 대해 매번 렌더링 과정을 거치기엔 많은 리소스가 요구되기 때문에 리액트 18버전부터 여러 상태 변경을 묶어 batching(일괄) 처리 하여 리렌더링 하는 개념이 강화되었습니다. 이 개념을 몰랐을 때 API 호출을 위한 하나의 파라미터 상태 변경을 연관성(시간, 장비, 상태 등) 별로 묶은 컴포넌트에 위임해서 사용했는데, 여러 컴포넌트에서 하나의 상태를 변경하다보니 배치 타이밍을 조율하지 못해 API가 여러번 호출 됐던 경험이 있어 최적화 측면에서는 정말 중요한 개념이라 생각합니다. 그럼 어떻게 리액트가 상태 변경을 배치 처리 하는지 알아보겠습니다. 📌 상태 변경 배치 처리 con.. 2023. 2. 11. [React + Recoil] 재사용 전역 모달 만들기 ⚡️ Recoil로 전역 모달 만들기리액트로 모달 만들기 귀찮으신 분들은 다음 글 참고하셔서 라이브러리로 순식간에 모달 구현 해보세요![React] 세상 쉬운 리액트 모달 라이브러리첫 프로젝트에서는 아래 코드와 같이 각각의 모달마다 상태와 추가 코드를 작성했습니다.const [ modal1, setModal1 ] = useState({onOff: false})const [ modal2, setModal2 ] = useState({onOff: false})return ( { modal1.onOff && } { modal2.onOff && } )이와 같이 코드를 작성하다보니 초기에는 괜찮았지만모달의 개수가 많아질수록 관리해야 할 상태들과 추가 코드들이 점차 불어나 관리가 힘들 지경이 되었.. 2023. 2. 6. 반응형 이전 1 2 3 다음
오픈 채팅
