Electron + Bootstrap 초보의 간단 앱 만들기

getbootstrap.com/

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

Bootstrap

빠르고 쉽게 일관된 디자인의 Front-end 를 개발할수 있는 Javascript Library. (Smartphone을 target으로 시작하여 모든 기기 지원)

설치방법

Local 에 파일을 다운로드 (Compiled CSS + JS)
CDN 으로 불러오기

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

npm install 하기

npm install bootstrap@next

코드 구조

dist/ 에는 precompiled 한 css, js
js/ scss 에는 bootstrap 의 code

Customize

Web Front-end 개발은 대부분의 시간을 Customize 하는데 보내지...ㅠㅠ

Sass (Syntactically Awesome StyleSheets) 로 Bootstrap 에서 제공하는 UI Component의 속성을 customize

bootstrap 코드의 SCSS?

SASS 는 CSS의 단순 반복 작업을 간단한문법으로로 처리하기 위한 CSS 전처리기
SCSS = SASS + CSS : CSS 문법과 유사하면서 SASS 기능가능
custom.scss 를 생성해 bootstrap 을 import 하면 index.html에서는 생성된 custom.css 만 추가하면 된다.
Visual Studio Code 의 Live Sass Compiler extension 설치하면 자동으로 CSS 컴파일 가능
- 사용법: 설치후 아래에 "watch sass" 라고 나오는 것을 클릭하면 "watching"으로 바뀌고, .scss 파일 수정후 저장할때마다 .css 파일을 생성한다. "success'라고 나오면 정상적으로 .css 변환된것~

Bootstrap Icon 사용하기

icons.getbootstrap.com/ 설명이 불친절한건지 내가 이해를 못하는건지... 해매다가 아래 Youtube 덕에 쓸수 있게 되었다.

www.youtube.com/watch?v=DPnJldwv22o

설치

npm i bootstrap-icons

html에서 사용하기

여려가지 방법이 있는데 그중 하나를 사용했다.

npm설치해서 /node-module/bootstrap-icons/ 아래의 bootstrap-icons.svg 파일을 내 코드로 옮긴다. 그리고 html 에 아래와 같이 추가

          <svg class="bi feather" width="32" height="32" fill="currentColor">
            <use xlink:href="bootstrap-icons.svg#heart-fill"/>
          </svg>

Bootstrap 의 기본 사용법

Layout

breakpoint
- Responsive UI 를 지원하기 위한 Breakpoint 를 아래와 같이 설정하고 class infix 로 사용 가능
- ex) grid 의 경우 화면은 3:9 로 나눌 때 col-3, col-9 (모든 화면에서 3:9 비율 유지) col-lg-3, col-lg-9 (large 이상의 px 에서만 비율유지, 작은 기기에서는 100%로 자동을 쌓이기만)

Containers
- 기본으로 Bootstrap으로 표현할 Contets를 쌓는 Block
  - container: 각 break point 마다 max-width 가 정해져 있고 이 fixed-width 기준으로 채움
  - container-fluid : 100 % width 로 채움

<div class="container">
  <!-- Content here -->
</div>
<div class="container-fluid">
  ...
</div>

Grid
- layout 분할하는 방법, 12개 column 시스템으로 분할 비율 설정
  - container 가 content 를 wrap하고,
  - row 는 colums를 wrap하고
  - 각 colums 는 glutter로 불리는 padding으로 서로 위치하고.
- ex) lg breakpoint 에 가면 화면을 1:2:9로 분할 col-lg-1, col-lg-2, col-lg-9
- breakpoint 별로 mix 해서 사용 가능 ex) 작은 기기에서는 3:3:6, lg 이상은 1:2:9

<div class="container">
  <div class="row">
    <div class="col-3 col-lg-1">
      One of three columns
    </div>
    <div class="col-3 col-lg-2">
      One of three columns
    </div>
    <div class="col-6 col-lg-9">
      One of three columns
    </div>
  </div>
</div>

Spacing : 예전에도 헷갈렸던 부분... padding 과 margin 의 의미.
- spacing 종류 m (margin), g (gutter), p (padding)
- spacing 방향 t (top), bc(bottom), l (left), r (right). x, y
- ex) gutters: columns 사이의 padding 설정. 수평간격 gx-3, 수직간격 gy-2,

Electron + Bookstrap + jQuery 앱 만들기

간단하게 동작하는 앱을 만드는것이 목적. 아무 생각없고 이유 없는 UI ㅋㅋㅋ

Electron 기본 앱 만들기

아래의 구조의 코드가 만들어진다.

main.js : main process
index.html : render
package.json

npm module 설치

jQuery, bootstrap, bootstrap-icons (그냥 한번 써보려고)

npm install jquery 
npm install bootstrap@next
npm i bootstrap-icons

코드 수정

구조

index.html 수정 (Layout)

