🌳Frontend

리액트에서 에러를 처리하기 위한 방법은 여러가지가 있습니다.fetch 라이브러리인 axios 의 interceptor 에서도 처리할 수 있구요, 리액트에서의 error boundary 로도 처리할 수 있죠.그리고 createBroswerRouter의 errorElement 속성으로도 처리가 가능합니다.이 여러가지 방식들의 차이점에 대해 알아봅시다.1. Axios Interceptor에서 에러 처리주로 네트워크 관련 에러나 인증 실패와 같은 HTTP 요청 실패를 처리할 때 사용됩니다.적합한 상황인증: 만료된 토큰으로 인해 401 에러가 발생했을 때 토큰을 갱신하고 다시 요청을 시도하거나, 로그인 페이지로 리디렉션하는 등 사용자 인증 관련 처리가 필요한 경우공통 API 에러 처리: 네트워크 오류, 서버 오류..

리액트에서 에러바운더리를 쓰는 이유에 대해서 알아봅시다.그 이유에 대해 알아보기 전에, 에러 바운더리를 간단히 설명하자면 아래와 같아요. 📒 선언적으로 에러를 처리할 수 있게 해주는 리액트 컴포넌트 기존에 명령형으로 처리했던 로직을 선언적으로 처리할 수 있도록 도와주는데요.더 자세히 알아봅시다.왜 사용해요?사실, 에러 바운더리를 사용하지 않아도 기본적인 에러처리는 가능해요.const MyComponent = () => { const { data, error, } = useQuery(...); if (error) { return 오류가 발생했어요! } return ( {data.data.map(...)} );}위와 같은 코드는 명령형 코드로 분류돼요.명령..

1. 빌드빌드란?빌드란 개발자가 작성한 소스코드를 브라우저가 실행가능한 형태로 변환하는 과정입니다. 빌드 도구프론트엔드엔 다양한 빌드도구가 존재합니다.예시로 webpack, vite, esbuild, rollup.js , parcel, 등이 있습니다. 2. 빌드 과정속에 일어나는 일1. Transpiling우리가 작성한 타입스크립트 코드는 브라우저가 해석할 수 없어요.자바스크립트 문법이 아니기 때문입니다.리액트의 JSX 문법도 해석할 수 없기 때문에 변환과정이 필요해요.브라우저가 해석할 수 있도록, 브라우저가 아는 문법으로 변환하는 트랜스파일링 과정이 필요합니다.추가로, 타입스크립트를 사용하면 타입체킹 과정이 빌드과정에 포함되어 있어요.흔히 들어본 폴리필도 빌드과정에 지원되지 않는 문법을 해석할 수 있도..

해당 게시글은 우아한 타입스크립트 with 리액트 10장을 읽고 정리한 글 입니다. React에서 State 란? - 시간이 지나면서 변할 수 있는 동적인 데이터 - 렌더링에 영향을 줄 수 있는 동적인 데이터 리액트 앱 내에서의 상태는 지역 상태, 전역 상태, 서버 상태 로 분류할 수 있습니다. 리액트 API만 으로도 상태를 관리할 수 있지만, 성능 문제가 발생하거나 규모가 커져 복잡해지면 Redux, MobX, Recoil 과 같은 외부 상태 라이브러리를 주로 활용합니다. 특히나, 컴포넌트 간의 상하관계 사이에서 상태 전달을 위해 과도한 Props drilling 을 막고자 사용합니다. React 에서 State 를 정의할 때 고려해야 할 사항 리액트에서 state가 변하게 되면(업데이트가 되면) 리렌..