본문 바로가기

분류 전체보기142

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.
Git - git merge git merge 명령어는 브랜치를 합치는 과정이다. 특히 merge는 조심해야 하는것이 한번 merge가 되면 되돌아가 가기가 안되는 것으로 알고 있다. commit은 브랜치 이동이나 stash로 돌아갈 수 있지만... 그래서 merge는 신중해야한다. # Merge - 현재 repo 브랜치, 즉 vscode 기준으로(좌측 하단)에 나와 있는 브랜치에 merge를 하겠다는 의미이다. git merge [merge할 브랜치] // ex) // 현재 vscode 브랜치가 master // git merge dev // 명령어를 입력하면 master에 dev 브랜치를 merge 하겠다는 의미 ## git merge 종류 - fast - forward merge - 기본 merge 명령어의 디폴트 값이다. g.. 2022. 2. 5.
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.
반응형

티스토리툴바