electron 개발을 하면서 기본적으로 html과 JS 간의 상호작용이 필요할 때가 있다. 바로 이럴때 빈번하게 쓰이는 document.getElementById 와 addEventListener에 대해서 알아보자. html의 요소를 가져와서 사용하고 싶을 때 해당 요소를 가지고 오려면 document.getElementById를 사용하면 된다. 상황을 설정해서 만약 html에서 result라는 버튼이 있고, 그 버튼을 눌렀을때 "결과"이라는 글씨가 바뀌어야 한다고 하자. 결과 정답? // document.getElementById('id')를 이용해서 해당 html을 정의해주고 const result = document.getElementById('result'); const set = documen..

출처. https://www.youtube.com/watch?v=PuG2VW18O1E&t=5s 어떤 함수를 어려워하는 구독자 때문에 만드셨다고 한다. 마음씨가 정말 따뜻하시다. 나도 배워야겠다. // Don't give up // 함수 선언 function doSomething(add) { console.log(add); //함수를 이용해서 안에서 사용 가능 const result = add(2, 3); console.log(result); } function add(a, b) { const sum = a + b; return sum; } // 함수 호출 doSomething(add); //함수를 전달함. 함수 자체를 전달해버림 function add() {} // const result = add(1,..

출처. https://www.youtube.com/watch?v=aoQSOZfz3vQ 드디어 입문의 마지막이다. 동기와 비동기. 멀티스레딩이 아닌 곳에서 유용하게 쓰이는 만큼 어렵다. callback -> promise -> async, await으로 이어지는 전개가 좋았다. 'use strict'; const { reject } = require("async"); // async & await // clear style of using promise :) // 1. async // function fetchUser에 들어와서 10초 동안 처리를 기다리고 그 다음 일을 수행하게 된다. function fetchUser() { // do network request in 10 secs... return '..

출처. https://www.youtube.com/watch?v=JB_yU6Oe2eE&t=1053s JS꽃 동기와 비동기라니 C언어의 꽃 포인터가 생각나는 건 나뿐인가...? 어쨌든 어렵고 그만큼 강력하기에 꽃이라고 했겠지? 'use strict'; // Promise is a JavaScript object for asynchronous operation. // State: pending -> fulfilled or rejected // Producer vs Consumer // 1. Producer // when new Promise is created, the executor runs automatically. const promise = new Promise((resolve, reject) => ..

출처. https://www.electronjs.org/docs/latest/tutorial/dark-mode Dark Mode | Electron "Native interfaces" include the file picker, window border, dialogs, context menus, and more - anything where the UI comes from your operating system and not from your app. The default behavior is to opt into this automatic theming from the OS. www.electronjs.org 앞서 공부했던 mainProcess, rendererProcess와 ipc, 프로그램의 전체..

저번 시간에는 Main Process를 공부했다면, 이번 시간에는 Renderer Process에 관해서 공부해보겠다. Electron앱은 열려있는 윈도우에서 각각의 분리된 Renderer Process를 만들어낸다. 간단하게 설명하자면 HTML: Renderer Process의 진입 포인트, CSS: UI의 스타일링을 더해주는 것, : 실행가능한 자바스크립트 코드를 더해주는 것. 이 말의 뜻은 Renderer는 require라는 API 또는 Node.js의 API로의 직접적인 접근을 하지 않는다는 것이다. 렌더러에 NPM모듈을 직접 포함시키기 위해서는, 웹에서 사용하는 동일한 번들러 툴체인(webpack, parcel)을 사용해야만 한다. 웹은 무지성이기에 무슨 말인지 모르겠다. Renderer Pro..

출처. https://www.youtube.com/watch?v=s1vpVCrT8f4 callback 지옥이라서 호출 스택이 많이 쌓여서 지옥인가? 했는데 프로그래머에게 지옥의 의미는 유지, 보수, 수정이었다. error가 나는 부분이나, parameter를 가지고 와서 어디서 어떻게 쓰이는지 정말 보기 어려우니 지옥이였구나... 다음 편 promise를 어떻게 쓰는지가 중요할 것 같다. 'use strict'; // hoisting // Synchronous callback function printImmediately(print) { print(); } // Asynchronous callback function printWithDelay(print, timeout) { setTimeout(print..