chore: eslint, prettier 추가

Author: devkimc

.babelrc

@@ -1,7 +1,7 @@
 {
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-env",
-    "@babel/preset-typescript"
-  ]
+    "presets": [
+        "@babel/preset-react",
+        "@babel/preset-env",
+        "@babel/preset-typescript"
+    ]
 }

.eslintignore

@@ -0,0 +1 @@
+config

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "./tsconfig.json"
+    },
+    "plugins": ["@typescript-eslint"],
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "airbnb",
+        "airbnb-typescript",
+        "plugin:prettier/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+        "react/jsx-filename-extension": [
+            1,
+            { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+        ],
+        "react/function-component-definition": [
+            2,
+            { "namedComponents": "arrow-function" }
+        ],
+        "react/prop-types": 0,
+        "import/no-unresolved": "off",
+        "import/no-cycle": "off",
+        "no-param-reassign": "off"
+    }
+}

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "semi": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "printWidth": 80,
+    "arrowParens": "avoid",
+    "endOfLine": "auto"
+}

config/webpack.common.js

@@ -1,38 +1,38 @@
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const path = require("path");
-const webpack = require("webpack");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
-  entry: "./src/index.tsx",
+    entry: './src/index.tsx',
 
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: ["babel-loader"],
-        exclude: /node_modules/,
-      },
-    ],
-  },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: ['babel-loader'],
+                exclude: /node_modules/,
+            },
+        ],
+    },
 
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: "public/index.html",
-    }),
-    new webpack.ProvidePlugin({
-      React: "react",
-    }),
-  ],
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: 'public/index.html',
+        }),
+        new webpack.ProvidePlugin({
+            React: 'react',
+        }),
+    ],
 
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "../src/"),
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, '../src/'),
+        },
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.json'],
     },
-    extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".json"],
-  },
 
-  output: {
-    filename: "bundle.js",
-    path: path.join(__dirname, "dist"),
-  },
+    output: {
+        filename: 'bundle.js',
+        path: path.join(__dirname, 'dist'),
+    },
 };

config/webpack.dev.js

@@ -1,26 +1,26 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common");
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
 
 module.exports = merge(common, {
-  mode: "development",
-  devtool: "inline-source-map",
-  devServer: {
-    open: false,
-    hot: true,
-    compress: true,
-    port: 3000,
-    historyApiFallback: true,
-    liveReload: true,
-    // proxy: {
-    //   "/api": { target: "http://localhost:9000" },
-    // },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(sa|sc|c)ss$/i,
-        use: ["style-loader", "css-loader"], // 필요에 따라 sass-loader 추가
-      },
-    ],
-  },
+    mode: 'development',
+    devtool: 'inline-source-map',
+    devServer: {
+        open: false,
+        hot: true,
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        liveReload: true,
+        // proxy: {
+        //   "/api": { target: "http://localhost:9000" },
+        // },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(sa|sc|c)ss$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+        ],
+    },
 });

config/webpack.prod.js

@@ -1,36 +1,36 @@
-const { merge } = require("webpack-merge");
-const common = require("./webpack.common");
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = merge(common, {
-  mode: "production",
-  devtool: "cheap-module-source-map",
-  output: {
-    filename: "[name].[contenthash].js",
-    path: path.resolve(__dirname, "../dist"),
-    publicPath: "./",
-    clean: true,
-  },
-  optimization: {
-    usedExports: true,
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        terserOptions: {
-          compress: {
-            drop_console: true,
-          },
+    mode: 'production',
+    devtool: 'cheap-module-source-map',
+    output: {
+        filename: '[name].[contenthash].js',
+        path: path.resolve(__dirname, '../dist'),
+        publicPath: './',
+        clean: true,
+    },
+    optimization: {
+        usedExports: true,
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                terserOptions: {
+                    compress: {
+                        drop_console: true,
+                    },
+                },
+            }),
+        ],
+        splitChunks: {
+            chunks: 'all',
         },
-      }),
-    ],
-    splitChunks: {
-      chunks: "all",
     },
-  },
-  performance: {
-    hints: false,
-    maxEntrypointSize: 512000,
-    maxAssetSize: 512000,
-  },
+    performance: {
+        hints: false,
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000,
+    },
 });