메인 프로젝트 리팩토링을 하면서 axios 인터셉터에 대해 접하게 되었는데, 저는 아직 axios 인스턴스에 대해서도 잘 모르는 것 같아 인스터와 함께.. 나아가 인터셉터도 알아볼까합니다. ● 🥹 Axios 인스턴스가 뭔데..? 일반적으로 쓰는 axios에서 더 나아가 instance를 설정해줄 수 있습니다. 즉, 기본 값을 설정해줄 수 있는게 인스턴스라고 생각하면 됩니다. const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); const instance = axios.create({ withCredentials: true })..
React
● 도입 React Fiber는 React의 핵심 알고리즘을 지속적으로 재구현한 것입니다. React 팀이 2년 넘게 연구한 결과의 결과물입니다. React Fiber는 애니메이션, 레이아웃, 제스처와 같은 영역에 대한 성능을 높이는 것이 목표입니다. 대표적인 기능은 증분 렌더링으로, 렌더링 작업을 여러 그룹들로 분할하여서 여러 프레임의 구조로 펼쳐 놓는 것입니다. (다루기 편하게 그룹화하여 펼쳐놓는다는 뜻인 것 같습니다.) 다른 핵심 기능으로는 새 업데이트가 들어올 때 진행하고 있던 작업을 일시 중지, 또는 재사용하는 기능, 다양한 유형의 업데이트에 우선순위를 지정하는 기능, 새로운 동시성 프리미티브 등이 있습니다. 리액트에서 렌더링 최적화를 위해 가상돔(virtual DOM)을 사용하여 실제 돔과 바..
● react 팀이 18 버전을 통해 해결하고자 했던 문제들? 3월 29일, React 18 버전이 released 됐습니다. React 18 버전에는 크게 아래와 같은 변화가 있었다고 합니다. New Root API Automatic Batching New Concept “Transition” SSR support for Suspence React 팀이 18 버전을 통해서 개선하고자 했던 내용은 무엇 일까요? 여러 가지 개선 사항이 있지만 그중 두 가지만 살펴보자면, 첫 번째는 Batching 작업을 통한 Rendering 퍼포먼스 향상, 두 번째는 새로운 기능인 Transition 을 통해 UI 업데이트에 우선순위를 부여하거나, 느린 네트워크 환경에서의 UX 향상을 살펴볼 수 있을 것 같습니다. ● ..
요즘 다시 공식문서를 하나씩 읽어가고 있는데, 오늘 읽으면서 이전에 헷갈렸던 걸 다시 공부하는.. 느낌으로 포스팅을 해봅니다. 오늘 공부한 공식문서 Render and Commit – React The library for web and native user interfaces react.dev 렌더링 그리고 커밋 – React The library for web and native user interfaces ko.react.dev Triggering (렌더링 트리거) Rendering (렌더링) Commit (커밋) 공식문서에서는 트리거 -> 렌더 -> 커밋 의 단계를 음식을 주문하고 주문을 받고 음식을 내오는 예시를 들어 설명하고 있습니다. ● Trigger 트리거 렌더링을 촉발시키는 이유는 2가지..
● Vite 환경에서 eslint, prettier 적용해보기 (airbnb 모드로 설정하기) 먼저 vite 프로젝트를 설치해주었습니다. npm create vite@latest ❍ eslint 적용하기 vite를 설치하고 나니까 기본적으로 eslint가 적용되어 있었는데요, eslint의 기본설정인 eslint:recommended와 react환경과 관련된 플러그인들이 extends에 설정되어있었습니다. eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh 대체 이 플러그인들이 무엇인가.. 현타가 왓읍니다.. eslint:recommended는 초기 설정입니다. eslint-plugin-react : eslint에 대한 리..
솔로 프로젝트 리팩토링 중, 리듀서 함수는 순수해야하기 때문에 useEffect에서 fetch를 통해 처음에 데이터를 받아오고 성공 했을 시, 리듀서함수에 액션에 데이터를 담아 dispatch 해주었습니다. export default function useFetch(initialUrl: string){ const dispatch = useDispatch(); const [url, setUrl] = useState(initialUrl); const [data, setData] = useState([]); const fetchData = async () => { fetch(url)// .then(res => res.json()) .then(data => { const newData = getLocalStor..
