electron + react 프로젝트 셋팅

create

npx create-react-app fmap

electron 추가

cd fmap
yarn add --dev electron

실행 스크립트 추가 (package.json), 일렉트론 진입점 설정(src/StartUp.js)

{
  "name": "fmap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "electron": "electron .",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^21.3.1"
  },
  "main": "src/StartUp.js"
}

일렉트론 진입점 (src/StartUp.js)

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

function createWindow () { 
  const win = new BrowserWindow({ 
    width: 1600, 
    height: 900, 
    webPreferences: { 
      nodeIntegration: true,
      contextIsolation : false
    }
  });
  win.loadURL("http://localhost:3000");
  win.webContents.openDevTools(); 
} 
app.whenReady().then(() => { 
  createWindow();
}) 
app.on('window-all-closed', function () { 
  if(process.platform !== 'darwin') {
    app.quit();
  }
});

일렉트론 앱을 실행할 때 로컬 노드 서버를 실행하기 위해 패키지 추가

yarn add --dev concurrently wait-on

설치한 concurrently, wait-on을 package.json에 추가

{
  "name": "fmap",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "electron": "electron .",
    "startup": "concurrently \"yarn react-scripts start\" \"yarn electron\" ",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "electron": "^21.3.1",
    "wait-on": "^6.0.1"
  },
  "main": "src/StartUp.js"
}

yarn startup 실행시 자동 실행하는 웹브라우저는 제외하도록 설정(.env)

BROWSER=none

yarn startup 실행

yarn startup

최근 SPARC Solaris 10(5.10)을 다룰 일이 자주 있어서 작업 팁을 남겨놓는다.

쉘은 다행히 bash가 설치되어 있으니, bash로 진행.

쉘에서 한글 표현

이미 설치는 완료되고 사용되고 있던 상태인데 한글이 깨져서 나온다.

간단히 체크해 볼 것은 쉘의 LANG 변수

그럼 폰트나 캐릭터셋(로케일) 정도만 확인해보면 되겠다.

LANG 값을 변경해서 간단히 테스트.

Subversion 설치

빌드 스크립트 작업을 진행하여야 해서 svn이 필요하다

