Monthly Archives: August 2022

내가 구성한 시스템의 경우 

django를 기반으로 api기능, front end pages 를 유저에게 제공한다.

front end pages의 경우 react js를 통해 만들어져서 전달되고 데이터가 필요한 경우 django api를 이용하는 구성형태이다

javascript selenium를 사용하려고 처음에 생각했다.

.

.

.

Module not found: Error can’t resolve ‘child_process’ 

Module not found: Error can’t resolve ‘fs’ 

Module not found: Error can’t resolve ‘tls’ 

에러 발생 아래와 같이 문제 해결

package.json이나 webpack confic, babel config 화일을 조정해서 문제해결

버전에 따라 조정해야 하는 config화일이 달라진다.

https://stackoverflow.com/a/54459622

https://webpack.js.org/configuration/resolve/#resolvefallback

.

https://stackoverflow.com/a/67233156

.

.

.

그래서 selenium을 다운 받고 설치하고 webpack 으로 번들링 작업을 했지만 static property 부분에서 작업이 멈추고 지원할수 없는 화일이므로 알맞은 loader를 사용하라는 에러메시지가 떴다. (해결방법 못 찾음)

그 해결 과정에서 babel loader 기본 설정에서 사용되는 preset-env

@babel/preset-env

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

실제 config 파일 사용예시는 아래에 있는 참고링크 참고 

webpack5 config 설정 설명 

https://youtu.be/9c3dBhvtt6o

.

.

static property 가 들어간 file번들링시 plugin-proposal-class-properties 필요할때도 있다. 일반적으로 최근 preset-env에 포함되어있는데 아닌 경우도 있을것 같아 아래 방법도 시도해 봤지만 실패

https://stackoverflow.com/a/60865451

.

.

.

문제해결을 위해 webpack 5로 업그레이드 시도했다.

webpack에 정보가 부족한듯 하여 webpack config기본 설정해 대한 유튜브 참고

이런경우 babel loader의 문제일수 있기 때문에 확인했지만 실패

결국 webpack 4로 돌아가고 selenium을 다운그레이드 했다. 

이전의 문제는 해결되었지만 process.binding이 지원되지 않는 다는 새로운 에러 발생 (추측컨대 react js는 client 에서 돌아가는 작업들이기때문에 selenium을 이용하는 경우 사용자 컴퓨터를 마음대로 이용하게 될수도 있기 때문에 보안상 원천 봉쇄된걸로 파악)

그래서 server end에서 python selenium과 headless webdriver를 이용하기로 했다. react js(client side)에서는 api를 통해 작업을 요청하고  이용해서 결과 데이터를 받는 방향으로 결정

참고 링크

selenium docs https://www.selenium.dev/documentation/webdriver/getting_started/install_drivers/

.

selenim 이용해서 metamask조작하는 과정

https://dev.to/ltmenezes/automated-dapps-scrapping-with-selenium-and-metamask-2ae9

.

webpack 5 config file example

https://youtu.be/9c3dBhvtt6o 에서 전반적인 설명

https://gist.github.com/prof3ssorSt3v3/3e5fcbfae9ba28b5816fd93a074e65bd

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', //production
  entry: {
    main: path.resolve(__dirname, 'src/app.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    assetModuleFilename: '[name][ext]',
    clean: true,
  },
  devtool: 'inline-source-map',
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 5001, //default 8080
    open: true,
    hot: true,
  },
  //loaders
  module: {
    rules: [
      //css
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
      //images
      { test: /.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: 'asset/resource' },
      //js for babel
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  //plugins
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Just a Demo',
      filename: 'index.html',
      template: path.resolve(__dirname, 'src/temp.html'),
    }),
  ],
};