Grid 를 써서 1(entrybar):4(sidebarMenu):7(main) 비율로 화면을 나눔.
각각은 jQuery로 html 삽입.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <!-- Custom styles for this template -->
  <link href="scss/custom.css" rel="stylesheet">
  <title>My Electron-Bootstrap App</title>
</head>

<body>
  <header class="navbar sticky-top p-2 shadow">
    <div class="container-fluid">
      Studio ghibli
    </div>
  </header>
  <div class="container-fluid">
    <div class="row">
      <nav id="entrybar" class="col-lg-1 col-2 sidebar">
      </nav>
      <nav id="sidebarMenu" class="col-lg-4 col-5 d-block sidebar offset-1 offset-lg-1 offset-2">
      </nav>
      <main class="col-lg-7 col-5 px-4 offset-lg-5 offset-7">
      </main>
    </div>
  </div>
  <script src="js/renderer.js"></script>
</body>

</html>

main.js

기본 electron quick start 예제에 테스트를 위해 코드 몇줄 추가
main process (main.js) 와 index.html (renderer process) 와의 통신시 ipcMain 으로 renderer.js 로 부터 메세지를 받는다.
main.js 의 console.log 는 terminal 에 찍힌다. (뭐가 다르지?)

const { app, BrowserWindow, ipcMain } = require('electron')

...

ipcMain.on("message", (e, string) => {
    console.log("message", string);
})

renderer.js

특별히 하는것은 없고 entrybar > sidebarMenu > click할때 html을 load 하는것이다. (이렇게 하는게 좋은건지...^^;; 찾아보니 partial html을 insert 하기 위한 library?같은 것이 있던데, 난 그냥 bootstrap 써보는게 목적이라...jQuery도 오랜만에 써봐서 기억이 잘 안나...)
main.js 로 메세지 전달시 ipcRenderer 로 전달
여기의 console.log는 browser console 에 찍힌다.

let $ = jQuery = require('jquery')
const { ipcRenderer, contextBridge } = require('electron')

$(window).on("load", function () {
    $("main").hide();
    $("#sidebarMenu").hide();
    $("#entrybar").load("html/entrybar.html", function () {
        entryfunc();
    })
});

...
function chihirofunc() {
    $("main").load("html/chihiro.html")
    $("main").show();
    $(this).children("a").addClass("active");
    ipcRenderer.send("message", "chihirofunc");
}
...

custom.scss

색상만 바꾸는 수준... background color. color map customize

// Custom.scss
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Your variable overrides
$body-color:#c5d9d8;
$primary:#c5d9d9;
$secondary:#679485;
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
);

...

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

요약

Bootstrap 에서 제공하는 기능에 대한 얕은 지식으로 간단한 앱을 만들어보니 Grid 기능이 정말 사용하기 좋은것 같다. (수년전 잠시 내부용 web app을 만들때는 이런 library 없이 순수 html5, css, jQuery로 해서 Layout 잡는게 정말 악몽 ㅠㅠ)
Sass 라는것을 처음 들어서 생소한데 이 부분을 잘 이해하면 bootstrap의 잘 정의된 값을 customize 해서 큰 수정없이도 자신만의 앱을 만들수 있을 것 같다. (막상 해보면... 다를수도)
Electron을 아직 잘 몰라서... bootstrap의 modal 과 electron의 native modal 의 동작이 어떻게 되는지 확인을 해봐야할것 같다. (하라는데로 modal 해봤는데 아무것도 안뜬다. ㅠㅠ)

'자습' 카테고리의 다른 글

Go OAuth2.0 서버 (0)	2021.01.31
node-forge를 이용한 RSA 암호화, CSR 생성 (0)	2021.01.16
Electron Quick Start (0)	2021.01.06
Gin (Go web framework) 앱을 Docker로 실행하기 (0)	2020.12.31
Go 코드를 AWS Lambda에서 실행해보기 (0)	2020.12.31

litaro's blog

Electron + Bootstrap 초보의 간단 앱 만들기

Bootstrap

설치방법

코드 구조

Customize

bootstrap 코드의 SCSS?

Bootstrap Icon 사용하기

설치

html에서 사용하기

Bootstrap 의 기본 사용법

Layout

Electron + Bookstrap + jQuery 앱 만들기

Electron 기본 앱 만들기

npm module 설치

코드 수정

구조

index.html 수정 (Layout)

main.js

renderer.js

custom.scss

요약

'자습' 카테고리의 다른 글

티스토리툴바

Electron + Bootstrap 초보의 간단 앱 만들기

Bootstrap

설치방법

코드 구조

Customize

bootstrap 코드의 SCSS?

Bootstrap Icon 사용하기

설치

html에서 사용하기

Bootstrap 의 기본 사용법

Layout

Electron + Bookstrap + jQuery 앱 만들기

Electron 기본 앱 만들기

npm module 설치

코드 수정

구조

index.html 수정 (Layout)

main.js

renderer.js

custom.scss

요약

'자습' 카테고리의 다른 글

관련글

티스토리툴바