[TIL] Day65 - useAuth, react-query, 스니펫

중간 회고

자주 할수록 좋고, 프로젝트 중간에 하면 더 좋다고 이야기한다.

1. 성장과 학습
2. 문제 해결
3. 유연성과 적응성 (애자일)
4. 퍼포먼스 향상

더 잘하려고!

 

주요 학습 내용 전체 정리

• 타입과 모델
  • theme.ts 컬리 키를 사용하는 인터페이스를 선언해서 사이드이펙트, 정의, 활용을 하게 되었다.
  • 사용하는 데이터 모델을 인터페이스로 정리, export 해서 재사용하였다. 이때 모델끼리도 재사용, 분리, extends 확장으로 상속받아서 동작할 수있도록 확용하였다.
  • 상태 Props 의 데이터 타입 정의, UI 타입 정의, Pick(선택), Omit(제외) 과 같은 타입스크립트 문법 활용
• 데이터 흐름
  • 도서 Books.tsx > 도서목록 컴포넌트 BooksList.tsx > useBooks.ts 도서목록 받아오는 훅 > books.api.ts httpClient.ts 를 통해 보내고 받아온 엔드포인트 url 에 따라 데이터 요청을 보내고 받아와 response 를 받음. > useBooks.ts 에서 받아온 데이터 가공 > BooksList.tsx 에서 가공된 데이터 사용 > Books.tsx 화면에 표현
    • 훅으로 api 를 사용하면 > 파라미터 관리, 재사용성, setIsEmpty 상태값 활용할 수 있다.
    • 낙관적 업데이트에  좋다. 별도의 서버요청없이 화면 업데이트 가능하다.
• 컴포넌트 작성
  • Books.twsx 화면은 isEmpty 상태에 따라 BooksList 컴포넌트와 Pagination 컴포넌트, BooksEmpty 컴포넌트를 렌더링한다.
  • 삼항 연산식으로도 컴포넌트를 렌더링할 수 있다.
  • BookList.tsx 에서 각 도서 아이템은 BookItem 의 반복으로 화면에 렌더링할 수 있다.
• css 스타일링 : 생산성 저하 요소 중 하나..
  • flex, grid 필수!
  • 래거시 absolute position 알아두기 중요하다.
• 커스텀 훅
  • use앞에 붙어야 훅으로써 동작할 수 있다.
  • 별도의 상태를 가지고 전달한다면, 훅으로 항상 사용될 수 있다.
  • 작성방법, 기능, 사용처 알아두기

 

생산성 : VScode Snippet 스니펫

Snippets in Visual Studio Code

유저가 설정할 수 있는 코드 더미

소위 템플릿이다. 반복되는 코드 초기 세팅을 만들때는, 일일히 작성하지 않고, 미리 설정된 스니펫을 불러와 시간을 단축할 수 있다.

프로젝트 구조 기능 단위 작업 흐름 체계화

1. 데이터 모델 정의
2. 컴포넌트 생성
3. 배치
4. 1차 스타일링 (api 요청 이후에 할 시 원치않는 데이터가 표시될 가능성 방지)
5. 데이터 패치 / 훅
6. 이벤트 핸들러
7. 추가 스타일링
8. 리팩토링

만들기

vscode 확장 프로그램

Snippet Generator

Snippet Generator - Visual Studio Marketplace

 

 

KPT 회고

Keep

1. 회원가입~주문까지 경험
2. 생산성 고려
3. 데이터 흐름 맞추기

Problem

1. 테마스위처 미적용
2. import alias 아쉬움
3. 중복코드
4. css 스타일링 정리
5. UI 패턴의 다양성

Try

1. alias
2. 중복코드 제거
3. 스니펫
4. useAuth 훅
5. react-query
6. 다양한 UI 패턴

 

Import alias

절대경로 환경설정

GitHub - risen228/craco-alias: A craco plugin for automatic aliases generation for Webpack and Jest

CRACO 라이브러리 : config설정을 CRA에 상속하여 따로 뭘 건드리지 않고 추가적인 설정을 부여할 수 있게 한다.

tsconfig.paths.json extends 사용

//tsconfig.json
"extends": "./tsconfig.paths.json",
  "include": ["src", "craco.config.js"]
  //tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

 

craco.config.js

const cracoAlias = require('craco-alias');

module.exports = {
  plugin: [
    {
      plugin: cracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: 'tsconfig.paths.json',
        debug: false,
      },
    },
  ],
};

 

기본적인 원리는 tsconfig의 baseUrl과 paths에 존재한다.

 

route 정리

const routeList = [
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/books',
    element: <Books />,
  },
//..
const router = createBrowserRouter(
  routeList.map((item) => {
    return {
      ...item,
      element: <Layout>{item.element}</Layout>,
      errorElement: <Error />,
    };
  }),
);

function App() {
  return (
    <BookStoreThemeProvider>
      <RouterProvider router={router} />
    </BookStoreThemeProvider>
  );
}

 

React-Query 비동기 관리자

Overview | TanStack Query React Docs

기존에 useEffect 로 작성한 코드를, 자동적으로 fetch 하고 캐싱하는 라이브러리.

 

query client 작성

`QueryClient` 사용, 최상위 컴포넌트에 (app.tsx) Provider로 감싸야 한다.

//queryClient.ts
import { QueryClient } from "react-query";
export const queryClient = new QueryClient();

//App.tsx
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BookStoreThemeProvider>
        <RouterProvider router={router} />
      </BookStoreThemeProvider>
    </QueryClientProvider>
  );
}

기존 useState, useEffect 코드 작성을 > useQuery(키(배열), )

export const useBooks = () => {
  const location = useLocation();
  const params = new URLSearchParams(location.search);

  const { data: booksData, isLoading: isBooksLoading } = useQuery(
    ['books', location.search],
    () =>
      fetchBooks({
        category_id: params.get(QUERYSTRING.CATEGORY_ID)
          ? Number(params.get(QUERYSTRING.CATEGORY_ID))
          : undefined,
        news: params.get(QUERYSTRING.NEWS) ? true : undefined,
        currentPage: params.get(QUERYSTRING.PAGE)
          ? Number(params.get(QUERYSTRING.PAGE))
          : 1,
        limit: LIMIT,
      }),
  );

  return {
    books: booksData?.books,
    pagination: booksData?.pagination,
    isEmpty: booksData?.books.length === 0,
    isBooksLoading,
  };
};

//books.tsx
  const { books, pagination, isEmpty, isBooksLoading } = useBooks();

 

여러 조건이 있을때 > early return 

  if (isEmpty) return <BooksEmpty />;

  if (!books || !pagination || isBooksLoading) return <Loading />;

 

☑️ 배운 점

스니펫

react-query

왜 가끔 스타일링이나 alias 가 적용이 안될까...