Building seamless digital life 
최신 글
최근 등록 포스트
Search
리믹스(Remix)와 같은 서버 사이드 렌더링(SSR) 프레임워크로 개발할 때, 기존의 클라이언트 사이드 렌더링(CSR) 방식과 가장 큰 차이점은 초기 화면에 필요한 데이터를 다루는 방식입니다. SSR에서는 데이터베이스 조회나 API 응답으로 얻는 서버 데이터에 대한 접근과 처리가 화면의 서버 렌더링 시점에 미리 이루어질 수 있다는 점이 핵심입니다.
서버 사이드 렌더링(SSR)에서 웹 페이지가 만들어지는 과정을 다시 생각해 봅시다. 먼저, 서버에서 웹 페이지를 만들고 이를 브라우저로 보냅니다. 그 다음, 브라우저에서 페이지를 보여줍니다. 이 방식은 사용자가 웹사이트를 더 빨리 볼 수 있게 해줍니다.
리액트는 이런 SSR을 지원하기 위해 “하이드레이션”이라는 기능을 사용합니다. 이 기능은 무엇을 할까요? 서버에서 만든 페이지와 브라우저에서 만든 페이지를 비교합니다. 만약 두 페이지가 다르다면, 리액트는 오류나 경고 메시지를 보여줍니다. 이렇게 해서 페이지가 올바르게 표시되는지 확인합니다.
loader 활용하기
Remix (React-Router)
2024/11/14 23:12
웹 개발에서 라우팅(Routing)은 접속한 URL의 경로(Route)에 따라 사용자를 원하는 페이지로 신속하게 안내하는 과정입니다. 리믹스(Remix)의 라우팅 시스템은 내부적으로 react-router의 중첩 라우트(Nested routes)를 활용합니다. 중첩 라우트는 react-router나 Next.js 사용 경험이 있는 개발자들에게 친숙한 개념일 것입니다. 간단히 말해, 중첩 라우트는 특정 URL의 중첩된 경로에 있는 모든 레이아웃 요소를 해당 페이지에서 계층적으로 조합하여 사용하는 파일 기반 라우팅 시스템입니다.
리믹스에서는 중첩된 경로에 있는 모든 레이아웃 요소를 해당 라우트 페이지에서 중첩해서 사용합니다. 이를 통해 중복된 UI 개발 코드를 줄이고 페이지 로드 속도를 향상시킬 수 있습니다. 이미지 출저: 리믹스 홈페이지, https://remix.run/
중첩 라우트(Nested routes)
Remix (React-Router)
2023/09/19 02:59
useDeferredValue()는 useTransition()과 함께 리액트 18버전 이상의 동시성 모드(Concurrent Mode)에서 제공하는 훅으로, 특정 값의 처리 우선순위를 낮추어 렉 현상을 줄여 사용자경험(UX)을 향상시키는 목적으로 사용됩니다.
useTransition()과 차이점이라면 useTransition()은 useCallback()처럼 특정 함수를 마킹하여 처리 우선순위를 낮추지만 useDeferredValue()는 useMemo()처럼 특정 값을 마킹하여 우선순위를 낮추는 식으로 사용합니다.
useDeferredValue
React Hooks
2023/09/09 22:43
useTransition()은 useDeferredValue()와 함께 리액트 18버전 이상부터 도입된 동시성 모드(Concurrent Mode)에서 제공하는 훅입니다. 여기서 동시성 모드란 리액트가 작업들을 무조건 순차적으로 처리하는 것이 아닌 각 작업의 우선순위를 배분해 동시다발적으로 처리하는 개념입니다. useTransition()을 사용하면 이 동시성 모드의 이점을 살려 특정 작업의 처리 순서를 지연시켜 다른 작업을 먼저 처리하도록 하여 렉과 같은 현상을 줄여 앱의 사용자 경험(UX)를 향상시킬 수 있습니다.
useMemo(), useCallback()과 같이 앱의 성능을 최적화 하는 용도로 사용되는 훅입니다. 남용해서 사용하는 경우 작업에 불필요한 오버해드가 추가되므로 적절한 경우에만 사용하도록 합시다.
useTransition
React Hooks
2023/09/09 13:03
Load more
Series
Web3 & AI
Search
React
Search
SSR
Search
Remix (React-Router)
3
Tanstack
0
More…
DB