VSCode에서 Electron의 메인 프로세스 디버그하기

F5로 눌러서 바로 디버깅을 실행하고, breakpoint를 찍어서 원하는 지점에서 멈춰놓고 스택 등을 살펴보는 작업은 Eclipse 같은 IDE를 통해 Java 등을 개발하던 사람들에게는 자연스러운 일이다. Electron 개발에서도 이런 작업 흐름을 자연스럽게 할 수 없을까 하여 조사를 좀 해보았다. 더 이상 console.log는 그만… ㅜㅜ  Continue reading “VSCode에서 Electron의 메인 프로세스 디버그하기”

electron-builder로 Electron 앱 간단 빌드하기

일전에 gulp를 이용하여 macOS용 Electron 앱을 빌드하는 방법을 글로 남긴바 있다. 그 방법은 Electron 홈페이지에 제시되어 있는, Electron 앱을 패키징 하는 가장 기본적인 방법을 gulp를 이용하여 자동화한 것이었다. 이번에는 electron-builder 라는 좋은 3rd party 도구를 이용하여 간단히 빌드하는 방법을 적어보았다. 본인도 아직 여러 옵션들을 조정해가며 사용하지는 않고, default 설정을 최대한 이용하는 수준에서 간단히 활용하고 있다. 그럼에도 멀티 플랫폼 지원, DMG 파일 제작, icon 자동 설정 등의 편리한 점이 많으니, Electron 앱을 제작한다면, 한번쯤 살펴볼만한 좋은 도구이다. Continue reading “electron-builder로 Electron 앱 간단 빌드하기”

02. MW Project 제작기: 요구사항과 아키텍처 문서화 이야기

MW Project는 혼자 개발하는 작은 취미생활 프로젝트이지만, 그럼에도 불구하고 코드가 1천줄 넘어가기 시작하면 문서가 필요하다. 나는 예전에 연구에 사용할 1천줄 내외의 작은 프로그램을 짤 때도, 박스 & 라인 3-4개 정도로 구성된 최상위 수준 아키텍처 다이어그램은 그려놓고 프로그래밍을 했었다. 아마도 다이어그램으로 끄적끄적 구조화하는 것을 좋아하는 개인적인 성향 탓도 있을 것이다. MW Project는 그보다는 훨씬 큰 프로그램이기 때문에, 이번에는 좀 본격적으로 문서화를 준비해보았다. Continue reading “02. MW Project 제작기: 요구사항과 아키텍처 문서화 이야기”

01. MW Project 제작기: 요구사항 분석

요구사항 온라인 문서 링크

프로그램 제작 동기

MW Project는 My Workshop Project의 약자로, 내가 개인적으로 취미활동처럼 개발하기 시작한 프로그램이다. 시작은 프리랜서인 아내의 일을 도와주기 위해 시작한 개발이었는데, 구체적으로 뭘 어떻게 도와주는 프로그램을 만들어야 하는지 목표가 없다보니 계속 표류하였다. 덕분에 이것저것 공부는 많이 했다. Node.js도 접하고, JavaScript도 이 MW Project를 위한다는 명목(?)하에 즐겁게 공부했다. DM4REVA도 원래는 Java로 개발하려 했었는데, MW Project를 위해 공부했던 내용을 써먹어보고 싶어서 JavaScript와 Electron으로 개발한 케이스다. Continue reading “01. MW Project 제작기: 요구사항 분석”

Gulp로 macOS 용 Electron 앱 빌드하기

본 글은 Electron 앱 소스코드들에서 자동으로 바로 실행 가능한 Electron 앱을 빌드해주는 Gulp 스크립트를 소개한다.

macOS용 Electron 앱을 빌드하기 위해서는 다음과 같은 과정이 필요하다. (참고)

  1. electron-prebuilt npm 모듈 내의 dist 폴더에 있는 Electron.app을 카피한다.
  2. Electron.app 내의 Contents/Resources/app 폴더 내에 package.json을 포함한 모든 JavaScript 소스코드를 복사한다.

Continue reading “Gulp로 macOS 용 Electron 앱 빌드하기”

TypeScript, Electron, Gulp 개발 환경 구축

새롭게 Electron 어플리케이션 개발을 해야할 것이 생겼다. (어느정도 진행이 되면, 이 또한 본 블로그에 공개하도록 하겠다.) 지난 번에 DM4REVA를 개발하면서, 아쉬웠던 부분은 바로 정적 타입 부분이었다. JavaScript 자체는 동적 타입 언어이지만, 어플리케이션이 좀 커지기 시작하니, 한창 개발 중인 나 조차도 변수, 함수의 인수 등의 타입이 햇갈리기 시작했다. 그 결과, 결국 한참 실행 중일 때 버그가 속출하는 일이 많아졌다. 그 당시에는, 이제와서 정적 타입 시스템을 가져오기도 일이고, DM4REVA는 개인적으로 그냥 연구에 가볍게 사용하는 도구에 불과해서 그냥 불편한대로 쓰며 나중에 개선하기로 마음을 먹었었다. 하지만 이제 새로운 어플리케이션 개발을 시작하는 입장이니, 이번에는 시작부터 정적 타입 시스템을 적용해보기로 했다. Continue reading “TypeScript, Electron, Gulp 개발 환경 구축”

JavaScript에서 Array 객체의 reduce 함수의 특징

reduce() 함수는 Array 객체의 prototype에 이미 정의되어 있는 메소드이다. reduce() 함수는 배열의 값들을 1개의 값으로 ’감소(reduce)’시키는 함수로, 가장 대표적인 사용예는 다음과 같다.

[1,2,3].reduce((previous, current) => previous + current)
// print 6 (= 1 + 2 + 3)

 

Continue reading “JavaScript에서 Array 객체의 reduce 함수의 특징”

12인치 맥북 사용 소감

사양

12인치 맥북 (2016) 기본형 (m3)

자금이 후달리는 관계로 CPU 업그레이드는 하지 못했다. 개인적인 생각으로는, m5 모델보다는 m3 모델에서 CPU만 m7으로 올리는 것이 가장 좋아보인다. 물론 256기가가 충분한 나같은 사람들에게만 해당하는 말이지만. (본인은 지금도 256기가 중 170기가가 ’남아’있다.) Continue reading “12인치 맥북 사용 소감”

자바스크립트 코드의 실행

자바스크립트는 실행 중에 많은 것이 결정되는 스크립트 언어다. 그렇기 때문에 자바스크립트의 코드가 어떻게 실행되는지 아는 것은 매우 중요하다. 자바스크립트는 ECMAScript 표준을 따르는 언어이기 때문에, ECMAScript에 묘사되어 있는 코드의 실행에 관련된 내용을 학습하면, 자바스크립트 코드가 실제로 어떻게 실행되는지 알 수 있다.

ECMAScript는 코드의 실행과 관련해서 Edition 3(이하 ES3)과 Edition 5(이하 ES5), 6(이하 ES6)의 내용이 많이 다르다. 사실 구체적으로 작동하는 원리는 크게 다르지 않지만 용어가 많이 다르기 때문에 표준을 읽을 때 혼동이 오기 쉽다. 대표적으로 ES3에서 활성 객체(Activation Object)는 ES5, 6에서는 실행 문맥(Execution Context)[1]VariableEnvironment 컴포넌트와 매우 유사하다. 이러한 변화는 내부 함수와 클로져 개념을 구현하고, 함수형 프로그래밍 언어를 지원하기 위함으로, Environment frames model 이라고 칭하고 있다[2]. Continue reading “자바스크립트 코드의 실행”