0. SAP UI5 Walkthrough 시작 - New Project create & Hello World
SAP UI5 공부를 시작하며
SAP UI5 Site에서 제공하는 Tutorial을 공부하며 이해한 내용을 해석해서 글을 작성했다. 이제부터 시작해보자.
(While studying the tutorial provided by SAP UI5 Site, I interpreted what I understood and wrote. Let's start now.)
Hello World 만들기(Create Hello World)
실행 순서(Order of execution):
- 새 프로젝트 생성 - 폴더 구조 만들기.
(Create a new project - Create a folder structure) - 프로젝트 기본 File 생성 및 Setting 값 작성.
(Create Project Default File and Create Setting Values) - index.html 파일 생성 및 Hello World 코딩.
(Create index.html file and code Hello World) - UI5 서버 실행.
(Run UI5 Server)
1. 새 프로젝트 생성 - 폴더 구조 만들기.(Create a new project and a foler structure)
- Project 소스 파일을 관리할 webapp 폴더 생성 한다.
(Cerate a webapp folder to manage project source files) - 폴더 구조(Folder structure): ../UI5_TUTORIAL/webapp/...
- VS Code에서 Open Folder 클릭 -> project 폴더 선택 한다.
(Click Open Folder in VS Code -> Click Project Folder(UI5_TUTORIAL)
2. 프로젝트 기본 File 생성 및 Setting 값 코딩.(Create Project Default File and Create Setting Values)
- 새로운 Terminal Tab 생성한다.
(Create a new Terminal Tab)
- Terminal에서 "npm init --yes" 명령어 실행한다.
(Run the command "npm init --yes" in Terminal)
- 실행이 완료되면 package.json 파일 자동으로 생성된다.
(When the "npm init --yes" command is exevuted, the "package.json" file is automatically generated. - package.json 파일은 ui5 서버 실행 script, proxy 서버 구성 등의 setting 값을 관리한다.
(The "package.json" file manages setting values such as ui5 server execution script, proxy server configration and etc.)
- Terminal 에서 "ui5 init" 명령어 실행한다.
(Run the command "ui5 init" in Terminal)
- "ui5 init" 명령어 완료되면 "ui5.yaml" 파일이 자동으로 생성된다.
("ui5.yaml" file automatically generated when "ui5 init" command is completed.) - "ui5.yaml" 파일은 project에 필요한 정보(middleware 정보 등) 관리를 수행한다.
(The "ui5.yaml" file performs information(middleware and etc) management necessary for the project.)
- manifest.json 파일을 webapp 폴더 하위에 생성한다.
(Create the "manifest.json" file under the webapp folder) - manifest.json 파일 내용("manifest.json" file content):
{
"_version": "1.12.0",
"sap.app": {
"id": "ui5_tutorial"
}
}
--------------------------------------------------------------------------
- Terminal에서 "ui5 use openui5@latest" 명령어 실행한다.
(Run the command "ui5 use openui5@latest" in Terminal) - 특정 Version의 UI5 필요 시 명령어를 "ui5 use openui5@희망하는 버전" 으로 변경하여 실행한다.
(If UI5 of a particular version is required, change the command to "ui5 use openui5@desired version" and execute it.)
3. index.html 파일 생성 및 Hello World 코딩(Create index.html file and code Hello World)
- webapp 폴더에서 new file 아이콘 클릭 -> index.html 파일 생성한다.
(Click the new file icon in the webapp folder -> "index.html" file.) - index.html 파일에 아래 내용 추가 후 저장한다.
(Add the following to the "index.html" file and save it.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI% Tutorial</title>
</head>
<body>
<div>Hello World</div>
</body>
</html>
------------------------------------------------------------------------------
4. UI5 서버 실행(Run UI5 Server)
- Terminal 에서 "ui5 serve" 명령어 실행 -> Browser에서 "http://localhost:8080/index.html" 접속한다.
(Run the "ui5 serve" command in Terminal -> Browser to "http://localhost:8080/index.html".)
- ui5 serve 명령 실행하면 URL 정보 표시되며, 해당 URL/index.html 로 Browser에서 접속하여 Hello World 표시되면 환경 구성 완료이다.
(When the "ui5 serve" command is executed, URL information is displayed. When "Hello World" is displayed by accessing the browser with the corresponding "URL/index.html", the environment is complete.) - 희망하는 포트가 따로 있을 경우 또는 이미 8080 포트가 사용 중인 경우에는 "ui5 serve --port 희망하는 포트번호" 로 실행하면 된다.
(If the desired port exists separately, or if the 8080 port is already in use, you can run it with "ui5 serve --port desired port number".)
댓글
댓글 쓰기