728x90 React11 [React] useRef 하나로 여러 데이터 관리하기 (feat. ag-grid) 목표: 하나의 useRef 로 현재 Grid 데이터 저장하기 의도: 반복문으로 감싸진 Grid 컴포넌트에 useRef 를 각각 세팅하기가 어려워서, 하나의 useRef 를 통해 여러 Grid 데이터를 관리하고 저장할 수 있도록 하고 싶었다 기능: Grid 추가 버튼을 누르면 Grid 가 추가되고 - 사용자가 Grid 내용을 변경하면 - 변경한 값을 저장한다 방법: useRef 초기값을 null 이 아닌 [] (빈 배열) 로 세팅하여, 하나의 useRef 로 여러 Grid 데이터를 관리한다 부모 컴포넌트 const gridRef = useRef([]) export const Parent = () => { return ( 배열.map((item, idx) => ( )) ) } gridRef 에 빈 배열을 .. 2024. 1. 18. [Axios] Axios Interceptors 사용법 📌 Axios Interceptors ? Axios Interceptors는 axios의 then 또는 catch로 처리 되기 전에 요청과 응답을 가로챌 수 있다. 현재 진행하고 있는 영화 프로젝트의 리팩토링 과정에서 Axios Interceptors를 사용하기로 했다. Axios Interceptors를 사용할 경우, 인증 토큰 관리 : 요청 인터셉터에서 access token의 유효함을 확인하고, header에 실어 보내는 작업을 함 중복 코드 감소 : 요청과 응답을 처리하기 전에 공통적으로 적용되어야 하는 로직 중앙화 전역 오류 처리 : 모든 요청 및 응답에 대해 일관된 오류 처리 구현 📌 적용 코드 request : 요청을 보내기 전에 사용 axios.interceptors.request.use(.. 2023. 7. 29. [No-Cap News] 방치된 프로젝트 리팩토링하기 (feat. React) 프로젝트(Github) : https://github.com/dygreen/nocap-news사용 기술 : React + Redux(RTK) + Styled-components주소 : https://nocap-news.vercel.app/ 거의 1년 정도 실무 경험을 해보니, 그 전에 진행했던 프로젝트들의 부족함이 많이 보이기 시작했다.완벽한 코드는 없으니 (더군다나 내가 작성한 코드이기 때문에..!) 지속적으로 리팩토링이 필요하다고 생각한다. 다양한 프로젝트들 중에서, 취준 기간에 가장 공들였던 프로젝트이기도 하고일단 보여지는 화면부터가 수정이 간절히 필요했던 뉴스앱 서비스 No Cap News부터 손보기로 했다. 이번 글에서는 어떤 부분을 리팩토링하였고, 리팩토링 하는 과정에서 배운점들을 기록해보고자.. 2023. 7. 2. [React] Redux-persist 사용법(Redux toolkit ver.) (+ Next.js, TypeScript) 이번에 회사 이벤트 페이지들을 Vue에서 React로 바꾸게 되었는데, Redux toolkit을 사용하여 필요한 정보를 가져와 화면에 표시하였다. 그러나 store는 새로고침하면 값이 날아가기 때문에 새로고침 시 해당 화면이 그려지지 않는 문제가 발생했다. 이 문제를 해결하기 위해 Redux-persist를 사용하면 좋을 것 같았다. 📌 Redux-persist ? Redux-persist는 store 값을 localStorage나 sessionStorage에 저장하여 새로고침해도 데이터를 유지된다. 새로고침 시 저장공간에 있는 데이터를 Redux에 불러오는 형식으로 이루어진다. 📌 Redux-persist 적용하기 (Redux toolkit ver.) ( Redux toolkit 사용 방법 ) [st.. 2023. 5. 30. 이전 1 2 3 다음 728x90
