크로스 플랫폼 PC 어플개발1

urobotics (62)in #kr • 5 years ago (edited)

안녕하세요. @u robotics 입니다. ^^
오늘은 크로스플랫폼 데스크톱 어플리케이션 개발.
즉, PC 어플 개발을 해보겠습니다.

크로스플랫폼이라는 트렌드가 참 재미있어요.
일렉트론과 NW.js로 개발하는 건데요.

한 번 소개해보고 싶어서 글을 씁니다.

웹개발은 HTML, CSS, Javascript로 하잖아요.
마찬가지로 데스크톱. 즉, PC에서도
자바스크립트로 개발한다면 운영체제랑 상관없이 개발가능하겠네.
라는 컨셉으로 시작한 것이 크로스플랫폼 개발입니다.

windows에서 개발한 것이 맥? 에서 돌아가고
맥?에서 개발한 것이 windows에서 돌아가고
리눅스에서도 돌아가고
뭐 그런 개념입니다.

일렉트론과 NW.js로 개발합니다.

자, 시작해보겠습니다.

NW.js를 간단히 소개하자면
HTML/CSS/Javascript를 이용해서 데스크톱 어플을 개발할 수 있게 해주는 프레임워크 입니다. 2011년 11월에 중국의 인텔 오픈소스 기술센터에서 일하던 Roger Wang이라는 사람이 개발했습니다. 접근방법은 Node.js와 웹키트를 직접 결합해서 데스크톱 어플을 만드는 것이었습니다. 결과적으로 로저 왕은 Node.js와 Chromium을 결합했습니다. NW.js는 HTML/CSS/Javascript 실행환경 뿐 아니라 Node.js 환경을 함께 실행해서 Javascript로 Node.js API까지 사용할 수 있게 했습니다. 따라서 javascript를 사용해 화면의 크기, 툴바, 메뉴 등의 UI를 조작할 수 있는 것은 물론이고 로컬 파일에 접근해서 파일을 읽고 쓸 수 있습니다.

가장 간단한 어플인 Hello World 어플을 NW.js로 만들어봅시다.

1. NW.js로 Hello World 어플 만들기
(1) node js를 설치해주세요.
https://nodejs.org/ko/
안정 버전이나, 현재버전이나
둘 중 아무거나 선택해서 클릭하시면 설치됩니다.
별 차이 없습니다.

(2) NW.js 설치하기
npm을 사용해서 설치를 하겠습니다.
명령 프롬프트를 열어서
npm install -g nw*
명령어를 입력해주세요.

그리면 NW.js가 설치됩니다.
이렇게 설치하시기 힘들면, 사이트에서 설치하세요.
https://nwjs.io/downloads/

(1) nodeJS설치
(2)NWjs 설치
했으면, 이제 프로그래밍 준비가 되었어요.

NW.js 로 Hello World 출력해봅시다.
여러분이 작업할 폴더를 하나 만들어주세요.
C:에 nwjs 폴더를 만들었어요.
폴더 주소는 이렇게 되겠죠.
C:\nwjs

자, 그러면 프로젝트 이름을 만들어줍니다.
저는 hello 라고 폴더 이름을 만들었습니다.

C:\nwjs\hello
현재 이렇게 돼있죠.

이제 코딩 해보겠습니다.
hello 폴더 안에
package.json 파일 그리고
index.html 파일을 만들어줍니다.

코딩
(1) package.json 파일 편집
{
"name" : "hello",
"main" : "index.html",
"version" : "1.0.0"
}

그리고 저장합니다.

(2)index.html 파일 편집