2024.02.29(목)

📈생산성

1. VS Code Snippets & Emment 사용
2. 기능 단위 작업 흐름 파악
   

💭중간 회고 도출 아이템

1. 타입스크립트 alias 적용

• 프로젝트 규모가 커질수록 path의 경로가 깊어지고 복잡해짐
• (상대 경로 → 절대 경로) 변환 필요
• CRACO (Create React App Configuration Override) 사용
  • 설치
    • craco: npm i -D @craco/craco
    • craco-alias: npm i -D craco-alias
  • 설정
    • tsconfig.json에서 직접 추가해도 되지만 root에 tsconfig.paths.json 생성하고 tsconfig.json에서 extends field에 추가
      • tsconfig.json

        {
          "compilerOptions": { … },
          **"extends": "./tsconfig.paths.json",**
          "include": ["src"]
        }

      • tsconfig.paths.json

        {
            "compilerOptions": {
                "baseUrl": ".",
                "paths": {
                    "@/*": ["src/*"]
                }
            }
        }

        • 이제 기존 상대 경로 “../../models/book.model”를 “@/models/book.model”과 같이 손쉽게 절대 경로 표기 가능
        • 자주 쓰이는 경로는 paths field에 자유롭게 등록해서 사용 가능
    • root에 craco.config.js 생성하고 tsconfig.json에서 include field에 추가
      • craco.config.js 🔗

        const cracoAlias = require("craco-alias");
        
        module.exports = {
            plugins: [
                {
                    plugin: cracoAlias,
                    options: {
                        source: "tsconfig",
                        baseUrl: ".",
                        tsConfigPath: "tsconfig.paths.json",
                        debug: false,
                    }
                }
            ]
        };

      • tsconfig.json

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

    • package.json의 scripts에서 start, build, test를 craco를 통해 할 수 있도록 수정 🔗

      {
      	…,
        "scripts": {
          "start": "**craco** start",
          "build": "**craco** build",
          "test": "**craco** test",
          "eject": "react-scripts eject",
          "typecheck": "tsc --noEmit --skipLibCheck"
        },
      	…
      }

2. 중복코드 제거

• App.tsx

  • 현재 router에서 중복 발생

    • element를 감싸고 있는 <Layout> component
    • errorElement: <Error />

  • createBrowserRoute에 전달되는 routeList를 간단하게 만들고 map으로 순회하며 중복되는 부분을 추가

    ⁝
    const routeList = [
      {
        path: "/",
        element: <Home />
      },
    	…,
      {
        path: "/orderlist",
        element: <OrderList />
      },
    ];
    
    const router = createBrowserRouter(
      routeList.map((item) => {
        return {
          ...item,
          element: <Layout>{item.element}</Layout>,
          errorElement: <Error />
        }
      })
    );
    ⁝

• 강의에서는 api도 const response = await httpClient~; return response.data;가 계속 중복되어서 http.ts에서 requestHandler를 만드는 식으로 refactoring했는데 나는 굳이 필요성을 느끼지 못해서 하지 않았다.

3. snippet(스니펫) 만들기

• typescriptreact.json

  {
  	"reactFunctionComponentWithSC": {
  		"prefix": "_component-sc",
  		"body": [
  			"import styled from 'styled-components';",
  			"",
  			"function ${1:${TM_FILENAME_BASE}}() {",
  			"    return (",
  			"        <${1:${TM_FILENAME_BASE}}Style>",
  			"            <h1>${1:${TM_FILENAME_BASE}}</h1>",
  			"        </${1:${TM_FILENAME_BASE}}Style>",
  			"    );",
  			"}",
  			"",
  			"const ${1:${TM_FILENAME_BASE}}Style = styled.div``;",
  			"",
  			"export default ${1:${TM_FILENAME_BASE}};"
  		],
  		"description": "Creates a React Arrow Function component with Styled Components"
  	},
  	"const arrow function": {
  		"prefix": "_const-func",
  		"body": [
  			"const ${1:func} = () => {",
  			"  ",
  			"};"
  		]
  	},
  	"styled component theme value": {
  		"prefix": "_theme-styled",
  		"body": "${({ theme }) => theme.$1}"
  	},
  	"useEffect template": {
  		"prefix": "_effect",
  		"body": "useEffect(() => {\r\n    $2\r\n}, [$1]);"
  	},
  	"Title component": {
  		"prefix": "_title-comp",
  		"body": "<Title size=\"$1\" color=\"$2\">\r\n    $3\r\n</Title>"
  	},
  	"Button component": {
  		"prefix": "_btn-comp",
  		"body": "<Button size=\"$1\" scheme=\"$2\">\r\n    $3\r\n</Button>"
  	}
  }

• prefix는 _를 붙이는게 찾기 좋음

4. useAuth Hook 만들기

구현 코드 Commit 바로가기

5. React Query 적용

Powerful asynchronous state management (version up을 하면서 TanStack Query로 이름이 바뀜)

• 설치: npm i @tanstack/react-query --save
• Quick Start 참고
  • QueryClient
  • QueryClientProvider: QueryClient를 app 전반에 연결하고 제공하기 위해 사용
  • useQuery Hook: 기존 custom hook의 useState와 useEffect를 한번에 처리!

    useQuery({
    	queryKey: [dep1, dep2, …],
    	queryFn: () => fetchSomething(dep2),
    });

    • Options
      • queryKey: query 식별자, queryFn이 의존하는 변수를 넣는다면 dependency처럼 동작 (순서 상관 X)
      • queryFn: 쿼리가 데이터를 요청할 때 호출되는 함수 (queryKey가 변경되면 호출됨)
    • Returns
      • data: query가 성공적으로 가져온 가장 최신 데이터 (queryFn 반환 값)
      • isLoading: query의 데이터를 가져오는 중인지 여부, isFetching && isPending과 동일
• useBooks.ts에 React Query 적용: 구현 코드 Commit 바로가기
  
• CSS @keyframe, animation 속성 참고: 구현 코드 Commit 바로가기