[React, Typescript] React, Typescript 개발환경 오류 해결, github pages 사용하기

React, Typescript 개발환경 오류

React와 Typescript를 적용하다 오류가 발생했다.

Support for the experimental syntax 'jsx' isn't currently enabled (6:3):

loc: Position { line: 6, column: 2, index: undefined },
pos: 106,
missingPlugin: [ 'jsx', 'flow', 'typescript' ],
code: 'BABEL_PARSE_ERROR'

설치가 안된 plugin이 있었다.

// jsx plugin을 설치하고
$ npm install --save-dev @babel/plugin-syntax-jsx

// babel.config.json에 추가.
{
  "plugins": ["@babel/plugin-syntax-jsx"]
}

$ babel --plugins @babel/plugin-syntax-jsx script.js

// 실행 후 오류 발생
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.

    npm uninstall babel
    npm install --save-dev babel-cli
    
    
$ npm uninstall babel
$ npm install --save-dev babel-cli

// webpack 설정
$ npm i --save-dev html-webpack-plugin

webpack plugin을 설치하여 오류를 해결하였다.
CRA 없이 처음으로 개발환경을 설정 해 봤는데,
세부 설정들을 더 공부해서 React 세팅을 커스텀해봐야겠다.

React 와 Typescript github pages 사용하기

$ npm install --save gh-pages

// package.json 파일 수정
{
  "hompages" : "github pages url",
  ...
},
"scripts" : {
  "predeploy" : "npm run build",
  "deploy" : "gh-pages -d build"
  ...
  },
 }

$ npm run deploy