『Client 02 』 [React] [Electron] React 사이드 메뉴, Electron Icon 변경하기

💻 프로젝트/02. 사내 공지 데스크톱 앱

『Client 02 』 [React] [Electron] React 사이드 메뉴, Electron Icon 변경하기

허나니 2023. 9. 16. 22:41

728x90

📖 개요

📌 오늘 할 일

◻ Title을 na-nii.tistory로 변경하기

◻ Electron Icon 변경하기

◻ React 사이드 메뉴 만들기 (React-router-dom)

완성된 화면 보기 👉 Electron

완성된 화면 보기 👉 React

📁 폴더 구조

뒤로 갈수록 통신이랑 props 값 넘겨주기 등 헷갈려서 폴더 구조를 그려가며 진행할 예정이다.

현재 내 폴더 구조이다.

0916이라는 프로젝트 아래에 다음과 같이 구성되어 있다. (폴더 색이랑 파일 색 매칭 시키면 된다.)

css는 부트스트랩을 포함한 css 관련된 파일

image는 Logo, Tray_icon 등 각종 png 파일

pages는 page에 관련된 파일을 넣을 예정이다.

💻 React Title 변경하기

public 폴더에 있는 index.html에 <title> 태그를 변경해주면 된다.

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>na-nii.tistory</title>
  </head>
  <body>
    <div id="root"></div>

  </body>
</html>

Electron과 React 화면 모두 변경된 것을 확인할 수 있다.

💻 사이드 메뉴 만들기

사이드메뉴를 구성하기에 앞서 react-router-dom을 설치한다. (v6 사용할 예정)

<Link> 와 <NavLink>를 사용하기 위해서 필요한 라이브러리다.

npm i react-router-dom

html 에선 <a>로 URL을 잡아줬다면 react에선 <Link>로 URL을 변경한다.

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

<NavLink>는 Link의 특별 버전으로 특정 링크에 스타일을 넣을 수 있다.

import { NavLink } from 'react-router-dom';

<NavLink to="/about" activeClassName="active">

전체 코드

/* Side.jsx */
import React from 'react';
import "../css/Side.css";
import { NavLink } from 'react-router-dom';
import Logo from '../image/Logo.png';

const Side = () => {
  return (
    <div className="side-menu">
      <img className="Logo" src={ Logo } alt= "Logo" width='180'/>

        <ol className="menu">
          <NavLink to="/server" activeClassName="active" className='panel'>서버 점검 안내</NavLink>
          <NavLink to="/all" className='panel'>전체 공지 사항</NavLink>
          <NavLink to="/etc" className='panel'>개인 공지 사항</NavLink>
          <NavLink to="/" className='panel'>프로그램 정보</NavLink>
        </ol>

    </div>
  );
};

export default Side;

/* side.css */
.side-menu {
    top: 10px;
    width: 200px;
    z-index: 10;
    background: white;
    height: 550px;
    position: fixed;
    box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0px 0 rgb(0 0 0 / 2%);
    margin-left: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    border-left: solid 20px #0073c1;
}

.menu {
    display: block;
    height: 50px;
    font-weight: 600;
    padding-top:9px;
    background-color: transparent;
    padding-left:20px;
    transition: box-shadow 1s ;
}

.Logo {
    margin: 10px 30px 0px 0px; /*위 왼 아래 오*/
}

.panel {
    width: 100%;
    border-radius: 5px;
    height: 50px;
    display: block;
    background-color: white;
    text-align: left;
    padding-left:20px;
    line-height: 50px;
    color: black;
    font-size: 14px;
    text-decoration: none;
}

.menu>.active {
    background-color: #0073c1 !important;
    color: white !important;
}

.on {
    display: block !important;
}

💻 사이드 메뉴 적용 (index.js)

위에서 설정한 side.jsx를 추가할 것이다.

HashRouter를 사용한 이유는 나중에 react build를 통해 electron에 올릴 것인데, 이 때 절대경로가 필요하기 때문이다.

또한, 나는 side.css 처럼 특정 부분에서 필요한 css는 해당 파일에 선언하지만

전체적으로 필요한 css파일은 index.js에 전역으로 선언한다. (className을 중복되지 않게 잘 설정해야한다.)

bootstrap 파일의 경우도 오프라인으로 개발을 진행하다보니 CDN 루트가 아닌 파일로 가지고 있다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter} from "react-router-dom";

import './css/bootstrap.min.css';
import "./css/detail.css"
import App from './App';
import Side from "./pages/Side";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <Side/>
    <App/>
  </HashRouter>
);

💻 electron icon 변경 및 옵션 정리 (main.js)

//main.js
const { app, BrowserWindow } = require('electron') 
const path = require('path') 
function createWindow () { 
  const win = new BrowserWindow({ 
    width: 880, 
    height: 600,
    icon: path.join(__dirname, '/image/Tray_icon.png'),
    frame:true,
    resizable:false,
    autoHideMenuBar: true,
    webPreferences: { 
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
    } 
  }) 
  win.loadURL("http://localhost:3000")
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit() 
})

icon을 설정함으로써 electron 기본 아이콘이 아닌 내가 설정한 아이콘으로 설정했다.

resizable을 false로 설정해서 창 크기 조절하는 것을 막았다. (기본값은 true)

autoHideMenuBar로 윈도우의 메뉴바를 숨길 수 있다. (기본값은 true)

webPreferences Electron 웹 환경설정(웹 페이지 기능 설정)을 하는 옵션으로,

nodeIntegration: true, Electron 내부에서 Node 기반 라이브러리를 사용할 경우 true로 설정해야한다.(기본값 false)

enableRemoteModule : electron 모듈을 불러올 때 사용

contextIsoloation: window.require is not a function일때 false로 추가 (react에서 os 와 ip 모듈을 사용할 예정이라 미리 설정해주었다.)

728x90