Programming/React48 React-query 를 활용한 비동기 요청 예제 1. Library 설치 yarn add react-query 2. 프로젝트 구조 /src ㄴcomponents * RQ1 (테스트용) * RQ2 (실 사용 컴포넌트) ㄴcustomHooks * useUsers.js *App.js *index.js 3. 코드 (1) App.js import { QueryClient, QueryClientProvider } from "react-query"; import RQ2 from "./components/RQ2"; const queryClient = new QueryClient(); function App() { return ( ); } export default App; (2) src/customHooks/useUsers.js import { useQuery } .. 2021. 6. 29. Redux-Saga 를 활용한 비동기 요청 예제 1. 프로젝트 생성 yarn create react-app . 2. 라이브러리 설치 yarn add redux react-redux redux-actions axios redux-saga redux-devtools-extension 3. 프로젝트 구성 프로젝트 구성은 아래와 같이 할 계획입니다. /src 하위부분만 살펴보면 되겠습니다. /src ㄴ components * Leader.jsx ㄴ containers * LeaderContainer.jsx ㄴ lib * api.js (서버에 요청하는 비동기 함수 정의부분) ㄴ modules * index.js (redux와 saga를 통합하는 부분) * leader.js ( action 타입, action 생성함수, redux, saga 정의하는 부분) * .. 2021. 6. 29. SWR로 로컬 상태 컨트롤 - Counter import useSWR from "swr"; function useCounter() { const { data, mutate } = useSWR("state", () => window.count); return { data: window.count || 0, mutate: (count) => { window.count = count; return mutate(); }, }; } export default function Counter() { const { data, mutate } = useCounter(); const handleInc = () => mutate(data + 1); const handleDec = () => mutate(data - 1); return ( count: {data} in.. 2021. 6. 26. Next.js 시작하기4 - 설정파일 1. next.config.js module.exports = { reactStrictMode: true, trailingSlash: false, // 뒤쪽 슬래시를 붙일 것인지.. env: { SANITY_PROJECT_ID: 'ozi5ivc6', //Sanity ID를 환경변수로 지정 } } 2021. 6. 20. Next.js 시작하기3 - 스타일링 1. 라이브러리 설치 yarn add @sanity/block-content-to-react yarn add react-syntax-highlighter 2. BlogPostDetail.jsx import {Col, Row } from 'antd' import BlockContent from '@sanity/block-content-to-react' import SyntaxHighlighter from 'react-syntax-highlighter' const serializers = { types: { code: ({node}) => { const { code } = node; return ( {code} ) }, video: ({ node }) => { return video }, link: ({ n.. 2021. 6. 20. Next.js 시작하기2 - 스타일링 1. 라이브러리 설치 yarn add antd @ant-design/icons// ant design yarn add dayjs// 날짜 변환 라이브러리 2. pages/_app.js 파일에 반영 -> 전체 적용 import 'antd/dist/antd.css' // p.slug === home.mainPostUrl); const otherPosts = posts.filter(p => p.slug !== home.mainPostUrl); console.log(mainPost); console.log(otherPosts); return ( ) } export async function getStaticProps() { const sanityService = new SanityService(); const .. 2021. 6. 20. 이전 1 2 3 4 5 6 ··· 8 다음
