⚡ cra-template-lasbe
📌 git repository
📌 npm
📌 프로젝트 생성
$ npx create-react-app my-app --template lasbe📌 템플릿 적용 목록
- React (^18.2.0)
- TypeScript (^4.9.5)
- .prettierrc
- Craco
- Axios
- styled-components
- @types/styled-components (dev)
- react-spinners
- react-router-dom
- recoil
- @tanstack/react-query
- @tanstack/react-query-devtools (dev)
🔎 index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RecoilRoot } from 'recoil';
import { BrowserRouter } from 'react-router-dom';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
const queryClient = new QueryClient({
defaultOptions: {
queries: {
suspense: true,
staleTime: 5 * 60 * 1000,
cacheTime: 5 * 60 * 1000,
},
},
});
root.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<RecoilRoot>
<BrowserRouter>
<App />
</BrowserRouter>
</RecoilRoot>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</React.StrictMode>,
);- react-router-dom -
<BrowserRouter />in index.tsx - recoil -
<RecoilRoot />in index.tsx - @tanstack/react-query -
<QueryClientProvider />in index.tsx - @tanstack/react-query-devtools (dev) -
<ReactQueryDevtools />in index.tsx
🔎 절대 경로
절대 경로와 관련 된 설정은 /craco.config.js, /tsconfig.paths.json 파일에 위치합니다.
- craco.config.js
const path = require('path');
module.exports = {
webpack: {
alias: {
'@apis': path.resolve(__dirname, 'src/apis'),
'@components': path.resolve(__dirname, 'src/components'),
'@constants': path.resolve(__dirname, 'src/constants'),
'@hooks': path.resolve(__dirname, 'src/hooks'),
'@pages': path.resolve(__dirname, 'src/pages'),
'@states': path.resolve(__dirname, 'src/states'),
'@styles': path.resolve(__dirname, 'src/styles'),
'@utils': path.resolve(__dirname, 'src/utils'),
},
},
};- tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@apis": ["./apis/index.ts"],
"@apis/*": ["./apis/*"],
"@components": ["./components/index.ts"],
"@components/*": ["./components/*"],
"@constants": ["./constants/index.ts"],
"@constants/*": ["./constants/*"],
"@hooks": ["./hooks/index.ts"],
"@hooks/*": ["./hooks/*"],
"@pages": ["./pages/index.ts"],
"@pages/*": ["./pages/*"],
"@states": ["./states/index.ts"],
"@states/*": ["./states/*"],
"@styles": ["./styles/index.ts"],
"@styles/*": ["./styles/*"],
"@utils": ["./utils/index.ts"],
"@utils/*": ["./utils/*"]
}
}
}제가 주로 사용하는 구조에 맞게 @xxx 형태로 절대 경로를 설정해 주었으며, tsconfig에는 폴더 인덱스까지 적용되어 있습니다.
만약 다른 구조를 사용한다면 두 파일에서 수정하시면 됩니다.
🔎 .prettierrc
{
"Semicolons": true,
"singleQuote": true,
"trailingComma": "all",
"Tabs": true,
"tabWidth": 2,
"printWidth": 140
}입맛에 맞게 수정하시면 됩니다.