# errorBoundary

16개의 포스트
post-thumbnail

Error Boundary

React는 16버전부터 컴포넌트에서 발생하는 에러를 기록하며, 깨진 컴포넌트 대신 fallback UI를 보여주는 ErrorBoundary라는 개념을 도입하였습니다.ErrorBoundary를 통해 컴포넌트에서 에러가 발생했을 때, 이를 캐치하고, 사용자들에게 에러가

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

React Suspense + ErrorBoundary 개념과 활용

개인 학습용으로 정리한 글입니다.Suspense는 children의 로딩이 완료될 때까지 다른 컴포넌트를 대신 보여줄 수 있게 해준다. REST API와 같이 비동기로 데이터를 가져오는 작업에서 활용도가 높다.어떤 컴포넌트가 필요한 데이터가 아직 준비가 되지 않은 상태

2023년 4월 25일
·
0개의 댓글
·
post-thumbnail

사용자 경험 개선을 위한Concurrent UI Pattern

프론트엔드에서 실무경험을 하며 사용자 경험(UX)가 얼마나 중요한 지 깨닫게 되고있다. 데이터를 페칭해오는 시간 동안 UX를 개선하기 위해 개발자들은 많은 고민을 하고있다.그것에 대해 공부하던 도중 React Query와 함께 Concurrent UI Pattern을

2023년 4월 25일
·
0개의 댓글
·
post-thumbnail

React 비동기 처리와 성능 향상(feat. lazy, Suspense, ErrorBoundary)

BilliG 프로젝트에서 API 통신으로 데이터를 fetching 할 때, 리액트쿼리의 useQuery를 통해 isLoading, isError를 받아와 컴포넌트 내에서 비동기처리 로직을 작성했었다. 이렇게 작성한 코드가 올바른 방법인지에 대해 코치님들께 질문을하였고

2023년 1월 9일
·
1개의 댓글
·

[React] 프론트엔드 에러 핸들링 1편 ( with. ErrorBoundary )

안녕하세요 HP 입니다 :) 오늘은 React ErrorBoundary공식 문서를 활용하여 프론트엔드에서 에러 핸들링을 하는 방식에 대해서 얘기해보겠습니다. 📚 개념 리액트에서는 ErrorBoundary를 아래와 같이 설명하고 있습니다. 자바스크립트 에러가 전체

2022년 12월 9일
·
0개의 댓글
·
post-thumbnail

[React] Error Boundary(에러 바운더리)

[React] Error Boundary

2022년 12월 6일
·
0개의 댓글
·

ErrorBoundary with React Query

레벨로그 프로젝트 상황에 맞는 에러처리 같은 API를 통해 응답을 받아오더라도 상황에 맞는 에러처리가 필요하다. 예를 들어 A라는 콘텐츠가 있다고 생각해보자. A라는 콘텐츠가 주가 되는 화면이 있다. 이 화면에서는 A의 API 응답에 에러가 오면 에러 페이지로 리다

2022년 10월 30일
·
0개의 댓글
·

React ErrorBoundary를 사용하여 에러 처리 개선하기 (with react-query)

에러가 발생하면 개발자들은 개발자 도구를 열어 에러 내용을 확인할 수 있지만 사용자에게 무엇이 잘못된지 알 수 없고 또한 어플리케이션의 모든 작업이 중단되어 좋은 경험을 줄 수 없다. 따라서 우리는 적절히 에러를 핸들링해 줘야 한다.

2022년 7월 12일
·
1개의 댓글
·

React Error Handling

ErrorBoundary

2022년 6월 1일
·
0개의 댓글
·

ErrorBoundary

react 에서 에러를 처리하기 위해서 ErrorBoundary를 사용하면 된단다.에러 경계(Error Boundaries)react-error-boundary그런데이 내용을 꼼꼼히 보지 않아서 원하는 대로 fallback 페이지를 보여주지 못하는 문제가 있었다.그래서

2022년 5월 18일
·
0개의 댓글
·
post-thumbnail

[패스트 캠퍼스 FE] 리액트 맛보기 - 4

1️⃣ 리액트 Element에 스타일 입히기2️⃣ Ref로 DOM 다루기3️⃣ Form 다루기4️⃣ Error 다루기이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!잔여 연산자➡️ 입력받는 값들을 모두 태그 안에 설정해줌특정 DOM을

2022년 5월 13일
·
0개의 댓글
·

[REACT] 에러바운더리에서 에러가 잡히지 않는 경우

최종 수정일 : 2022-03-24https://ko.reactjs.org/docs/error-boundaries.html명령형 대신 선언형으로 에러를 처리하기 위해 회사에서 쓰고 있다.명령적 해결 - https://wani.kr/posts/2015/

2022년 3월 24일
·
0개의 댓글
·
post-thumbnail

[KDT]FCFE - 7주4일 React ( Hooks )

React Hooks hooks 이전 컴포넌트 내부에 상태가 있다면? class 컴포넌트 내부에 상태가 없다면? 라이프사이클을 사용해야 한다면? class 라이프사이클에 관계 없다면? function class component function comp

2022년 1월 6일
·
0개의 댓글
·
post-thumbnail

에러핸들링의 중앙 집중화 [Errorboundary 와 리덕스]

리덕스와 에러바운더리를 통한 에러집중화를 통해 모든 에러를 로깅하고 사용자에게 전달해보자! 사용자와 확인창을 통해 대화를 해보자.

2022년 1월 1일
·
0개의 댓글
·
post-thumbnail

[React] ErrorBoundary 사용하여 에러 핸들링 하기

📌 Intro React는 16 버전부터 앱의 하위 컴포넌트 트리에서 발생하는 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 ErrorBoundary라는 개념을 도입하였다. ErrorBoundary를 통해 컴포넌트에서 에러가 발생했을

2021년 10월 30일
·
0개의 댓글
·
post-thumbnail

[React] 9. 라이프사이클 메서드

1. 라이프사이클 메서드 정리 ✍ 1.1 render() 함수 라이프사이클 메서드 중 유일한 필수 메서드이다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 예를 들어, div 태그, 컴포넌트 등 주의할점❗

2021년 9월 28일
·
0개의 댓글
·