UI5 앱을 개발에 필요한 SAPUI5 SDK 설치를 VS Code 에서 셋팅하여 개발환경을 구축하는 방법을 정리해 보았습니다.
기본적으로 Node.js, npm, Yeoman, Scaffolding generator, VS Code 등으로 개발환경을 구성합니다.
지난 포스팅(SAPUI5 Visual Studio Code 개발환경 셋팅(2022, 윈도우 10)) 내용만으로도 충분히 SAPUI5 개발 환경 구축이 가능합니다만, 개발환경 구축에 필요한 좀 더 핵심적인 내용으로 추렸고, 개발에 도움이 되는 툴 내용들을 보완하여 다시 정리해 보았습니다.
SAPUI5 앱을 개발하기 위해서는 VS Code, 이클립스, Web IDE, SAP BTP의 Business Application Studio 등 다양한 방법으로 환경을 구축하여 만들 수 있습니다.
최근에는 Business Application Studio 혹은 VS Code를 활용한 프로젝트 환경 구축이 대세인 듯하며, 이를 통해 많은 프로젝트에서 활용하고 있는 듯 합니다.
기본적으로 아래의 SAPUI5 SDK 개발 환경 설치 방법은 Node.js 기반 npm 을 활용하여 VS Code 로컬 개발 환경을 구성합니다.
SAP BTP Business Application Studio(이하 BAS) 에서도 유효한 방법이고, 특히 BAS의 경우 Node.js/npm 및 UI5 Tooling 등등 상당부분 이미 설치가 된 상태로 활성화되므로, BAS에서의 개발 환경 이해하는 데에도 도움이 되는 내용이 될 것입니다.
Node.js + npm 설치 – SAPUI5 SDK 설치 도구
가장 먼저 설치해야할 사항은 Node.js 모듈 입니다.
위에서 언급한바와 같이, Node.js를 통해 로컬 서버 환경을 구성하기도 하고, npm 패키지를 통해 필요한 디펜던시 모듈을 활용하여 개발 환경에 사용합니다.
SAPUI5 개발환경을 구축하기 위해서는 Node.js 버전 10 이상이 필수이나 그냥 고민말고 홈페이지로 이동해서 지금 최신 버전을 설치해 주면 됩니다.
Node.js 홈페이지 : https://nodejs.org/ko/
본인의 운영체제에 맞는 Node.js 모듈을 다운로드 받은 후 설치를 진행합니다.
정상적으로 설치가 완료되면 윈도우 터미널 혹은 cmd 를 통해 버전이 정상적으로 나옴을 확인해 볼 수 있습니다.
Node.js 의 버전은 아래의 커맨드로 확인할 수 있습니다.
node -vnpm 의 정상 설치 여부는 아래의 커맨드로 확인할 수 있습니다.
npm -v
UI5 Tooling – SAPUI5 SDK 도구 배포 환경, CLI 지원
VS Code를 통해서 SAPUI5를 개발하기 위해서는 가장 필수적으로 고려해야 하는 사항은 UI5 Tooling 입니다.
UI5 Tooling이란, UI5 프레임워크 앱 개발을 위한 툴들의 집합체 모듈로 볼 수 있습니다. 즉, 로컬 환경에서 UI5 앱을 개발하기 위한 다양한 툴 셋을 모아둔 툴체인(Tool Chain: 개발도구 모음)입니다.
UI5 Tooling 은 로깅 기능(ui5-logger), 로컬 서버로서의 역할, 프로젝트 디펜던시 관리, 앱 개발/관리를 위한 커맨드 라인 사용자 인터페이스 기능 등을 담고 있습니다.
Node.js와 npm이 정상적으로 설치가 되면 UI5 Tooling은 윈도우 터미널 혹은 cmd 를 통해 다음과 같이 간단히 설치할 수 있습니다.
npm install --global @ui5/cli
만약 윈도우 터미널을 통해 처음 npm 모듈을 설치해 실행한 상태라면 “보안 오류”(Powershell Execution Policy)로 인해 실행이 되지 않을 수 있습니다.
윈도우 터미널의 권한의 문제로, 윈도우 터미널을 관리자 모드로 다시 실행한 후, 아래의 글을 참조하여 권한을 조정하면 됩니다.
VS Code 터미널 역시 윈도우에서 실행되는 구조이므로 윈도우 터미널에서 아래의 글을 참조하여 권한을 조정하면 됩니다.
SAPUI5 스캐폴딩 설치 오류 – VS Code Powershell ExcutionPolicy
요먼(Yeoman) 설치 – SAPUI5 개발환경 Generator
프레임워크와 라이브러리를 조합하여 프로젝트 뼈대 코드를 만드는 작업을 스캐폴딩이라고 합니다.
스캐폴딩 작업은 소스 편집기를 통해 하나 하나 프로젝트에 필요한 사항을 수동으로 할 수 있으나 매우 효율이 떨어짐으로, 자주 쓰는 구조나 파일을 템플릿 형태로 구조화해두고 SAPUI5 SDK 환경이 필요시 가져다 쓰는 것이 효과적입니다.
이러한 스캐폴딩 작업을 자동으로 구성해주는 툴이 Yeoman이며, 프로젝트에 필요한 디렉토리 및 파일을 만들어주는 커맨드라인 인터페이스입니다.
Yeoman : https://www.npmjs.com/package/yo
우리는 Yeoman에 등록된 SAPUI5 관련 Generator를 통해 프로젝트를 생성합니다.
터미널에서 다음과 같이 Yeoman 을 설치합니다.
npm install --global yo
fiori 앱(UI5) 개발을 위한 Yeoman generator 설치
Yeoman generator 에는 SAPUI5 앱 스캐폴딩을 할 수 있는 몇가지 툴 들이 등록이 되어 있으며 각각 장단점을 갖고 있습니다. 그 중에서 주로 많이 사용하는 2가지 Generator를 설치해 보도록 하겠습니다.
@sap/generator-fiori
The SAP Fiori application generator는 SAP에서 공식적으로 지원하는 제너레이터로써, SAP Fiori 엘리먼트 앱과 프리스타일의 일반 UI5 앱에 대한 구조를 생성해 줍니다.
아래와 같이 npm으로부터 설치한 후 Yeoman을 통해 스캐폴딩 하는 방식입니다.
npm install -g @sap/generator-fiorigenerator-easy-ui5
다음으로는 Easy UI5 Generator입니다.
SAPUI5 앱을 개발하는데 좀 더 초점을 맞추어 배포된 제너레이터로써, SAPUI5 개발에 필요한 베스트 프랙티스가 함께 구조화되어 있습니다.
UI5 Tooling을 공식 지원하며 SAP BTP 등과 같은 다양한 Development tagets 구성을 지원합니다.
아래와 같이 설치를 진행하면 Yeoman을 통해서 쉽게 만들 수 있습니다.
npm install -g yo generator-easy-ui5설치를 정상적으로 완료한 후 아래와 같이 Yeoman을 실행하면 다음과 같이 스캐폴딩을 선택할 수 있습니다.
yo
SAPUI5 앱 스캐폴딩 하기
임시로 테스트할 폴더를 만들고 해당 폴더로 이동하여 Yeoman을 통한 스캐폴딩이 잘 되는지 확인해 보겠습니다.
Yeoman을 실행한 후 @sap/fiori Generator를 선택하여 앱을 만들어 봅니다.
yo
아래와 같이 같이 입력을 한 후 앱을 생성하면 현재 폴더 하위-Module Name 명으로 프로젝트 앱이 위치하게 됩니다.
해당 위치로 이동하여 파일 리스트를 확인해 보면 다음과 같이 개발 환경이 자동으로 설정되었음을 확인할 수 있습니다.
cd [생성한 프로젝트 폴더]
lsUI5 프레임워크에 기반한 폴더 및 파일 구조가 담긴 webapp, 실행 환경 및 배포 등에 필요한 package.json 및 각종 yaml 파일 등등이 자동으로 생성 됩니다.
터미널에서 정상적으로 로컬 환경이 마련되었는지 앞서 설치한 UI5 Tooling을 통해 테스트 해보도록 하겠습니다.
package.json이 위치한 프로젝트 폴더에서 앱을 실행합니다.
ui5 serve -o index.html
혹은
npm start
그러면 로컬 서버 모듈이 실행이 되며 기본 웹브라우저를 통해 UI5 앱이 실행됨을 확인할 수 있습니다.
여태까지 코드 한줄 입력하지 않았지만, 기본 뼈대 앱이 실행되었습니다. 이제 본격적으로 앱을 개발할 수 있도록 VS Code를 설치하고 UI5 앱 개발에 유용한 익스텐션 등을 알아보도록 하겠습니다.
VS Code 설치 및 Fiori Tools 설치하기
VS Code는 공식 홈페이지를 통해서 설치할 수 있습니다.
공식 홈페이지 : https://code.visualstudio.com/
VS Code 를 설치한 후 아까 만들어둔 프로젝트 폴더를 Open 합니다.
그러면 Yeoman을 통해 스캐폴딩한 UI5 폴더 구조 및 파일 등을 확인할 수 있습니다.
VS Code에서도 터미널을 통해 각종 작업을 처리할 수 있으므로, 메뉴 >> 터미널을 통해 터미널을 연 후 동일하게 UI5 CLI에서 제공하는 명령어를 입력하면 아래와 같이 똑같이 브라우저를 통해 앱이 실행됨을 확인할 수 있습니다.
ui5 serve -o index.html
혹은
npm start
이렇게 실행될 수 있는 로컬 개발 환경은 Yeoman Generator로 만든 스캐폴딩 시에 세팅이 됩니다.
프로젝트 폴더에서 Package.json을 확인하면 다음과 같이 ui5 cli 및 ui5 tooling 등 SAPUI5 SDK 환경이 이미 설정되어 있음을 확인할 수 있습니다.
"dependencies": {},
"devDependencies": {
"@ui5/cli": "^2.14.1",
"@sap/ux-ui5-tooling": "1"
},앞서 본것과 같이, 기본적으로 VS Code 혹은 윈도우 터미널 명령어를 통해 개발과 관련된 처리를 진행하나, VS Code의 다양한 익스텐션을 통해 개발을 더 효율적으로 진행할 수 있습니다.
VS Code에 SAP Fiori Tools – Extension Pack 설치하기
SAP Fiori Tools – Extension Pack 은 SAPUI5를 VS Code에서 개발할 때 좀 더 편리하게 해주는 다양한 도구를 포함하고 있는 SAP 공식 익스텐션 세트입니다.
익스텐션 탭에서 FIORI로 검색한 후 SAP Fiori Tools – Extension Pack를 설치하면 됩니다.
해당 Pack에는 XML Toolkit, Application Wizard, SAP Fiori Tools – XML Annotation Language Server 등 다양한 툴 및 기능을 제공하고 있습니다.
SAPUI5 앱을 생성할 때 터미널 명령어가 아닌 아래와 같이 Visual 하게 마우스버튼으로 생성을 할 수도 있으며
VS Code의 메뉴 등을 통해 앱을 실행/테스트 할 수 있는 편리한 기능들을 제공하고 있습니다.
이상으로 SAPUI5 개발을 위한 SDK 을 활용해서 VS Code에서의 환경 세팅에 대해 알아보았습니다.
핵심적인 부분을 정리하였으며 VS Code를 통해 개발을 하고자 할 때 좀 더 자세한 사항은 아래의 내용을 추가로 참고해 보시기 바랍니다.
윈도우 SAPUI5 개발 환경 구축을 위한 Tools – Node.js 및 npm, Yeoman 개념
SAPUI5 스캐폴딩(Scaffolding) – Visual Studio Code Tools 설치하기