📖 개요
📌 오늘 할 일
◻ 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 변경하기
//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-domhtml 에선 <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 모듈을 사용할 예정이라 미리 설정해주었다.)
'💻 프로젝트 > 02. 사내 공지 데스크톱 앱' 카테고리의 다른 글
| 『Server 04 』[express] [mysql2] Node.js 서버 개설, DB 연동(GET) (0) | 2023.09.17 |
|---|---|
| 『Client 03 』 [React] [Electron] 정보 탭 CSS(Grid), 내 pc IP, Host 가져오기 (0) | 2023.09.17 |
| 『Client 01 』 [React] [Electron] Electron에 React 창 띄우기 (0) | 2023.09.16 |
| 『Server 03 』 [React] 프로젝트 생성 + 불필요한 파일 정리 (0) | 2023.09.13 |
| 『Server 02 』 MYSQL 설치 및 설정 (Window 10) (0) | 2023.09.12 |
