본문 바로가기

Coding127

React - BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default React를 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default error가 발생할 수 있다. webpack 버전이 5 이상이 되면서 더이상 지원하지 않는 것이기 때문에 webpack 설정이나 라이브러리로 해결할 수 있다. 항상 url, crypto, https, os, stream 에러가 항상 같이 발생이 한다. 그래서 라이브러를 모두 설치를 해줘야 한다. 라이브러리 설치 npm install --save-dev url crypto-browserify stream-http https-browserify os-browserify stream-browserify ##React webpack & b.. 2022. 2. 28.
React - React cli webpack override 적용 React를 cli로 설치하고 나서 webpack 설정 값을 바꿀 필요가 있을 때가 있다. 우선, react-cli에는 이미 webpack 설정이 되어 있고, 값들이 지정되어 있다. 이 파일 덮어 씌울 수 있도록 도와주는 라이브러리가 있다. react-app-rewired 이다. npm install react-app-rewired ## 설정하기 React 가 설치되어 있는 최상단 디렉토리에 config-override.js 파일을 만든다. 그리고 나서 webpack을 설정을 해주면 된다. override 할 부분들은 객체 값을 변환 시키듯이 설정하면된다. 설정을 하고나서 return 값을 config를 준다. - config.module은 webpack의 모듈값을 덮어씌운다. - config.plugi.. 2022. 2. 27.
React - Missing semicolon(typescript-webpack) React를 webpack 설정을 하다가 보면 다음과 같은 error 가 발생 할 수 있다. typescript에서 변수의 type을 정할 때 사용하는 semicolon을 캐치를 못해서 생기는 오류이다. 이것을 해결하기 위해서는 npm i @babel/preset-typescript 라이브러리를 설치를 하고 webpack 설정을 해주면 된다. {presets: ['@babel/preset-typescipt']} 추가 rules: [ { test: /\.ts$|\.tsx$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env', '@babel/preset-react', '@babel/p.. 2022. 2. 23.
React - React environment 설정(.env) React를 npm 으로 커스텀 시켜서 만들었다면, webpack 설정에서 environment를 설정해서 사용이 가능하다. 물론 process.env.~ 를 활용하는 것은 아니고 webpack plugin을 활용하여 environment 변수 값을 설정해서 사용이 가능하다 React cli 경우엔 이야기가 다르다. 최상위 디렉토리에 .env 파일을 만들고 거기에 필요한 변수들을 설정해서 사용을 해야한다. 기본적으로 React는 react-script를 사용하기 때문에 설정할 때 prefix 가 필요하다. 지난번 포스팅했던 next.js에 변수를 설정하는 것처럼 React-cli로 React를 설정했다면... # prefix - REACT_APP_ - 위와같이 변수를 설정을 해야 읽을 수 있다. - .e.. 2022. 2. 13.
반응형

티스토리툴바