[Electron] 1. Electron에 React 탑재하기! Kassid

728x90

2023.05.01 - [🌌 | WEB DEV/Electron] - [Electron] 0. Electron이란? & 초기설정

Electron은 JS기반 프레임워크이기 때문에 React 역시 함께 활용할 수 있다.

저번 포스트에서 진행한 프로젝트에 React를 탑재해보자!

1. React 패키지 추가하기

npm install --save react react-dom

위 명령어를 통해 설치가 완료된 경우 package.json에는 이처럼 추가가 된다.

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
}

2. 소스파일 만들기

main_react라는 이름으로 js파일을 생성하였다. (이름은 임의 작성)

main_react.js

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

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

3. 웹팩용 패키지 추가

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

리액트를 모듈 번들러 라이브러리인 웹팩에서 구동하기 위해서

4. webpack.common.js 추가

webpack 구동을 위한 파일을 생성한다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/main_react.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']
          }
        }
      },
      {
      	// css 관련
        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'),
  },
};

6. package.json의 scripts에 watch 추가

"scripts": { 
  "watch": "webpack --config webpack.common.js --watch",
}

scripts에 watch를 추가한다.

7. 스크립트 실행

npm run watch

스크립트에 정의한 watch 명령어를 실행하면 build/js/app.js 가 생성된다.

8. index.html에 app.js 추가

index.html 파일의 body 태그 안에 app.js를 가져온다.

<body>
  <div id="root"></div>
  <script src="../../build/js/app.js"></script>
</body>

위와 같은 형태로 app.js를 가져온다.

9. 시작

npm start

시작 명령어로 앱을 구동한다.

저작자표시

'🌌 | WEB DEV > Electron' 카테고리의 다른 글

[Electron] 0. Electron이란? & 초기설정 (0)	2023.05.01

[Electron] 1. Electron에 React 탑재하기!

1. React 패키지 추가하기

2. 소스파일 만들기

3. 웹팩용 패키지 추가

4. webpack.common.js 추가

6. package.json의 scripts에 watch 추가

7. 스크립트 실행

8. index.html에 app.js 추가

9. 시작

'🌌 | WEB DEV > Electron' 카테고리의 다른 글

댓글

티스토리툴바

[Electron] 1. Electron에 React 탑재하기!

1. React 패키지 추가하기

2. 소스파일 만들기

3. 웹팩용 패키지 추가

4. webpack.common.js 추가

6. package.json의 scripts에 watch 추가

7. 스크립트 실행

8. index.html에 app.js 추가

9. 시작

'🌌 | WEB DEV > Electron' 카테고리의 다른 글

관련글

댓글

티스토리툴바