# Suspense

44개의 포스트
post-thumbnail

[알게된 것] React 18? 뭐가 달라졌을까?

React v18.0은 지난 3월 업데이트 되었는데, 기존의 업데이트 내용과는 달리 즉시 사용 가능한 개선 사항들이 많이 포함되었으며, 기존 애플리케이션 구축 방식에 큰 영향을 미칠거라는 공식 문서의 문구가 존재하는 만큼 정말 다양한 변화가 있었다.1\. New Roo

어제
·
0개의 댓글
·
post-thumbnail

Suspense, Error Boundary로 비동기 로딩, 에러 로직 공통화하기(feat. Next.js, React-Query)

충림이, refashion 프로젝트를 진행하던 중 컴포넌트에서 반복적으로 작성했던 에러, 로딩 처리가 비효율적이라는 것을 계속 깨닫고 있었고 이를 꼭 개선하고 싶었습니다. 때문에 검색을 통해 토스의 한재엽님, 박서진님이 공유해주신 자료를 보며 개선할 수 있게 되었고 제

3일 전
·
0개의 댓글
·

원티드 프리온보딩 1차 : 기술과제

천오백명의 사람이 프리온보딩 프론트엔드 과정을 신청했다고 한다.하지만 정작 수업에 들어온 인원은 600명이 안됐다.하루에 세시간밖에 안되는데 커리큘럼이 굉장히 알차다.주제도 다양하고 개발자로서 취업해보지 않은 내 입장에서 생각해본 적 없는 이야기들을 많이 해주셨다.다만

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

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

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

2023년 1월 9일
·
1개의 댓글
·
post-thumbnail

React Suspense와 Image loading

프로젝트를 진행하면서 react-query와 suspense에 대한 만족도가 아주 높았다.그런데 화면에서 아주 거슬리는 것이 있었는데 이미지 로딩 문제였다.이미지 로딩을 처리하는 여러가지 방법이 있었지만 suspense를 이용하여 처리하면 좋겠다라는 생각이 들었다.먼저

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

Unit4 회고

[React]심화 🔆 Virtual DOM Virtual DOM > Virtual DOM이 나오게 된 배경🤔 실제 DOM은 스크립팅 언어가 접근 및 탐색하는 속도가 빨라 탐색 후 변경 및 업데이트하는 속도는 역시 빠르다. 하지만 JavaScript로 조작하는 DOM

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

코드 분할 (Code Splitting)

: 웹 애플리케이션 동작에 필요한 HTML, CSS, JavaScript 등의 파일들을 묶어서 제공하는 것대부분의 React 앱들은 Webpack이나 Rollup과 같은 툴을 사용해 앱을 번들링(Bundling)한다.하지만 모던 웹으로 발전하면서 JavaScript의

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

리엑트 Suspense 딥다이브

Suspense 발전과정과 꼭 알고 있어야 하는 지식들

2022년 11월 12일
·
5개의 댓글
·
post-thumbnail

사용자 경험 개선을 위한 Skeleton UI 도입 with Suspense

Next.js + Suspense로 Skeleton UI 도입하기

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

[react] 코드 스플리팅을 적용해보자

프로젝트의 사이즈가 커질수록 사이트 초기 로딩 속도가 느려진다는 글을 봤었습니다.. 현재 우리 팀의 프로젝트 규모가 작아 작업을 진행해도 눈에 띄게 로딩 속도가 느려지진 않았지만 코드 스플리팅을 통해 유의미한 성과를 얻어낼 수 있는지 테스트를 해보고 싶었습니다.코드 스

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

Suspense의 동작 원리

React v18에서 공식 릴리즈된 Suspense에 대해 파헤쳐보자.

2022년 9월 29일
·
0개의 댓글
·

React Query와 함께 Concurrent UI Pattern 사용해보기 🐥

내가 생각하기에 프론트엔드 개발을 하면서 가장 중요하다고 생각한 것은 사용자 경험과 성능 개선이었습니다.내가 프론트엔드 개발자가 되어야겠다고 생각한 이유도 사용자 경험을 고민하고 개선하는데 흥미를 느꼈기 때문입니다. 그래서 나도 웹이나 앱을 사용할 때 사용자 경험이 좋

2022년 9월 24일
·
1개의 댓글
·

프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 w React Suspense

좋은 코드의 예시 - Optional Chaining➡ 코드가 간결하다.➡ 성공한 경우 x.foo.bar.baz 의 형태와 차이가 크지 않다.Promise를 반환하는 함수를 React Hook의 인자로 넘기고,Promise의 상태 변화에 따라 Hook이 반환하는 dat

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

[react-query] react-query로 로딩 화면 나타내기

[react-query] react-query로 로딩 화면 나타내기

2022년 8월 7일
·
0개의 댓글
·

[개발자되기: React 심화2] Day-52

함수 이름 앞에 use 붙이기프로젝트 내 hooks 디렉토리에 Custom Hook 위치시키기return 하는 값은 조건부이면 안됨React 18 버전에서는 더이상 ReactDOM.render를 지원하지 않음React 18에서는 이제 createRoot API를 사용함

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

React와 가상 DOM, React Hook

가상 DOM을 사용하는 이유와 React의 Hook에 대한 설명, 코드 분할과 관련된 메서드, 컴포넌트에 대한 설명

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

QueryClient의 Default Options 적용

꿀모 프로젝트를 진행하면서 react-query에 대한 컨벤션 및 커스텀 훅에 대해 작업을 맡게 되었었는데, 이 작업을 진행하면서 공부하게 된 default-options 에 대해서 조금 더 상세하게 정리를 해보도록 한다.

2022년 7월 17일
·
0개의 댓글
·

NextJs에 React18 Suspense 적용하기 (with react-query 적용)

🚪 들어가기 React Suspense는 React 16에서 릴리즈된 기능이다. React 18에서는 추가된 기능을 제공하고 있고 Error Boundary와 합친 기능으로도 사용할 수 있다고 하여 적용해보려한다. 이 글에서는 React 16에서의 Suspense와

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

React Suspense

프론트엔드 어플리케이션에서 데이터 로딩을 관리하는 것은 점점 어려워지고 있다. 이러한 이유 때문에, 프론트엔드 생태계의 다양한 상태관리 라이브러리들이 등장했따.React팀은 이러한 문제를 인지하고 있었고, Suspense는 React 컴포넌트의 Loading state

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

[React] 리액트의 렌더링 방식를 이용해 Suspense로 비동기 Pending 관리하기

해당 포스팅은 리액트의 렌더링 방식를 이용해 SWR, React-Query없이 Suspense로 비동기 Pending 관리하는 방법에 대해 다룬다.

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