FrontEnd 43

useQuery 의 변경점 이해하기

Dominik의 트위터에 useQuery의 변경점에 대한 내용이 올라왔습니다. 이미 우리는 콜백(onSuccess, onError, onSettled)을 많이 사용하고 있습니다. 따라서 콜백을 제거하는 것에 대해 부정적으로 생각할 수 있지만, 기존의 콜백은 예상대로 동작하지 않을 수 있기에 변경이 필요했습니다. API에서 중요한 요소중 하나는 일관성입니다. 사람들은 추상화되어있는 API에서 일관된 응답을 받기를 원합니다. 하지만 useQuery의 콜백들은 그렇지 않습니다. Callback 들여다보기 useQuery에는 성공했을 때, 실패했을 때, 그리고 둘과 관계없이 실행되는 onSuccess, onError, onSettled 콜백이 있습니다. onError를 사용하는 예시를 보면, onError 콜백..

FrontEnd/React.js 2023.09.27

의식의 흐름에 따라 보는 <img> preload

의식의 흐름에 따라 보는 preload 전면팝업 Braze HTML의 이미지가 늦게 그려지는 현상이 발생하였습니다. Nextjs에서 봤던 preload를 듣고 적용하여 팝업에 필요한 리소스 불러오는 시간을 네트워크 slow 3G 기준 8초 줄일 수 있었습니다. Next.js Next.js docs의 컴포넌트 API로 가보았습니다. priority 속성 설명에서 preload관련한 설명을 발견할 수 있었습니다. priority={false} // {false} | {true} When true, the image will be considered high priority and preload. You should use the priority property on any image detected as t..

FrontEnd 2023.09.14

React hydration 알아보기

기존 React 어플리케이션은 번들된 js를 가져와 DOM을 렌더링하는 CSR(Client Side Rendering) 방식으로 렌더링을 하였습니다. 이러한 방식은 번들된 js 코드를 사용하므로 서버구성을 간단하게 가져갈 수 있었고 초기에 번들된 js를 가져오므로 사용자에게 마치 네이티브 어플리케이션처럼 동작하는 경험을 제공해줄 수 있었습니다. 하지만 CSR은 번들된 js로 어플리케이션의 콘텐츠를 화면에 렌더링(FCP)하고 상호작용 까지 걸리는 시간(TTI)이 증가하는 단점을 가지고 있습니다. 따라서 이와 같은 단점을 해결하고자 상황에 따라 SSR을 선택합니다. SSR은 서버에서 정적 페이지를 렌더링하고 JS파일들도 번들링한 후에 Client Side로 전달해주는데, 이 경우 서버에서는 DOM을 조작할 ..

FrontEnd/React.js 2023.05.02

Pagination 알아보기

현재 가게에서 사용하는 메뉴(ex. 떡볶이, 돈까스 등)가 페이지네이션이 안되어있어 6000개가 넘는 가게들의 경우 메뉴와 연관있는 서비스들이 느리게 동작한다는 것을 확인하였습니다. Image CDN을 통한 처리, 코드 스플리팅을 통해서도 한계가 있어 서비스내에서 메뉴들을 페이지네이션하려고 합니다. 페이지네이션의 대표적인 두 방법으로 Offset Pagination, Cursor Pagination이 있습니다. 이 둘을 비교해보고 어떤 것을 도입해볼지 생각해봅니다. Offset Pagination GET /items?offset=10&limit=20 offset과 limit 라는 예약어를 사용해서 데이터를 일정한 크기로 분할하고, 페이지당 항목 수와 페이지 수를 결정하는데 사용합니다. offset은 앞에..

FrontEnd 2023.04.02

React Query와 SWR 비교하기

React 어플리케이션을 만들 때 서버로부터 데이터를 가져오고 사용하는 것을 구현하는 것은 상당히 어려운 일입니다. 따라서 이를 돕기 위해 리액트에서 데이터를 가져오고, 캐싱하며 이를 관리할 수 있는 효과적인 방법을 제공하는 라이브러리들이 생겨났습니다. 이러한 라이브러리들을 데이터 페칭(data-fetching) 라이브러리라고 부르는데 근래 가장 잘 알려진 라이브러리로는 React Query와 SWR이 있습니다. 이 두 라이브러리가 어떤 특징을 가지고 있는지 그리고 어떤 차이점이 있는지 이 글을 통해 소개해보려합니다. React Query React Query는 React앱이 숨쉴 수 있도록(Breeze) 데이터를 가져오고, 캐싱하고 서버의 상태와 동기화(Synchronizing)을 쉽게 합니다. Rea..

FrontEnd/React.js 2023.02.18

JSX.Element와 ReactElement 차이 이해하기

