[REACT.js] 구름IDE 환경에서 CRA없이 REACT+webpack 개발환경 구축하기

들어가기에 앞서

필자는 육군 모 통신부대에서 군 복무 중인지라 리액트를 공부하려면 구름 IDE를 쓸 수밖에 없는데, 구름에서 제공하는 리액트 템플릿으로 webpack을 적용하려면 eject를 통해 webpack을 설정하거나, customize-cra라는 걸 사용해야 하는 것 같았다. 하지만 알 수 없는 에러 메시지만 뱉어낼 뿐, 해결이 불가능하여 전전긍긍하던 중 CRA 없이 라이브 개발이 가능한 방법을 찾아내어 기록해보려 한다. 참고한 블로그는 여기

 

컨테이너 생성

리액트 컨테이너 생성

리액트 컨테이너를 생성하면 기본적으로 CRA를 통해 리액트 앱이 생성된다. 이 앱을 그대로 쓰려는건 아니고, 구름에서 제공하는 실행 URL을 써먹기 위해서 일단은 위와 같이 컨테이너를 생성하자.

 

의존성 설치

과감하게 모두 삭제하자

의존성 설치에 앞서 구름이 자동으로 생성해놓은 패키지를 모두 삭제하도록 하자. 우리는 구름이 제공하는 URL만 써먹으면 되므로, 빈 프로젝트에서 다시 시작하도록하자.

 

그다음은 nodejs를 받고 취향에 맞게 npm이나 yarn을 사용해서 아래 의존성을 설치해주면 된다.

yarn init

yarn add react react-dom react-prop-types @babel/runtime

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react webpack webpack-cli html-webpack-plugin webpack-dev-server

 

설정 파일

패키지 설치가 완료되었다면 babel, webpack, package설정을 만져줄 차례다. 아래와 같이 설정해주도록 하자.

 

package.json

 

 

 

 

CRA로 생성한 프로젝트의 start스크립트는 아래처럼 되어있다.
    "start": "react-scripts start"

 

이 부분을 위의 아래처럼 변경하자 

    "start": "webpack-dev-server"

 

babel.config.js

 

 

 

 

 

 

webpack.config.js

 

 

devServer: {
        host: '0.0.0.0',
        open: true,
        hot: true,
        inline: true,
        historyApiFallback: true,
        disableHostCheck: true
    }

이 부분 때문에 한참을 삽질했는데, 구름 IDE 컨테이너의 내부 IP는 0.0.0.0이기 때문에 위와 같이 설정해주어야 한다. 단순히 host만 위와같이 설정하고 실행할 경우 Invalid Host Header라는 메시지가 뜨게 되는데, 구름 ide가 클라우드 환경이기 때문에 disableHostCheck: true로 설정하여 Host가 아니더라도 접속이 가능하도록 해야 한다.

 

완성!

구름IDE환경에서 만든 REACT앱 (예제출처: Learning React, O'REILLY)

이제 구름 IDE환경에서 리액트 개발에 필요한 준비가 모두 끝났다.