그럼에도 불구하고

오늘은 Server Side Rendering에 대해 알아보겠습니다. [ Server Side Rendering (SSR) ] 서버사이드 렌더링은 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로 UI를 서버에서 렌더링 하는 것을 의미합니다. 즉, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)을 만들어 제공하는 것입니다. 📌 서버 사이드 렌더링의 장점 서버 사이드 렌더링에는 어떤 장점이 있을까요? 일단 구글, 네이버, 다음 등의 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있습니다. 리액트로 만든 SPA는 검색 엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지가 제대로 나타나지 않습니다. 따라서 서버에서 ..

useNavigation과 useSubmit에 대해 알아보겠습니다. [ useNavigation ] useNavigation은 useNavigate와는 다릅니다. 헷갈리면 안 됩니다. :) 예를 들어, useNavigation은 어떤 폼을 작성해서 제출하는데 현재 진행 상황을 저장하는 것과 같을 경우 사용하기에 좋습니다. 즉, 현재 폼에 대한 정보를 받을 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 폼 제출 시 true를 받는 상수를 선언 후 HTML 삽입 미리보기할 수 없는 소스 return에서 조건적으로 받아보면 폼이 제출 중일 때는 버튼이 Submitting...로 바뀝니다. 혹은 data를 넘기기 위해서 useNavigation을 이용할 수 있습니다. HTML 삽입 미리보기할 수 없는 소..

