프로젝트 설정

FE 설치

npm i -g create-react-app

create-react-app [app name] -template typescript

• dependencies

eslint

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      tsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    'react/jsx-filename-extension': [
      1,
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
  },
};

참고

https://create-react-app.dev/docs/adding-typescript/

BE 설치

모듈 설치

• dependencies

npm i --save-dev ts-loader typescript webpack nodemon ts-node webpack-cli
npm i --save koa @types/koa

tsconfig 생성

tsc --init

webpack.config.js 생성

const path = require('path');
module.exports = {
  name: 'ts-back-setting', mode: 'development', // "production" | "development" | "none" 
  devtool: 'eval', // source-map hidden-source-map 
  resolve: {
    modules: ['node_modules'],
    extensions: ['.ts', 'json', '.jsx', '.js'],
    alias: {
      "@Controller": path.resolve(__dirname, 'src/controller'),
      "@Router": path.resolve(__dirname, 'src/router'),
      "@Api": path.resolve(__dirname, 'src/api'),
    },
  },
  entry: {
    index: ['./app.ts']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader'],
        exclude: ["/node_modules"]
      },
    ]
  },
  optimization: {},
  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].js'
  },
  target: 'node',

}

app.ts

import Koa from 'koa'; 
const app = new Koa(); 

app.use((ctx: Koa.Context) => { ctx.body = 'hello, Koa!'; }); 

app.listen(4000, () => { console.log('Listening to port 4000'); });

eslint

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {},
};

공통

.prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

.vscode/settings.json

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "javascript.format.enable": false,
}