# Suspense
📆 23.03.24 - React Error Boundary 와 Suspense
runtime에 문제가 생겼을 때, 유저에게 에러메세지를 보여주는게 아니라 바로 error 페이지로 보내주는 라이브러리를 react-error-boundary 라고 한다. 설치 npm i react-error-boundary 라우터에 적용하기. tsx // App.ts
React Suspense와 lazy Loading
Suspense로 선언적인 loading상태 처리와, lazy loading을 적용해 프로젝트에서 초기 로드시간을 감소시킨 부분
React Lazy (Code Splitting)
Lazy, Suspense 등의 리액트 관련 이야기를 하기전에 '코드분할'에 대해서 알고 넘어가자.코드 분할이란 SPA 기반 페이지에서 받아오는 파일을 분할하여 필요시에 해당 파일을 다운받게 하는 기법이다.SPA기반의 웹페이시 진입시 해당 페이지의 모든파일을 받아오게
[Frontend] Lazy Loading, Suspense 그리고 SSR
Suspense, lazy loading을 통한 성능 개선 및 React18에서 SSR에 대한 기능 추가에 관련된 글입니다.
Suspense 도입과 Waterfall 현상 해결하기
Suspense를 도입하는 과정과 이때 발생한 Waterfall 현상을 해결해본 과정에 대해서 작성해보았습니다.
Next.js 에서 데이터를 불러와서 보여주는 방법
Next.js 에서 데이터를 호출해서 보여주는 방법은 참 많은거 같습니다. getServerSideProps를 사용할 수도 있고, useEffect에서 그냥 요청해서 보여줄 수도 있습니다. 요즘 많이 사용하는 react-query를 사용할 수도 있고, SSR + rea
10. Midterm Arrangement 중간정리
10. Midterm Arrangement (중간정리) 참고용 velog https://velog.io/@ty-yun21/react10 참고용 github https://github.com/ty-yoon21/react-study1 commit message : (2023.02.08) 10. Mitrem Arrangement 목표 Styled Compon...
[리액트] Suspense 알아보기
안녕하세요 오늘은..... 개념?? 설명?? 을 해보겠습니다!바로 Suspense에 관한 내용입니다.Suspense 넌 누고..?React.Suspense는 트리 하단에 있는 일부 컴포넌트가 아직 렌더링할 준비가 되지 않은 경우 로딩 지시기 (Loading indica
[알게된 것] React 18? 뭐가 달라졌을까?
React v18.0은 지난 3월 업데이트 되었는데, 기존의 업데이트 내용과는 달리 즉시 사용 가능한 개선 사항들이 많이 포함되었으며, 기존 애플리케이션 구축 방식에 큰 영향을 미칠거라는 공식 문서의 문구가 존재하는 만큼 정말 다양한 변화가 있었다.1\. New Roo
Suspense, Error Boundary로 비동기 로딩, 에러 로직 공통화하기(feat. Next.js, React-Query)
Suspense, Error Boundary를 사용하여 선언적으로 깔쌈하게 비동기 로딩, 에러 로직을 공통화합니다.
원티드 프리온보딩 1차 : 기술과제
천오백명의 사람이 프리온보딩 프론트엔드 과정을 신청했다고 한다.하지만 정작 수업에 들어온 인원은 600명이 안됐다.하루에 세시간밖에 안되는데 커리큘럼이 굉장히 알차다.주제도 다양하고 개발자로서 취업해보지 않은 내 입장에서 생각해본 적 없는 이야기들을 많이 해주셨다.다만
React 비동기 처리와 성능 향상(feat. lazy, Suspense, ErrorBoundary)
BilliG 프로젝트에서 API 통신으로 데이터를 fetching 할 때, 리액트쿼리의 useQuery를 통해 isLoading, isError를 받아와 컴포넌트 내에서 비동기처리 로직을 작성했었다. 이렇게 작성한 코드가 올바른 방법인지에 대해 코치님들께 질문을하였고
React Suspense와 Image loading
프로젝트를 진행하면서 react-query와 suspense에 대한 만족도가 아주 높았다.그런데 화면에서 아주 거슬리는 것이 있었는데 이미지 로딩 문제였다.이미지 로딩을 처리하는 여러가지 방법이 있었지만 suspense를 이용하여 처리하면 좋겠다라는 생각이 들었다.먼저
Unit4 회고
[React]심화 🔆 Virtual DOM Virtual DOM > Virtual DOM이 나오게 된 배경🤔 실제 DOM은 스크립팅 언어가 접근 및 탐색하는 속도가 빨라 탐색 후 변경 및 업데이트하는 속도는 역시 빠르다. 하지만 JavaScript로 조작하는 DOM
코드 분할 (Code Splitting)
: 웹 애플리케이션 동작에 필요한 HTML, CSS, JavaScript 등의 파일들을 묶어서 제공하는 것대부분의 React 앱들은 Webpack이나 Rollup과 같은 툴을 사용해 앱을 번들링(Bundling)한다.하지만 모던 웹으로 발전하면서 JavaScript의
사용자 경험 개선을 위한 Skeleton UI 도입 with Suspense
Next.js + Suspense로 Skeleton UI 도입하기