useFetcher에 대해 알아보겠습니다. [ useFetcher ] HTML/HTTP에서 데이터 변형 및 로드의 경우 또는 탐색으로 모델링 됩니다. 둘 다 브라우저에서 탐색을 유발하며, 이는 React Router에서 와 에 해당합니다. 그러나 때로는 탐색 외부에서 로더를 호출하거나 URL을 변경하지 않고 작업을 호출(혹은 유효성을 다시 검사할 페이지의 데이터 가져오기)을 원할 수 있습니다. 또는 동시에 여러 변이를 수행해야 할 수 도 있습니다. 이럴 때 useFetcher 훅을 사용하면 UI를 작업 및 로더에 연결할 수 있습니다. 이 기능은 데이터 라우터를 사용하는 경우에만 작동합니다. 그리고 useFetcher는 다음과 같은 경우에 유용합니다. 1. UI 경로와 연결되지 않은 데이터 가져오기 (팝오..

action과 Form, useActionData 그리고 redirect에 대해 알아보겠습니다. [ action ] react router dom에서 action을 배울 때 주목해야 할 부분은 HTML form입니다. HTML form은 특정 url에 데이터를 전송해서 처리하는 요청 과정입니다. 그리고 그 요청을 처리할 주소 값은 보통 action에 정의합니다. 클라이언트 사이드에서 form을 처리하기 위해 리액트 라우터는 Form이라는 것을 사용합니다. 그리고 이는 html form을 모방하여 클라이언트 측에다가 request를 보냅니다. // html 폼 // react router의 폼. 클라이언트 사이드에서 처리합니다. 즉 을 사용하면 서버에다가 request를 보내는 것이고, 을 사용하면 클라이..

오늘은 loader 함수의 error 처리에 대해 알아보겠습니다. 현재 "events" path를 가진 페이지에서 사용되는 loader는 다음과 같습니다. loader 함수에서는 에러가 발생하면 JSON 형태의 error message와 status 500 상태를 전송하고 있습니다. events path에서 발생한 오류는 상위 컴포넌트(라우트)인 ErrorPage에서 다루고 있습니다. ErrorPage에서는 loader로 인해 발생한 error뿐만 아니라 page 전체에서 발생한 에러를 모두 다루고 있습니다. 여기서 useRouteError 기능을 사용하면 loader에서 throw new Response로 발생시킨 error data를 받아올 수 있습니다. 또한 발생한 error의 status에 따라 ..

오늘은 loader와 useLoaderData에 대해 알아보겠습니다. [ loader ] 서버에 요청하지 않고 데이터를 가능한 한 빨리 가져오기 위해 react router dom 6.4v 부터는 client side browser를 제공하고 있습니다. 즉, 서버에 요청하지 않고 클라이언트 사이드에서 처리하기 때문에 속도 면에서 엄청난 이점이 생기게 됩니다. 여기서 추가된 기능 중 하나인 loader는 컴포넌트가 생성되기 전에 컴포넌트에 데이터를 전달하는 역할을 수행합니다. loader의 특징 - loader의 호출 시점은 컴포넌트가 렌더링 되기 전 입니다. - 각 파일에 loader라는 함수를 만든뒤 이를 export하여 사용하는 것이 일반적입니다. - loader 함수가 값을 return하면 useL..

오늘은 useParams 사용하는 법에 대해 알아보겠습니다. [ useParams란? ] useParams이란 react-router-dom에서 제공하는 Hooks 중 하나로 Parameter(파라미터) 값을 URL을 통해서 넘겨받은 페이지에서 사용할 수 있도록 해주는 것을 말합니다. 예를 들어, 특정 제품 리스트에서 제품을 클릭 시 제품의 세부 정보를 나타내는 페이지로 이동하고 싶다면 제품의 id 값을 URL로 넘겨 세부 페이지에서 id 값에 해당하는 제품만 보여줄 수 있습니다. 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams를 사용하면 됩니다. createBrowserRouter를 통해 다음과 같이 코드를 작성한다고 가정했을 때, ProductDetailPage로 ..

오늘은 Link와 NavLink, useNavigate에 대해 알아보겠습니다. 목차 [ Link vs NavLink ] 📌 Link Link 컴포넌트의 경우 html의 태그와 기능이 유사하지만, 페이지 전환을 방지하는 기능이 내장되어 있습니다. 요소를 클릭 시 /로 바로 이동하는 로직 구현 시에 용이한 컴포넌트입니다. HTML 삽입 미리보기할 수 없는 소스 📌 NavLink NavLink는 Link의 special version으로, isActive 속성을 이용하여 특정 링크에 스타일을 넣어줄 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 NavLink는 자체적으로 isActive라는 boolean값을 가지고 있어 활성화시키고 싶은 스타일에 css를 적용할 수 있습니다. 또한, NavLink에는 ..

오늘은 Link와 Outlet을 이용하여 간단한 다중 페이지를 만들어보겠습니다. 📌 App.js HTML 삽입 미리보기할 수 없는 소스 RootLayout이라는 요소에 MainNavigation이라는 요소와 children으로 지정된 나머지 요소들을 렌더링 하는 과정입니다. 📌 Root.js HTML 삽입 미리보기할 수 없는 소스 Outlet: 자녀 라우트 요소들이 렌더링되어야 할 장소를 표시하는 역할을 합니다. 📌 MainNavigation.js HTML 삽입 미리보기할 수 없는 소스 MainNavigation에서는 Link를 통해 원하는 페이지로 이동합니다. a 태그와 다르게 Link는 to에 주소를 지정합니다. 📌 Home.js HTML 삽입 미리보기할 수 없는 소스 📌 Products.js HTM..

React에서 RouterProvider와 CreateBrowserRouter를 이용하여 다중 페이지를 구현하는 법에 대해 알아보겠습니다. [ 기존 방식 ] HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 [ React Router v6.4 이후 추가된 방식 ] 📌 RouterInfo.js HTML 삽입 미리보기할 수 없는 소스 📌 App.js HTML 삽입 미리보기할 수 없는 소스 기존의 방식처럼 BrowserRouter로 감싸지 않고 RouterProvider를 이용하여 구성요소들을 전달하고 활성화합니다. ref: https://reactrouter.com/en/main/start/overview

오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. 목차 [ 비동기 작업을 처리하는 미들웨어 사용 ] 오픈 소스 커뮤니티에 공개된 미들웨어를 사용하면 리덕스를 사용하고 있는 프로젝트에서 비동기 작업을 더욱 효율적으로 관리할 수 있습니다. 비동기 작업을 처리할 때 도움을 주는 미들웨어는 다양하지만, 오늘은 redux-thunk와 redux-saga에 대해 알아보겠습니다. 📌 redux-thunk: 비동기 작업을 처리할 때 가장 많이 사용되는 미들웨어입니다. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해 줍니다. 📌 redux-saga: redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리입니다. 특정 액션이 디스패치되었을 때 정해진 로직에 따..

Redux-logger를 사용하는 법에 대해 알아보겠습니다. 📌 설치 yarn add redux-logger // yarn 사용시 npm install redux-logger // npm 사용시 📌 index.js HTML 삽입 미리보기할 수 없는 소스