[프로젝트생성-3] 일렉트론에 리액트 추가하기

https://uno-kim.tistory.com/375

[프로젝트 생성-2] 일렉트론 패키징과 배포

일렉트론 패키징과 배포에 대해서 알아보았습니다.

이번에는 이제 마지막으로 일렉트론에 리액트를 추가해 보겠습니다.

리액트 추가하기

리액트 라이브러리를 추가하기 위해서는 패키지를 추가해야합니다. 아래의 명령어를 입력해 줍니다.

npm install --save react react-dom

설치가 됩니다.

완료된 모습

리액트 연결해보기

이제 리액트 js 파일을들을  저장할 js폴더를 만들어줍니다.

위치는 src > js 폴더에 만들어주었습니다.

그리고 해당 js 에 리액트를 연결해 주겠습니다.

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>Hello React App</h1>, document.getElementById('root'));

리액트코드를 랜더링하는 코드입니다.

지난번에 만들었던 index.html 에 루트를 추가해줍니다.

기존인덱스에서 날려버리고 div태그에 root id를 넣어줍니다.

빌드를 위한 웹팩 설치

이제 빌드를 위한 웹팩을 설치해보곘습니다.

웹팩은 바벨을 설치합니다.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader sass-loader sass webpack webpack-cli

설치중인 모습

이제 root 폴더에 webpack.common.js 라는 js 파일을 만들어줍니다.

그리고 아래의 내용을 그대로 카피해서 넣어줍니다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};

내용을 보면 엔트리 포인트를 인덱스.js 로 해주었고

output 파일을 app.js 로 만들어 질것입니다.

paht는 빌드밑에 js 가될것입니다.

컴파일이 되기위해 package.json 에 스크립트가 추가되겠습니다.

,"watch": "webpack --config webpack.common.js --watch"

이게 이제 감시를 하고있다가 변경을 체크해서 수행하겠다는 스크립트입니다.

이것은

npm run watch

를 통해서 실행하시면 됩니다.

실행에 성공한 모습

새로운 빌드\js 폴더가 생성되었다.

새로 빌드된 app.js를 index.html 에추가해줍니다.

<script src="./build/js/app.js"></script>

추가해준 모습

이제 프로젝트를 실행해 보겠습니다.

정상적으로 실행되었습니다.

index.js에 있는 Hello React App이 출력되었습니다.

이것으로 일렉트론에 리액트를 추가하는 방법에 대해 알아보았습니다.

감사합니다.