🛫 프로젝트 시작 하기

 일렉트론 프로젝트를 시작하는 방법에는 여러가지가 있는데, 가장 간편한 방법으로는 Boilerplate를 클론하는 방법이 있다. 그러나 본 프로젝트에서는 사용하지 않았는데 왜냐하면 Electron with React를 표방하는 Boilerplate들이 모두 Typescript로 작성되어있기 때문이다. 우리는 JS도 익숙하지 않아 TS로 작성할 여유는 없었고, 일렉트론 빌딩 툴인 electron forge의 가이드를 따라 직접 JS로 이뤄진 템플릿을 만들었다.

Electron Forge 공식문서의
Guides -> Framework Integration -> React 탭에 있는 내용을 그대로 따라해준다.

물론 Node.js가 설치되어 npm을 사용할 수 있는 상태여야 한다.

• Webpack 템플릿으로 일렉트론 시작
• babel-loader 설치 및 세팅(세팅 후 설치)
• react react-dom 설치
• app.jsx와 renderer.js 작성

 가이드에 따라 작업을 마쳤다면 원활한 진행을 위해 해줘야 할 설정들이 좀 더 있다.

CSS Reset

 index.css를 에릭 마이어 reset으로 바꿔주었고, index.html의 body도 비웠다.

라우팅 설정

 Electron은 우리가 브라우저에서 사용하는 일반적인 라우팅 주소를 사용하지 않기 때문에 (file system) 주로 Hash Router를 사용한다.
이번에 오랜만에 react-router-dom V6을 받았는데 네이밍이 다 골때리게 바뀌어서 애를 좀 먹었다.
기억에 남는 건 switch -> routes , history -> navigate 같은 것 들이다.

 react-router-dom 설치 후 app.jsx에서 app.js를 렌더링하고 그 안에서 하였다.
화면은 intro(첫화면), lobby(방 입장, 방만들기), room(채팅방) 으로 구성되어, 동명의 컴포넌트로 라우팅한다.

app.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './app.js';

function render() {
  ReactDOM.render(
      <React.StrictMode>
        <App/>
      </React.StrictMode>, document.body);
}
render();

app.js

import{ HashRouter, Route, Routes} from 'react-router-dom';
import Intro from './component/intro/intro';
import Lobby from './component/lobby/lobby';
import Room from './component/room/room'

function App(){
    return(
        <HashRouter>
          <Routes>
            <Route path="/" element={<Intro/>}/>
            <Route path="/lobby" element={<Lobby/>}/>
            <Route path="/room" element={<Room/>}/>
          </Routes>
        </HashRouter>
    )
}
export default App

(작성 후 작성하지 않은 컴포넌트에 대한 라우트 컴포넌트는 에러를 일으키므로 일단 주석처리)

file-loader 설정

 Electron Forge의 가이드에 따라 작성된 템플릿은 일반적인 방법으로 이미지 태그와 파일 경로를 통한 이미지 로딩이 불가능하다. 그래서 file-loader를 설치 후 webpack rules에 file-loader세팅을 해줬다.

 그러고나면 img 폴더를 만들어 static asset 관리가 가능해진다.
webpack.renderer.config.js

const rules = require('./webpack.rules');

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

rules.push({
  test: /\.(png|jpg|svg|jpeg|gif)$/i,
  use: [
      {
          loader: 'file-loader',
          options: {
              name: 'img/[name].[ext]',
              publicPath: '../.'
          }
      },
  ],
});

module.exports = {
  // Put your normal webpack config below here
  module: {
    rules,
  },
};

 이 상태로 실행하면 컴포넌트가 없기 때문에 오류가 날텐데
이제부터 컴포넌트를 작성하면 된다.