SAP UI5 개발환경 구성하기(Creating a Development Environment)

 

SAP UI5 개발 환경 설치해보자.

설치 필요 항목(List of required installations)

• Node.Js - javascript runtime & npm 사용을 위함
• VS Code(Visual Studio Code) Install -  소스 코드 편집기
• VS Code Extensions install
• UI5 CLI(Command Line Interface) - CMD 명령어를 통해서 UI5를 활용 가능
• SAP Fiori Tools Extension Pack - 기본 제공되는 Fiori 구성 요소 활용 가능 

Node.Js Install

Node.Js 사이트에서 설치 파일 다운로드 및 설치 수행하자.

(Download and install the installation file from the Node.Js site.) 

• Node.Js URL: https://nodejs.org

다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다.

(You just need to run the downloaded file and install it without changing the default value.)

 VS Code(Visual Studio Code) Install

Visual Studio Code 사이트에서 설치 파일 다운로드 및 설치 수행하자.

(Download and install the installation file from the VS Code site.) 

• Visual Studio Code URL:  https://code.visualstudio.com

다운로드 받은 파일을 실행해서 기본 값 변경 없이 그냥 설치하면 된다.

(You just need to run the downloaded file and install it without changing the default value.) 

 

UI5 CLI(Command Line Interface) Install

VS Code 실행 후 Terminal -> New Terminal 클릭하면 화면 하단에 Terminal Tab 생성하면 된다.

(You click Terminal -> New Terminal after running VS Code, you can create a Terminal Tab at the bottom of the screen.) 

Terminal tab에서 "npm install -global @ui5/cli" 명령어 실행하면 설치가 진행된다.

(The installation proceeds when you run the command "npm install - global @ui5/cli" in the Terminal tab.)

UI5 CLI 정상 설치 확인은 “ui5 –help” 명령어 실행하여 error 발생 안 하면 정상 설치 완료된 것이다.

(The UI5 CLI normal installation verification is completed if the error does not occur by executing the "ui5 –help" command.)

만약에 "ui5 -help" 명령어 실행하여 아래와 같이 PSSecurityException Error가 발생하면 windows에 실행 정책 변경을 통해 해결할 수 있다. 

(If the PSS SecurityException Error occurs by executing the "ui5-help" command, it can be resolved by changing the execution policy in Windows as shown below.)

PowerShell 을 관리자 모드로 실행한 후 “set-executionpolicy remotesigned” 명령어로 정책 변경 수행하면 된다.

(You can run PowerShell in administrator mode and change the policy to the "set-execution policy remoted" command.)

정상 변경 여부 확인은 “get-executionpolicy”로 확인 가능하다. 

(The normal change can be checked by "get-execution policy".)

 

 SAP Fiori Tools Extension Pack Install

VS Code의 Marketplace에서 SAP Fiori Tools – Extension Pack 을 찾아서 install 버튼을 눌러 설치하면 된다.

(Find SAP Fiori Tools – Extension Pack in Marketplace in VS Code and press the install button to install it.)

설치가 완료되면 SAP UI5 App 개발을 위한 환경 구성 완료이다.

(When the installation is completed, the environmental configuration for SAP UI5 App development is completed.)

다음 글부터 SAP UI5를 이해하기 위해 UI5의 Walkthrough를 따라하면서 내용을 정리할 예정이다.

(In order to understand SAP UI5 from the next article, I will follow UI5's Walkthrough and organize the contents.)

 SAP UI5 Walkthrough URL: 

https://ui5.sap.com/1.108.26/#/topic/3da5f4be63264db99f2e5b04c5e853db