리액트를 사용하며 ReactElement와 JSX.Element는 같은 의미로 사용되곤 합니다. 하지만 이 두 개념에는 개발자가 이해해야하는 중요한 차이점이 있습니다. ReactElement ReactElement는 리액트 라이브러리에서 저수준의 UI 컴포넌트를 가리키는데 사용합니다. ReactElement는 컴포넌트의 props , 그리고 자식들(children)을 의미하는 객체입니다. ReactElement는 React.creatElement 메소드를 통해 만들 수 있으며, React.creatElement는 컴포넌트의 타입, props , 그리고 그의 자식들을 인수로 받습니다. JSX.Element 반면에 JSX.Element 는 JSX 문법으로 생성된 element를 의미하는 타입입니다. JSX ..

FrontEnd/React.js 2023.02.07

Next.js 도입 전 Rendering Patterns 알아보기

새로운 어플리케이션을 개발할때, 렌더링을 언제 어디서 어떻게 할지 결정하는 것은 매우 중요합니다. 웹 서버, 빌드 서버, 클라이언트의 환경에서 렌더링을 할 것인지 그리고 렌더링을 한 번에 할 것인지, 부분적으로 할 것인지, 점진적으로 할 것인지 결정해야합니다. 이러한 결정은 매우 중요합니다. 적절한 렌더링 패턴을 고르는 것은 DX(Developer Experience), UX(User Experience) 측면 모두에게 중요합니다. 최근에는 렌더링 패턴중 CSR(Client Side Rendering), SSR(Server Side Rendering)이 주로 이야기되고 있으며 이 두 렌더링 패턴은 각각 장단점을 가지고 있으며 같은 웹페이지에서 특정 패턴이 유익할 수도 해로울 수도 있습니다. Static ..

FrontEnd 2022.11.27

Deno Fresh 알아보기

Deno 진형에서 “The next-gen web framework.”라는 슬로건을 앞세운 Fresh가 어떤 아키텍쳐를 가지고 있고 어떤 방향성을 가지고 생겨났는지 알아봅시다. Fresh Fresh는 JS, TS 개발자를 위한 모던 웹 프레임워크입니다. Fresh는 높은 질, 성능을 가지고 웹 어플리케이션을 만들도록 디자인되었습니다. 여느 다른 모던 웹 프레임워크와 같이 홈페이지, 블로그, 웹 어플리케이션등 무엇이든 만들 수 있습니다. Fresh의 Core는 서버에서 라우팅 프레임워크와 템플릿 엔진(페이지를 렌더링 하는데 초점을 맞춘)을 조합하여 사용합니다. 또한 서버에서 JIT(Just-in-time) 렌더링이 가능하여 클라이언트에서 컴포넌트를 거의 동일하게 렌더링할 수 있도록 합니다. Fresh 에서..

FrontEnd 2022.11.20

리액트의 컴포넌트 렌더링

리액트를 사용해 앱을 개발하다보면 “리액트는 언제 또는 왜 컴포넌트를 렌더링하는지 궁금증을 갖게 됩니다. 렌더링이 언제, 왜 일어나는지 모른다면 리액트 컴포넌트들을 조합하여 사용자가 원하는 UI를 보여주기 어려울 것이고 원하지 않는 렌더링 때문에 사용자에게 좋지 않은 경험을 심어줄 수 있습니다. 따라서 리액트가 언제 컴포넌트를 렌더링 하는지 공부하며 이 글을 적습니다. “렌더링"이란 무엇입니까? 리액트 컴포넌트의 렌더링은 props 와 state 의 조합으로 리액트가 특정 구역의 UI 를 어떻게 보여줄지 설명하는 것을 이야기합니다. 렌더링 프로세스 리액트는 컴포넌트 트리의 Root부터 시작하여 업데이트가 필요한 것으로 보이는 모든 컴포넌트를 찾아 아래쪽으로 순환합니다. 플래그가 지정된(flagged) 컴..

FrontEnd/React.js 2022.05.05

React Hook-flow 이해하기

useEffect 완벽 가이드(A Complete Guide to useEffect)를 읽으며 모든 렌더링은 고유의 이펙트를 가진다는 것을 알 수 있었습니다. 그리고 그 이펙트는 React가 기억해놨다가 DOM 업데이트 후에 실행한다는 것을 알게되었습니다. useEffect에 대해 어느정도 이해했다고 생각했지만 useEffect sometimes fires before paint라는 글의 제목을 보고 혼란에 빠졌고 이를 해결하기 위해 위의 글을 공부해보기로 했습니다. useLayoutEffect "Updating state in useLayoutEffect makes every useEffect from the same render run before paint" 두괄식으로 useLayoutEffect ..

FrontEnd/React.js 2021.11.26