본문 바로가기

react

(5)
ErrorBoundary 가 포착할 수 없는 에러와 그 이론적 원리 분석 서언 ErrorBoundary 는 하위 컴포넌트에서 발생하는 자바스크립트 에러를 잡아서 fallback UI를 보여주는 React 컴포넌트 입니다. 하지만 하위에 존재하는 컴포넌트에서 에러가 발생한다고 하여, 모든 에러를 잡아주는 것은 아닙니다. React 공식문서에는 다음과 같은 에러는 ErrorBoundary가 포착할 수 없다고 합니다. 과연 저것은 암기해야하는 것들일까요? 그렇지 않습니다. JavaScript 와 React를 잘 이해하고 있다면 당연한 현상입니다. 이 글에서는 에러바운더리가 특정 에러를 포착하지 못 하는 원리를 설명해보려고 합니다. 목차 [사전지식] 실행 컨텍스트와 예외처리 Case1. 이벤트 핸들러 Case2. 비동기적 코드 Case3. 서버 사이드 렌더링 Case4. 자식에서가 ..
React CleanCode #1, 합성으로 관심사를 분리하기 서언 안녕하세요. React CleanCode 첫 번째 주제로 Composition(합성)을 다룹니다. 최근에 회사에서 많은 코드를 작성하면서 느끼는 것이 있었는데요. 바로 프론트엔드가 다루어야할 관심사가 너무나 많다는 것입니다. 크게는 UI 로직(단순 UI, 애니메이션 로직, 하드코딩적인 요소), 서버 로직(데이터 패칭, 업데이트 로직, 유저 인증인가 로직, 로딩처리, 에러처리), 로그 등 이 있습니다. React를 사용하며 이러한 관심사를 잘 분리하지 않는다면, 스파게티 코드가 된다는 것을 체감했습니다. 그러면 어떻게 관심사의 지옥에서 벗어날 수 있을까요? 즉 관심사를 어떻게 잘 분리해야 할까요? 관심사 분리는 보통 함수(클래스) 분리를 통해 이루어집니다. React에서 함수의 실체는 훅, 컴포넌트,..
혹시 무분별하게 Suspense 를 사용하고 계신가요? (react-query) 더보기 서언 React v18 부터 Suspense가 API call에 따른 Loading 상태를 표현할 수 있게 되었습니다. 그에 따라, react-query, swr 같은 data fetching library가 Suspense를 지원하고 있습니다. suspense 옵션만 true로 설정해주면, API 요청 훅이 알아서 내부 처리를 통해 Suspense를 동작시킵니다. 이로써 로딩을 선언적으로 보여줄 수 있게 되었고, ErrorBoundary 조합과 함께라면 컴포넌트는 Success 케이스만 표현하면 되었습니다. 이런 혁신에 대해서는 잘 인지하고 있었지만, Suspense의 위험성에 대해서는 인지하지 못 했습니다. 특히 저희 서비스는 잘못된 Suspense 사용으로 어플리케이션 로딩 성능 저하를 겪었..
ErrorBoundary로 Toast, ErrorFallback 등 공통적인 에러를 처리해보자 서언 현재 꼭꼭 서비스를 운영하고 있습니다. 안정적인 서비스 운영, 보다 나은 유저 경험을 제공하기 위해 (1) 섬세하고, (2) 빈틈 없는 에러 처리가 필수라는 생각이 들었습니다. (1) 섬세하다는 것은 상황에 맞는 에러를 적절히 보여 준다는 것을 의미하고, (2) 빈틈 없다는 것은 모든 API 요청에 에러 케이스를 고려한다는 것을 의미합니다. 그러면 고민이 심화됩니다. (1) 에러를 어떤 기준으로 분류하여 처리할 수 있을까? (2) 모든 요청에 에러를 붙인다면, 반복을 줄일 수 없을까? 이를 고민하여 나름대로 에러를 분류해보았고, ErrorBoundary(에러 경계) 라는 도구를 활용해 선언적이고 추상화된 에러 처리를 시도해보았습니다. 본 글은 에러 처리 전략, ErrorBoundary를 다룹니다. ..
AWS EC2 인스턴스로 웹 서버(react) 배포하기 [1/2] react-app(web server)을 배포하기 위하여 vercel이나 netlify와 같은 무료 호스팅 툴을 이용하여 웹 사이트를 배포할 수도 있지만, 트래픽 제한이 있기 때문에 언젠가 AWS 클라우드를 빌려 배포해야할 순간이 올 것입니다. 클라우드 / http 에 대한 정보는 기술하지 않고, 배포 방법에 집중하여 기술하겠습니다. AWS에 문외한인 프론트엔드 개발자를 위해 씁니다. 전체적인 순서는 다음과 같습니다. (1편 - 웹 사이트 배포) 1. AWS 가입 2. 인스턴스 생성 3. 인스턴스에 접근하여 AWS 컴퓨터 로컬 환경 조작 4. build 후 웹 사이트 띄우기 (2편 - Custom 도메인과 연결 - with 가비아) 1. port 없애기 (3000 -> 80) 2. 가비아에서 Name S..