csw (https://www.opencsw.org/) 으로 관리되는 pkgutil을 사용하여 subversion을 설치한다.

이는 csw 홈페이지의 instruction 대로 했다.
설치 이후 확인.

csw의 pkgutil에 대하여 첨언하자면, pkgutil -i <package-name> 하여 설치하다 보면

ERROR: attribute verification of failed pathname does not exist

라는 오류가 나올 때도 있다. 그냥 걱정하지 말고 설치 한 번 더 하면 설치가 된다. 한 번으로 안되면 두 번, 세 번.. 하다 보면 된다. (이해가 안가.. ;;)

열 번에 일곱 여덟 번은 야근하는 요새, 간만에 일찍 퇴근해서 집에 들어선 순간 오랜만에 맡아보는 콩나물향이 코끝을 스쳤다.

“다녀왔어.”

“어서 와요”

매일 보는 아내지만 늦은 밤이 아닌 저녁에 보는 얼굴은 항상 반갑다. 침대에서 헤드폰을 쓰고 스마트폰과 뒹굴거리는 아들은 아직 아빠의 퇴근을 모르는 것 같다.

“아빠 왔다.”

“아빠, 안녕히 다녀오셨어요.”

일어나서 인사를 넙쭉하더니 대뜸 부탁을 던진다.

“햄버거 먹고싶어요.”

“엄마가 국 끓여놨잖아, 그냥 밥 먹어.”

“네.”

“그러게, 밥하기 전에 말을 하지.”

필자는 컴퓨터 프로그램을 만드는 프로그래머이다. 최근 다섯 달에 걸쳐 진행하던 공공기관 소유의 경보 시스템이 완성되었는데, 해당 시스템은 기존에 잘 쓰던 시스템을 더 좋게 업그레이드하는 작업이었다. 물론 평소 유지 관리하는 업체는 따로 있다. 작업이 다 된 후 한 연락을 받았다. 최근 몇 가지 기능이 기존 시스템에 추가되었는데, 이번에 필자가 오픈한 시스템에는 추가된 기능이 없다는 것이다. 시스템을 유지, 관리하는 업체가 그 이야기를 오픈한 마당에 해당 공공기관의 공무원을 통해서 말한 것이다. 작업하는 몇 달 동안 말 한마디 없더니. “그러게, 진작에 말을 하지.”

이런 일은 우리네 일상에 꽤나 자주 일어난다. 말 한마디만 해줬으면 서로 오해할 일도, 미워할 일도 줄어들 텐데 말이다. 물론 이해관계가 서로 상반되거나, 좋지 않은 감정이 쌓였거나 하면 이야기하기 싫을 수도 있다. 그렇지만 잠깐 이야기 하는 것이 서로 감정 상해가며 목에 핏대를 세우는 것이나 손해 배상 청구 소송보다는 훨씬 쉽다. 그리고 이 말을 유념할 필요가 있다. “지금 이 순간은 지금 이 순간 밖에 없다.”

사랑하는 아내도, 귀여운 아이도 천년만년 나와 같이 사는 것은 아니다. 극단적으로 내일이 이 세상의 끝이라는 생각이 아니더라도, 자식은 언젠가 커서 집을 나갈 것이고, 나도 아내도 언젠가 늙어 헤어질 날이 올 것이다. 그러니 그 전에 말 한마디라도 예쁘게 하자. 별로 힘든 일도 아니니까 말이다. 세상을 아직은 길게 살아보지 않아서 내일이 어떨 지는 잘 모르겠지만, 오늘은 반드시 행복한 그리고 즐거운 날이고 싶다.

Easy Google Font 플러그인

세부설정이 잘 안되어서 포기했다.

WP Google Font 플러그인

업데이트된 지 너무 오래된 것 같아서 쓰지 않으려다가 대안을 빨리 못찾아서 그냥 쓰게 되었다.
Custom CSS를 여러 개 적용해서 태그별로 골라쓰는 방법으로 해야겠다. 일단 본문만 나눔고딕 적용한다.

/* 
https://fonts.google.com/earlyaccess
*/
@import url(“http://fonts.googleapis.com/earlyaccess/nanumgothic.css” ) ;

그런데…. 플러그인 안쓰기로 했다.

세부설정이 좀 까다로와서.. 말이지. 그래서 테마의 css에 다음을 추가했다.

@import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);

h3 { font-family: "KoPub Batang"}

@import url(“http://fonts.googleapis.com/earlyaccess/nanumgothic.css” ) ;

.entry-content {font-family: "Nanum Gothic"}

고기 재료

소고기 500g, 돼지고기 기름 많은 거 500g

양파 1개, 당근 1개

오레가노 4큰술

계란 2개

체다 슬라이스 치즈 3장

빵가루 3컵

소금, 후추, 다진마늘

소스 재료

캐찹, 머스타드, 불고기, 핫소스

가니쉬 재료

쌀밥,

쌍근피싱

• 거제

창리 바다쉼터 & 낚시공원

• 서산

정남진해양낚시공원

• 장흥

거금해양낚시공원

• 고흥

돌산해양낚시공원

• 거제

해와달 해양낚시공원

• 하동

아마도 5년 전 즈음 그러니까 2012년 아닐까 싶은데, 겨울엔 낚시도 하지 않고, 추워서 아들과 밖으로 잘 놀러다니지도 않는 나로서는 주말에 놀거리가 확 줄어버렸었다. 평소 빵을 즐겨 사먹었었는데, 특히 아침밥으로는 90% 빵인 정도였으니까, 자주 사먹기엔 좀 비싸다는 생각을 항상 하고 있었다. ‘그럼 만들면 되지!’라는 간단한 생각에 버터향 가득한 모닝롤을 목적으로 제빵을 독학했다. 그리고 어느새 나만의 레시피를 하나 갖게 되었고, 그걸 기록하여야겠다는 생각이 든다.

이 빵은 버터가 많이 들어가는 것이 특징이다. 밀가루 500g 기준의 빵으로 식빵틀에 넣어서 굽기도 하고, 동그랗게 빚어서 모닝롤처럼 굽기도 한다. 버터가 많이 들어간 빵으로는 프랑스의 브리오슈가 있는데, 그건 나중에 알았다. 브리오슈를 목표로 했다기 보단 그냥 최대한 버터를 많이 넣고 싶었으니까.

재료

• 계란 1개 : 보통 파는 것 중 특란이 적당하다. 왕란은 너무 크다.
• 버터 112g : 이 보다 더 많이 넣으면 반죽이 잘 뭉처지지 않는다. 따듯하게 하여 녹여둔다.
• 밀가루 강력분 500g : 고운 채에 걸러서 밀가루 뭉치가 들어가지 않도록 한다.
• 인스턴트 이스트 10g : 이스트는 30도 정도의 따뜻한 물에 설탕과 같이 넣어서 젓어 둔다.
• 분유 8g : 분유가 없으면 우유 또는 생크림으로 대체할 수 있으나, 그러면 수분을 조절해야 한다.
• 소금 9g
• 설탕 63g
• 물 200g

절차

1. 재료를 준비해둔다. 물은 30도 정도 따뜻하게 하고 100g은 이스트를 설탕과 함께 풀어서 활성화시킨다. 물 온도가 40도를 넘어가면 이스트가 죽을 수 있므로 적당히 따듯하게 한다. 조리용 온도계가 없으면 이 기회에 사는 것도 좋겠다.
2. 반죽한다. 주의할 점은 버터를 제외한 모든 재료를 넣고 반죽하여 어느 정도 뭉쳐지고 나면 버터를 넣는다. 글루텐 형성이 제대로 될 때 까지 하면 끝. 버터가 많이 들어가서 만만치 않을 것이다.
3. 완성된 반죽을 볼에 담아 랩으로 씌워둔 다음에 랩에 구멍을 5, 6개 뚫어 놓는다. 25도 정도의 약간 따뜻한 곳에서 1시간 발효시킨다.(1차 발효) 발효에서 주의할 점은 과발효 되지 않게 하는 것이다. 발효 시간은 중요하지 않고 원래 크기의 2배에서 2.5배 정도로 부피가 늘어나면 발효 된 것이다. 중간 중간 상태를 확인하고 냄새를 맡아봐서 쉰 냄새가 과도하면 과발효 된 것이고, 과발효되면 굽고 난 후에 향이 별로다.
4. 원하는 모양으로 성형한다. 주의할 점은 반죽을 늘여서 찟지 않는 것이다. 반죽을 나눠야 한다면 커터 등으로 자르는 것이 좋다. 그리고 펀칭한다고 너무 꽉꽉 누르지 않는 것이 좋다. 손톱만한 커다란 공기 방울이 없어질 정도면 충분하다.
5. 성형한 상태 또는 빵틀에 넣은 상태로 10분에서 15분 그냥 놔둔다. (휴지) 만약 휴지 중에 반죽이 부풀어 오른다면 그대로 2차 발효로 볼 수 있다.
6. 발효가 잘 될 만한 온도(20도에서 25도 정도)에서 2차 발효한다. 30분 정도가 적당하고 성형한 상태로 어느 정도 부불어 올라야 한다.
7. 예열한 오븐에 180도로 15 ~ 18분 정도 굽는다. 예열할 땐 가장 높은 온도로 예열하는 것이 좋다. 굽는 시간은 크러스트 색을 봐가면서 결정한다. 오븐 안의 습도를 높이기 위해 젖은 물수건을 넣거나 그릇에 물을 담아 넣어 두는 것도 좋다.
8. 맛있게 드세요!

사진은 나중에..

/*
여기에 자신의 CSS를 추가할 수 있습니다.

도움 아이콘을 클릭하면 더 알아볼 수 있습니다.
*/

@import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);

h3 { font-family: “KoPub Batang”}

@import url(“http://fonts.googleapis.com/earlyaccess/nanumgothic.css” ) ;

.entry-content {font-family: “Nanum Gothic”}