윈도우 SAPUI5 개발 환경 구축을 위한 Tools – Node.js 및 npm, Yeoman 개념
SAPUI5를 활용해서 프론트엔드를 개발하고자 할 때, SAP 백엔드만 개발해왔다면 윈도우 SAPUI5 개발 환경 구축시 처음 보는 프로그램 들 그리고 매우 생소한 개념이 많을 것으로 생각됩니다.
Visual Studio Code 등으로 SAPUI5 개발을 위해서는 사전에 Node.js, CLI, npm, scaffolding 등의 개념을 알아두어야 하는데요,
UI5를 윈도우 10, Visual Studio 코드환경에서 개발하기 위해 사전 설치시에 알아두면 좋을 프로그램과, 해당 프로그램이 필요한 주요 개념을 설명해보도록 하겠습니다.
CLI 란 무엇인가 – 윈도우 SAPUI5 개발 환경은 커맨드 라인!
UI5는 윈도우 GUI 방식이 아닌, 콘솔에서 커맨드 라인 방식으로 실행을 하거나 스캐폴딩, 프로그램 설치 등을 진행합니다.
명령줄 인터페이스(CLI)는 Command-Line Interface의 약자로서, 윈도우로 대표되는 gui가 아닌, 도스, 명령 프롬프트, bash로 대표되는 유닉스 셸 환경 처럼 직접 커맨드를 입력하여 동작을 수행하는 방식을 말합니다.
일반 윈도우 사용자를 기준으로는 키보드 및 마우스보다 불편할 수 있지만, 개발자 및 시스템 관리자 등 충분히 훈련된 사람들에게는 압도적으로 적은 리소스 환경을 제공하며 더욱 더 빠른 작업 처리를 할 수 있습니다.
결국 UI5 CLI 도 윈도우화면에서 GUI 형태가 아닌, 커맨드 라인으로 처리할 수 있는 방식을 제공합니다. 처음에는 불편할 수 있지만 익숙해지면 키보드만으로 빠르게 UI5를 시작할 수 있습니다.
Node.js 및 npm(Node Package Manager)는 왜 필요한가
sapui5를 개발하고자 환경 구축시 오픈소스 패키지는 Node.js 패키지 매니저인 npm을 사용합니다. 그렇기 때문에 npm을 사용하기 위해서는 먼저 Node.js를 설치해야 합니다.
Node.js는 자바스크립트 문법을 활용하여 서버 구축이 가능한 언어입니다.(기본적으로 자바와 같은 백엔드 언어) 오픈 소스 JavaScript 엔진인 크롬 V8에 비동기 이벤트 처리 라이브러리인 libuv를 결합한 플랫폼인데, 자바 스크립트를 활용해서 브라우저 외부 환경에서 서버를 구축하는 등의 코드를 실행 가능하도록 하는 런타임 환경입니다.
I/O처리에 우수한 성능을 가지고 있고, 서버 확장이 용이하며, 특히 자바스크립트라는 프론트엔드 언어의 문법을 그대로 사용하여 백엔드 프로그래밍이 가능하다는 장점 때문에 Full stack 개발자 등에 큰 인기를 끌고 있습니다.
npm은 Node package manager의 약자인데, Node.js?개발자들이?패키지(모듈)의?설치?및?관리를 손쉽게 하기 위해 도와주는?매니저(관리 도구)입니다. 즉, 오픈 소스 형태로 올려 놓은 각종 편리한 패키지를 보관하고 있는 공간이며 cli를 통해 간편하게 설치할 수 있습니다.
최근들어 Node.js의 인기가 매우 높아짐에 따라 npm 역시 세계 최대 패키지 매니저로 크게 되었습니다.
이러한 패키지 매지는 타언어의 경우에도 존재하는데, 파이썬의 경우에는 pip, php 진영은 Composer, Ruby의 경우에는 RubyGems 등이 있습니다. 리눅스처럼 yum 이나 apt Mac OS의 경우 HomeBrew 등과 같은 개념으로 보시면 됩니다.
이런 패키지 매니저를 쓰면 다음과 같은 장점이 있습니다.
-
프로그램을 개발할 때 특정 기능을 본인이 직접 구현하지 안고 동일한 기능의 오픈소스 패키지를 바로 가져다 쓸 수 있습니다.
-
기본적으로 소스 코드를 패키지화하기 때문에 코드의 재사용성이 높아지고 유지보수 및 형상관리가 용이해집니다.
npm의 경우, Node.js를 설치할 때 자동으로 설치되므로 따로 신경쓸 필요는 없고 윈도우의 경우 시스템 path에 정상적으로 등록되어 있는지만 확인하면 됩니다.
Node.js 공식 홈페이지 : https://nodejs.org/ko/
환경구성 스캐폴딩을 위한 요먼(Yeoman) – 윈도우 SAPUI5 개발 환경 구축시 사용
웹개발시에는 필수 파일, 디렉토리 구조, 웹의존성, 유닛테스트, 배포환경 구성 등 해당 웹개발 언어에 맞도록 셋팅을 해야합니다.
그리고 각 프로젝트마다 공통적이고 매번 비슷한 환경을 구성하게 됩니다. 이러한 전체적인 틀을 개발 시작전 손쉽게 만들어주는 것을 스캐폴드(Scaffold)라고 합니다.
스캐폴딩의 의미는 전체적인 뼈대를 만든다는 의미인데, 웹 개발을 할 수 있도록 전체적인 구조의 뼈대 즉, 스캐폴딩 작업을 해주는 앱이 요먼(Yeoman)이며, 한마다로 웹 애플리케이션 개발을 위한 오픈 소스 클라이언트 스캐폴드(Scaffolding) 도구로 보시면 됩니다.
요먼 홈페이지 : https://yeoman.io/
이상으로 윈도우 환경에서 SAPUI5 개발 환경 구축을 위한, 커맨드 라인 입력을 위한 CLI, 각종 패키지 설정을 위한 Node.js/npm 의 의미, 그리고 웹개발을 위한 스캐폴딩 Tool로써 yeoman(요먼)을 알아보았습니다.