본문 바로가기

Coding/React34

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.
React - regeneratorRuntime is not defined React cli로 설치로 설치를 해서 async/await을 사용하는데 무리가 없지만, webpack과 babel을 이용한다면 async/await을 사용하는데 어려움이 있다. 브라우져에서 regeneratorRuntime 에러를 보내 줄 것이다. 이 에러는 babel 설정을 통해서 해결 할 수 있다. 우선 babel runtime을 설치를 한다. npm install @babel/plugin-transform-runtime @babel/runtime 그리고 나서 webpack config 파일에서 설정을 한다. module.rules.use.options.pulgins 값으로 설정을 한다. const path = require('path'); const HtmlWebpackPlugin = requir.. 2022. 2. 3.
React - React install react를 처음 설치를 할 때, 2가지 방법이 있다. 하나는 npm을 이용해서 설치를 하고 webpack과 babel을 이용하여 커스텀화 시킬수 있고, 다른 한가지 방법은 react cli를 활용하는 방안이다. 특징들을 비교해 보면... # npm 설치 - 원하는 라이브러리만 설치가 가능하다. - 필요한 기능들만 넣어서 cli에 비해 가볍기 때문에 build 시간이 절약 - webpack 및 babel 설정이 필요하기 때문에 초기 setting이 오래 걸린다. # cli 설치 - 쉽게 설치가 가능하다. - 필요한 기능 이외에 다른것들 까지 설치가 되어 build 시간이 보다 오래걸린다. ## cli 설치 cli설치 명령어는 다음과 같다. 폴더명 뒤에 옵션들을 넣을 수 있고, react를 설치할 때 필요.. 2022. 2. 2.
반응형

티스토리툴바