클라이언트/React (48) 리스트형 [리액트(React)] 차트(Chart) 사용하기 // 차트, Chart - 데이터를 시각화해서 나타낸다. - 많은 js 라이브러리들이 존재한다. // ApexCharts.js - 공식 문서: https://apexcharts.com/docs/react-charts/ React-ApexChart - A React Chart wrapper for ApexCharts.js Create React Charts using a React Chart component for ApexCharts. Build beautiful and interactive visualizations in your react applications. apexcharts.com 1. 설치 npm install --save react-apexcharts apexcharts 2. 사용 imp.. [리액트(React)] Tanstack Query(React Query) Devtools // Tanstack Query(React Query) Devtools - React에서 서버의 상태 관리를 용이하게 해주는 도구 - 데이터의 상태와 캐싱 정보를 확인할 수 있다. 1. 설치 npm i @tanstack/react-query-devtools 2. 사용 - 루트 컴포넌트에 ReqctQueryDevtools를 추가한다. - initialIsOpen property를 사용하면 컴포넌트가 마운트될 때 Devtools 탭이 자동으로 열린다. [리액트(React)] 유닛 테스트(Unit Test) // 유닛 테스트, Unit Test- application의 가장 작은 단위에 대한 테스트를 작성한다. ~ functions, components ... - 기본적으로 테스팅 코드를 실행하고 결과를 확인하기 위해서는 도구가 필요하다. > Jest - 리액트 앱에서는 리액트 앱과 컴포넌트 렌더링 시뮬레이션도 필요하다.> React Testing Library// create-react-app 1. 설치npm install --save-dev jest npm install --save-dev @testing-library/react2. 테스트 코드 작성 - 테스팅 파일명은 해당 컴포넌트 파일의 이름 뒤에 .test.js를 붙인다. test(테스트 설명, () => { 1. Arrange - test dat.. [리액트(React)] 애니메이션(Animation) // 애니메이션, Animation - 웹 애플리케이션에서 동적인 작용으로 부드러운 전환, 변화 또는 상호작용을 구현하는 방법 - CSS animation , 외부 라이브러리 animation 등을 사용해서 구현한다. // CSS animation - 특정한 애니메이션, 즉 일련의 단계를 css로 정의한다. - DOM에서 요소가 삭제되면 스타일을 적용할 수 없기 때문에 특정 요소를 나타나게 할 수는 있지만 사라지게 할 수 없다. - 복잡한 애니메이션은 구현이 어렵다. @keyframes animation명 { from {} to{} } @keyframes animation명 { 0% {} 100%{} } - 원하는 단계별로 나누어 정의할 수있다. css 선택자 { animation: 애니메이션명 } fo.. [리액트(React)] Tanstack Query(React Query) // Tanstack Query - 서버 상태 관리를 용이하게 해주는 라이브러리 - React Query로 알려져 있었다. - 리액트 앱 내부에서 서버에 HTTP 요청을 간편하게 보낼 수 있게 해준다. - HTTP 요청을 직접 전송하는 로직이 내장된 것이 아니라, 요청을 관리하는 로직을 제공해준다. - 공식 문서: https://tanstack.com/query/latest/docs/framework/react/overview Overview | TanStack Query Docs tanstack.com - 서버에서 가져온 데이터를 cache 처리하고 메모리에 저장해서 필요할 때 다시 사용할 수 있다. 1. 설치 npm install @tanstack/react-query 2. Tanstack query.. [리액트(React)] 배포(Deploying) // 배포, Deploying - 실제 사용이 가능하도록 서버에 올리는 과정 1. 테스트하기 2. 코드 최적화하기 // Lazy Loading - 특정 코드를 필요할 때만 로딩한다. - 특정 컴포넌트를 나중에 불러온다. - 컴포넌트가 렌더링되기 전 import 가 먼저 되어야 한다. 1) root 파일에서 당장 필요하지 않은 import문을 삭제한다. - 컴포넌트 재정의 import { lazy, Suspense } from 'react'; const 컴포넌트명 = lazy(() => import('컴포넌트path')); element: ( ), - loader 함수 재정의 loader: () => import('컴포넌트path').then((module) => module.loader()), 3. pr.. [리액트(React)] 인증(Authentication) // 인증, Authentication - 보호가 필요하고, 아무나 접근해서는 안 될 때 사용한다. - 특정 백엔드 resources에 접근할 때, 접근권한이 주어지기 전에 인증(허가)을 받아야 한다. - 사용자 자격 증명을 server로 보내면 server에서 검증 후 결과를 반환한다. ~ Server-sede Sessions / Authentication Tokens - 프론트엔드와 백엔드를 분리하는 경우에는 Authentication Token을 사용한다. 클라이언트에서 서버에 사용자 자격 증명을 전송한다. 서버에서 사용자 자격 증명을 받은 후 Authentication Token을 생성한다. - Token을 생성한 백엔드만이 해당 Token의 유효성을 확인하고 검증할 수 있다. 생성한 Token을.. [리액트(React)] Router - useFetcher // useFetcher - action이나 loader를 트리거하지만 실제로 속한 페이지로 이동하지 않을 때 사용한다. - action이나 loader를 트리거하지만 route 전환은 이루어지지 않는다. const fetcher = useFetcher(); const { data, state } = fetcher; - fetcher 객체는 action이나 loader 의 결과를 받는다. import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import EditEventPage from './pages/EditEvent'; import ErrorPage from './pages/Error'; import EventDetailPag.. < 1 2 3 4 5 6 >
