예전엔 사용하지 않을 기술엔 관심도 두지 않았다. 그런데 오랜시간이 지난 뒤에 그 기술을 사용해야 할 때가 왔을때 너무 아무것도 몰라서 당황한 적이 한두번이 아니다. react를 처음 시작했을때 그랬고 node.js를 시작했을때 그랬다. react 이후로 나는 갈림길에 섰을때 적어도 뭔지는 모두 알아보고 선택하기로 했다. 이번에 알아볼 것은 TypeScript다. TypeScript는 Angular때문에 처음 알았다. 물론 구 Angular는 아니고 새로운 Angular다. (벌써 v4 나왔더라. v3은 건더뛴 듯) 사실 Angular를 알아보려고 했는데 TypeScript를 모르는채로 Angular를 알아보면 안될 것 같아 방향을 틀었다. TypeScript는 MS가 만든거라 그런지 굉장히 문서화도 잘..

그동안 React를 사용하다보니 새로운 프레임워크에 눈을 잘 못 돌렸는데 -아니 돌릴 필요가 없었는데- 요즘 Vue.js라는 것이 핫하다는 것을 들었다. 궁금해서 문서를 조금 보긴 했지만 구 angularjs와 비슷하다는 느낌만 받았을 뿐 특징같은 건 파악하지 못했다. 주말동안 혼자있는 시간이 많이 생겨서 이 기회에 Vue.js에 대해서 알아보기로 했다. comment-sample 이전에 angularjs와 handlebar로 댓글 sample code를 만들었는데 지금도 그런 방식으로 react와 vuejs를 비교해서 댓글 sample code를 만들기로 했다. (사실 react로도 이미 만들었지만 그 코드는 react를 잘 모를때 만들어서 너무 보기가 어려워 다시 만들기로 했다.) 만들려고 하는 샘플..

간단한 형태로라도 앱이 만들어졌으니 패키징하고 배포를 해보도록 한다. Electron을 패키지하는 방법은 소스코드를 asar로 압축해서 electron, node와 함께 실행파일로 묶으면 된다. 사실 개발하면서 electron .로 앱실행하는 거랑 별반 다를 것이 없다. 그럼 그냥 zip으로 압축해서 배포하면 되는거 아닌가 싶지만... 그렇게 하면 다운로드 받아서 실행하기 불편하기도 하고 모양새도 좋지 않다. 공식문서에 이에 대한 설명이 잘 나와있다. 이렇게 이걸 얼렁뚱땅 넘어가는 이유는 이 방법은 너무 복잡하고 어렵기 때문이다. 역시나 잘 만들어진 툴을 통해서 쉽게 해결하자. electron-builder 대표적인 패키지 라이브러리는 electron-packager와 electron-builder가 있..

Browser도 만들었고 OAuth 연결도 했으니 이제 UI를 만들어본다. UI는 당연하게도 html/css로 다 만들면된다. 물론 canvas로 그려도 되고 web-gl로도 그려도 된다. 중요한 것은 electron에서 사용하는 Chromium버전에만 동작하면 되니 다른 브라우저 신경쓰지 않고 맘껏 만들 수 있다는 점이다. 그동안 잉여력으로 테스트해온 Chromium의 극단을 끄집어낼 기회다. Electron으로 앱을 만들면서 가장 좋았던 점이 이 점이었다. polyfill도 필요없고 변환작업없이 ES6를 사용할 수도 있다. React 여러 UI 라이브러리 중에서 React를 선택했다. 이전에 사용해봐서 익숙하기도 하고 사용자가 많아서 귀찮은 작업을 대신해 줄 외부 라이브러리도 많다. 초반에 webpa..

Electron 시작하기 두번째에서 이야기할 것은 BrowserWindow를 사용한 OAuth 인증, main/renderer 프로세스 서로 간의 통신, 설정값 저장이다. 이 과정을 지나면 앱은 OAuth 인증이 된 상태로 유지될 것이다. OAuth 2.0 먼저 이 예제는 다음블로그의 API를 사용할 것이기 때문에 OAuth 2.0으로 인증을 해야한다. dna 사이트에서 잘 설명하고 있지만 다시 OAuth 2.0과정을 살펴보자면 다음과 같다. 사용자가 앱에서 인증을 시도한다. 앱은 발급받은 CLIENT ID를 비롯한 필요한 정보와 함께 사용자 인증 URL을 브라우저에서 연다. 사용자가 앱 사용 승인을 한다. 이때 authorization_code이 앱에 전달된다. 앱은 authorization_code로..