webOS(3): web application과 CLI 설치

 

1. web application

2. CLI 설치

---

1. web application

 

이번 webOS 프로젝트를 해가면서 web application을 제작해가는 과정을 다룰 예정인데, webOS 커뮤니티를 참고하면 web application이 다시 built-in, external의 두 카테고리로 나뉘는 것을 볼 수 있습니다. 본격적으로 시작하기 전에 web application에 대해 간단하게 알아보도록 하겠습니다.

 

web application은 간단히 말하면 웹 브라우저에서 인터넷을 통해 접속하여 사용할 수 있는 응용 프로그램입니다. 일반적인 웹페이지와 혼동될 수 있고 실제로도 명확한 경계는 불분명하지만, 정보 제공이 주목적인 웹사이트보다 사용자에게 서비스를 제공하고자 하는 목적이 더 크다고 볼 수 있겠습니다. 

 

일반적으로 web application의 구성 요소는 4가지로 정의합니다.

 

1. 웹 브라우저 - user와 상호작용하는 key component, client-side / frontend component)

: 웹 브라우저를 통해 사용자의 HTTP 요청이 웹 서버로 전달되고, 이에 따른 웹 서버의 결과를 보여줍니다.

: chrome, firefox 등이 이에 속합니다.

 

2. 웹 서버 - server-side component / backend component

: 웹 브라우저의 요청에 따른 결과를 웹 브라우저로 전달합니다.

: HTTP를 기반으로 HTML, css, Javascript, 이미지와 같은 static content를 제공합니다.

: 사용자 요청을 web application를 전달합니다.

: Apache, Nginx, IIS 등이 이에 속합니다.

 

3. 웹 애플리케이션 서버 - web container / servlet container

: user 요청에 따라 JSP, ASP, PHP 등 dynamic content를 만드는 business logic을 수행합니다.

: DB에 접속하여 동적 데이터를 처리합니다.

: Tomcat, JBoss, Jeus, WebSphere 등이 이에 속합니다.

 

4. 데이터베이스

: 데이터를 저장하고 있는 서버입니다.

 

이미지 출처: https://2dubbing.tistory.com/29

 

webOS에서 이는 다시 External Web App과 Built-in Web App으로 구분됩니다.

 

External Web App

: web app이 webOS target device에 설치됩니다. 서드파티 개발자가 webOS에서 동작하는 web app을 만들 수 있도록 합니다. OSE SDK에 의해 제공되는 CLI가 사용됩니다.

: Create - Implement - Configure - Package - Install - Launch의 여섯 단계로 구성됩니다.

 

Built-in Web App

: web app이 webOS 이미지에 빌드됩니다. 플랫폼 개발자가 플랫폼의 기능을 향상시킬 수 있도록 합니다. 빌드될 때 webOS OSE에 패키징됩니다.

: Implement - Configure - Build - Run and Verify - Deploy의 다섯 단계로 구성됩니다.

 

---

 

2. CLI 설치

 

webOS OSE에서 web app을 개발하기 위해서는 CLI(Command-Line Interface)의 설치가 필요합니다. 이는 app을 만들고 패키징하고 설치하는데 필요한 환경을 제공합니다. 별도의 IDE 없이도 app이나 service를 개발할 수 있도록 해줍니다.

 

CLI가 제공하는 기능은 구체적으로 다음과 같습니다.

 

- app과 service 만들기

- app과 service 패키징

- target device 관리

- app과 service 설치

- debugging

- target device 정보 제공

 

더욱 자세한 설명은 webOS 커뮤니티에서 찾아보실 수 있습니다. 

 

 

본격적으로 CLI 설치를 시작해봅시다.

요구되는 운영체제는 다음과 같습니다.

 

- Linux Ubuntu 18.04 LTS 64-bit

- macOS:  Mac OS X10.13 High Sierra or higer

- Windows: Windows 10 64-bit

 

시작하기 전 다음과 같은 소프트웨어 툴이 필요합니다.

• Node.js(v10.24.1 to v14.15.1)
• npm

* Node.js는 JavaScript application을 실행하기 위한 runtime입니다. 웹 브라우저 위에서 동작하는 스크립트 언어인 JavaScript를 일반적인 terminal에서 실행할 수 있도록 해줍니다. 즉 웹 브라우저와 무관한 JavaScript 프로그램을 실행하도록 하는 브라우저와 독립적 런타임입니다.

* npm(Node Package Manager)은 node.js기반의 패키지를 모아둔 모듈입니다.

 

 

node.js 홈페이지에서 설치해주시면 됩니다.

https://nodejs.org/ko/

Node.js

 

 

 

정상적으로 설치되어 있다면 다음과 같이 버전 정보를 확인할 수 있습니다.

제 경우에는 node.js의 버전이 너무 높아 버전을 변경하기 위해 node.js 관리 도구를 별도로 설치해 주었습니다.

 

https://github.com/coreybutler/nvm-windows/

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

nvm을 설치한 후 이하의 명령어를 입력하면 됩니다.

 

nvm list available	# all version available
nvm install 버전	# version to install
nvm list		# current installed version list
nvm use 사용할_버전	# version to use

 

nvm

nvm use 명령어 사용 시 exit 오류가 발생했다면 관리자 권한으로 shell을 실행하면 됩니다.

이후 CLI를 설치합니다.

$ npm install -g @webosose/ares-cli

# Check the installation.
$ ares --version
Version: 2.x.x

 

아래와 같이 보안 오류가 발생할 수 있습니다.

 

이를 해결하기 위해서 실행 규칙을 변경하여 주었습니다.

ExecutionPolicy

 

아래와 같이 출력된다면 성공입니다.

 

ares --version

 

---

이번 포스팅에서는 web application과 CLI 설치하는 과정을 정리해보았습니다. sample app을 만드는 과정까지 담으려 했으나 현재 가지고 있는 raspberrypi4에 이상이 생겨 진행에 어려움이 있습니다. 문제가 해결되는 대로 CLI 사용과 sample app 제작, 실행까지 업로드하도록 하겠습니다.

 

 

---

 

이번 포스팅을 작성하는 과정에서 많은 포스팅을 참조하며 배웠습니다. 위의 적은 내용은 아래의 reference로부터 중요하다 생각되는 부분만 최대한 간결하게 정리하였습니다. 특히 webOS 관련 기술적 사항은 공식 커뮤니티에서 더 자세하게 확인할 수 있습니다. 위의 내용 또한 진행하면서 깊게 알아야 할 필요를 느끼면 더 자세히 정리할 예정입니다. 자세한 내용은 아래의 포스팅을 참고하면 되겠습니다.

 

 

- https://www.webosose.org/

webOS Open Source Edition

- https://webos-supporters.tistory.com/

- https://back-end-developer.tistory.com/81

- https://sphere-sryn.tistory.com/entry/Web-Server%EC%99%80-WASWeb-Application-Server%EC%9D%98-%EC%B0%A8%EC%9D%B4-feat-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4

- https://goldsony.tistory.com/37

- https://gyoogle.dev/blog/web-knowledge/Web%20Server%EC%99%80%20WAS%EC%9D%98%20%EC%B0%A8%EC%9D%B4.html

- https://velog.io/@gillog/Web-Server%EC%99%80-Web-Application-Server%EC%9D%98-%EC%B0%A8%EC%9D%B4

- https://reinvite.tistory.com/84

- https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/