1. CRA + TypeScript 템플릿

yarn create react-app my-app --template typescript

2. eslint + prettier 설정

yarn add --dev prettier eslint-config-prettier

.eslintrc

{
"extends": ["react-app", "prettier"]
}

.prettierrc

{
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

3. 절대경로 설정

yarn add @craco/craco

craco.config.ts

import { PlatformPath } from 'node:path';

const path: PlatformPath = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@features': path.resolve(__dirname, 'src/features'),
      '@helpers': path.resolve(__dirname, 'src/helpers'),
      '@app': path.resolve(__dirname, 'src/app'),
      '@utils': path.resolve(__dirname, 'src/helpers'),
      '@model': path.resolve(__dirname, 'src/model'),
      '@api': path.resolve(__dirname, 'src/api'),
      '@store': path.resolve(__dirname, 'src/store'),
      '@components': path.resolve(__dirname, 'src/components'),
    },
  },
};

package.json