1.0.6 โข Published 8 months ago
cra-template-lasbe v1.0.6
โก 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
}
์ ๋ง์ ๋ง๊ฒ ์์ ํ์๋ฉด ๋ฉ๋๋ค.