🔎 절대 경로

절대 경로와 관련 된 설정은 /craco.config.js, /tsconfig.paths.json 파일에 위치합니다.

• craco.config.js

1const path = require('path');
2module.exports = {
3  webpack: {
4    alias: {
5      '@apis': path.resolve(__dirname, 'src/apis'),
6      '@components': path.resolve(__dirname, 'src/components'),
7      '@constants': path.resolve(__dirname, 'src/constants'),
8      '@hooks': path.resolve(__dirname, 'src/hooks'),
9      '@pages': path.resolve(__dirname, 'src/pages'),
10      '@states': path.resolve(__dirname, 'src/states'),
11      '@styles': path.resolve(__dirname, 'src/styles'),
12      '@utils': path.resolve(__dirname, 'src/utils'),
13    },
14  },
15};

• tsconfig.paths.json

1{
2  "compilerOptions": {
3    "baseUrl": "./src",
4    "paths": {
5      "@apis": ["./apis/index.ts"],
6      "@apis/*": ["./apis/*"],
7
8      "@components": ["./components/index.ts"],
9      "@components/*": ["./components/*"],
10
11      "@constants": ["./constants/index.ts"],
12      "@constants/*": ["./constants/*"],
13
14      "@hooks": ["./hooks/index.ts"],
15      "@hooks/*": ["./hooks/*"],
16
17      "@pages": ["./pages/index.ts"],
18      "@pages/*": ["./pages/*"],
19
20      "@states": ["./states/index.ts"],
21      "@states/*": ["./states/*"],
22
23      "@styles": ["./styles/index.ts"],
24      "@styles/*": ["./styles/*"],
25
26      "@utils": ["./utils/index.ts"],
27      "@utils/*": ["./utils/*"]
28    }
29  }
30}

제가 주로 사용하는 구조에 맞게 @xxx 형태로 절대 경로를 설정해 주었으며, tsconfig에는 폴더 인덱스까지 적용되어 있습니다.

만약 다른 구조를 사용한다면 두 파일에서 수정하시면 됩니다.

1{
2  "Semicolons": true,
3  "singleQuote": true,
4  "trailingComma": "all",
5  "Tabs": true,
6  "tabWidth": 2,
7  "printWidth": 140
8}