Pragmatic Programmer

자바스크립트로 데스크톱 어플리케이션을 만들어 보자!

아래는 electron에서 제공하는 quick start를 실행한 화면이다. 다음 스텝으로 실행할 수 있다.

(node와 git이 설치 되어 있어야 한다. )

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

[그림] electron quick start 실행 화면

 위와 같이 데스크톱 화면에서 실행 화면을 확인 할 수 있다.

 아래는 Electron api demos를 받아 실행해 보자.

$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ npm install
$ npm start

[그림2] electron api demos 실행 화면

 Electron으로 개발된 애플리케이션에 대해서 더 자세한 정보를 알고 싶다면 "https://github.com/sindresorhus/awesome-electron" 에서 확인해 보자

Database-as-a-Service for MongoDB

AWS, Azure, Google 에서 사용할 수 있는 몽고 DB SAAS 서비스다. 가입을 하면 무료로 500MB를 사용할 수 있다. 몽고를 배우는 분이나 테스트를 하기 위해서 사용해 보는 것도 나쁘지 않을거 같다.

디자이너 여기 다 있음

아래 배너를 보고 들어가 보게 된 사이트다.

디자인을 의뢰할 때 이곳을 이용하면 좋을거 같다.

WPF에서 리소스 사용 방법

 WPF에서 resource에 포함된 이미지를 xaml이 아닌 코드에서 참조하는 방법을 알아 보도록 하겠다.

Image image = new Image(); image.Source = new BitmapImage( new Uri("pack://application:,,,/Memo.Core;component/Images/icon.png", UriKind.RelativeOrAbsolute)); colorMenuItem.Icon = image;

[코드1] 리소스에서 이미지 가져오기

[그림1] build action

Babel - Use next generation JavaScript, today

(javascript compiler)

 현재 최신의 브라우저에서 지원되지 않는 ECMAScript 6 문법으로 작성된 자바스크립트를 변환, 컴파일하여 브라우저가 인식할 수 있는 스크립트를 만들어 주는 라이브러리다.

[ 그림 1 ] Babel 변환 예

webpack - module bundler

 자바스크립트의 모듈을 묶어주는 node기반 툴이다.

ASP.NET 5 & MVC 6 관련 링크

 ASP.NET 5와 MVC 6 에서는 .Net Core를 이용하여 통합하였다. 이전까지는 필터나 어트리뷰트를 각자 만들어서 사용하는 불편함이 있었지만 이번 통합으로 인해 한번의 개발로 같이 사용할 수 있도록 되었다. 그 밑바탕에는 .Net Core를 사용하였으며 이로인해 IIS와는 별개로 자연스레 크로스플랫폼(Windows, Linux, OSX)에서 서비스를 할 수 있는 길이 열렸다.

Visual Studio Tools for Apache Cordova 개발 관련 링크

Visual studio - ripple 사용시 에러

 Visual Studio에서 크로스 플랫폼으로 앱을 개발할 수 있는 방법중에 Apache Cordova를 이용하여 iOS, Andriod, Windows Phone용 앱을 개발 할 수 있다. Visual studio에서 TypeScript를 선택하고 "Blank App (Apache Cordova)를 선택하여 프로젝트를 만들 수 있다.

[그림1] Blank app를 선택한 화면

 아래 그림과 같이 프로젝트가 생성을 하였다.

[그림2] 새로 만든 프로젝트

 이 상태에서 Ctrl + F5를 눌러 실행을 시켜 보면 아래와 같은 에러가 발생이 되면서 중단이 되어 확인할 수 없게 되어 있다.

에러 해결을 위해서는 레지스트리를 아래 그림과 같이 변경해줘야 한다.

HKEY_LOCAL_MACHINE\SOFTWARE\StartMenuInternet\Google Chrome의 키 값을 "Chrome"에서 "Google Chrome"로 변경"

[그림3] 레지스트리 변경

 위와 같이 모두 준비가 되었다면 아래와 같은 화면을 확인할 수 있을것이다.

[그림4] 실행화면

 이제 Apache Cordova를 통해 하이브리드 앱을 개발할 수 있는 환경이 갖춰진 것이다.