https://uno-kim.tistory.com/375
[프로젝트 생성-2] 일렉트론 패키징과 배포
지난 포스팅 https://uno-kim.tistory.com/370 [프로젝트 생성-1]node.js로 일렉트론 설치하기 https://uno-kim.tistory.com/369 Node js 설치 노드 JS 를 설치하는 방법입니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript
uno-kim.tistory.com
일렉트론 패키징과 배포에 대해서 알아보았습니다.
이번에는 이제 마지막으로 일렉트론에 리액트를 추가해 보겠습니다.
리액트 추가하기
리액트 라이브러리를 추가하기 위해서는 패키지를 추가해야합니다. 아래의 명령어를 입력해 줍니다.
npm install --save react react-dom
리액트 연결해보기
이제 리액트 js 파일을들을 저장할 js폴더를 만들어줍니다.
그리고 해당 js 에 리액트를 연결해 주겠습니다.
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(<h1>Hello React App</h1>, document.getElementById('root'));
리액트코드를 랜더링하는 코드입니다.
지난번에 만들었던 index.html 에 루트를 추가해줍니다.
빌드를 위한 웹팩 설치
이제 빌드를 위한 웹팩을 설치해보곘습니다.
웹팩은 바벨을 설치합니다.
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
를 통해서 실행하시면 됩니다.
새로 빌드된 app.js를 index.html 에추가해줍니다.
<script src="./build/js/app.js"></script>
이제 프로젝트를 실행해 보겠습니다.
index.js에 있는 Hello React App이 출력되었습니다.
이것으로 일렉트론에 리액트를 추가하는 방법에 대해 알아보았습니다.
감사합니다.
'Electron' 카테고리의 다른 글
[기초-1] 일렉트론 메뉴 추가하기 / 다루기 (1) | 2023.02.24 |
---|---|
[프로젝트 생성-쉬운버전] 리액트 프로젝트에 일렉트론추가하기 (0) | 2023.02.24 |
[프로젝트 생성-쉬운버전] 일렉트론 App 쉽게만들기 (보일러플레이트) (0) | 2023.02.23 |
[프로젝트 생성-2] 일렉트론 패키징과 배포 (0) | 2023.02.22 |
[프로젝트 생성-1]node.js로 일렉트론 설치하기 (0) | 2023.02.22 |
댓글