인프런 커뮤니티 질문&답변

github 에 올려주신 sleact 소스에서  js 셋팅 부분을 가져다가 사용했습니다.

svg  icon 을 tag로 자동완성해서 사용해보려 하고 있습니다.

원코드 typescript 로 작성된 부분을 빼고 작성해보려고 하고 있는데요

잘 불러 오지를 못하는 에러로 보입니다. 어떤 부분을 수정해야 될까요? 

그리고 webpack.config.js 부분에서도 경고가 뜨고 있습니다.  원인이 무었인지 알수 있을까요?

위에 코드에서 보시다 시피 arrow_left.svg 아이콘을 불러오지 못하는 부분에서 에러가 발생하는것으로 보입니다.

package.json

{
  "name": "securityService-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development",
    "build": "NODE_ENV=production webpack"
  },
  "author": "ZeroCho",
  "license": "MIT",
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@emotion/babel-plugin": "^11.2.0",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@loadable/component": "^5.14.1",
    "antd": "^4.15.0",
    "axios": "^0.21.1",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.0",
    "file-loader": "^6.2.0",
    "json-loader": "^0.5.7",
    "moment-timezone": "^0.5.33",
    "postcss-loader": "^5.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-refresh": "^0.10.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-times": "^3.1.12",
    "resolve-url-loader": "^3.1.2",
    "style-loader": "^2.0.0",
    "swr": "^0.5.5",
    "url-loader": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.2.2",
    "eslint": "^7.20.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "prettier": "^2.2.1",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js

const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const webpack = require('webpack');

const isDevelopment = process.env.NODE_ENV !== 'production';

const config = {
  name: 'securityService',
  mode: isDevelopment ? 'development' : 'production',
  devtool: isDevelopment ? 'hidden-source-map' : 'inline-source-map',
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
      '@layouts': path.resolve(__dirname, 'layouts'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@utils': path.resolve(__dirname, 'utils'),
      '@typings': path.resolve(__dirname, 'typings'),
      '@lib': path.resolve(__dirname, 'lib'),
    },
  },
  entry: {
    app: './client',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: { browsers: ['last 2 chrome versions'] },
                debug: isDevelopment,
              },
            ],
            '@babel/preset-react',
          ],
          env: {
            development: {
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        },
        exclude: path.join(__dirname, 'node_modules'),
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{ loader: 'file-loader' }],
      },
      {
        test: /\.css?$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [{ loader: 'file-loader' }],
      },
    ],
  },
  plugins: [new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' })],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist/',
  },
  devServer: {
    historyApiFallback: true,
    port: 3090,
    publicPath: '/dist/',
    // proxy: {
    //   '/api/': {
    //     target: 'http://localhost:3095',
    //     changeOrigin: true,
    //   },
    // },
  },
};

if (isDevelopment && config.plugins) {
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
}
if (!isDevelopment && config.plugins) {
}

module.exports = config;

client.jsx

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from '@layouts/App';

render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.querySelector('#app'),
);

components/AllIcon/index.js

export { default } from './AllIcon';

components/AllIcon/AllIcon.js

import React from 'react';
import * as svg from './svg';

function AllIcon({ name, className, style }) {
  return React.createElement(svg[name], {
    className,
    style,
  });
}

export default AllIcon;

components/AllIcon/svg/index.js

import { ReactComponent as arrow_left } from './arrow_left.svg';
import { ReactComponent as arrow_right } from './arrow_right.svg';

export { arrow_left, arrow_right };

아래 두분에서 경고가 발생하고 있습니다 .  타입을 바꾸라는 것 같은데..