SAPUI5 project 구조 생성 – 영화 정보API 서비스

처음 SAPUI5 Project 구조 생성을 통해 프로젝트를 초기 세팅하는 방법을 소개하고, 이후 영화 정보를 SAPUI5를 이용해서 리스트 해보고 검색해 보는 서비스를 개발해 보도록 하겠습니다.

간단히 나만의 영화 정보 서비스 조회 프로그램을 설명하면, YTS YIFY movies 사이트에서 제공하는 API를 활용하여, 해당 내용을 SAPUI5 웹화면에서 조회하는 프로그램입니다.

즉, 백엔드 데이터는 YTS YIFY movies API를 가져오고, 프론트엔드 화면은 SAPUI5를 활용하여 구축하는 서비스 프로젝트입니다.

yeoman 제너레이터로 초기 SAPUI5 project 구조 셋팅

SAPUI5 개발 환경 구축을 위한 yeoman 및 Fiori 익스텐션의 설치는 아래의 글을 참고하시면 됩니다.

SAPUI5 Visual Studio Code 개발 환경 셋팅(2022, 윈도우10)

SAPUI5 스캐폴딩(Scaffolding) – Visual Studio Code Tools 설치하기

윈도우 터미널 혹은 VS Code에서 yeoman을 실행시킨 후 스캐폴딩 작업을 진행합니다.

yeoman을 통해서 fiori 템플릿 설치

프로젝트 셋팅은 아래를 참조하여 셋팅하면 됩니다.

yeoman 설정을 통해 스캐폴딩

? Application Type SAPUI5 freestyle
? Which floorplan do you want to use? SAPUI5 Application
? Data source None
? View name View1
? Module name movie-info
? Application title movie-info
? Application namespace
? Description A Fiori application.

? Project folder path D:\Dropbox\SAPUI5\zedu001
? Minimum SAPUI5 version 1.102.3
? Add deployment configuration (y/N) No
? Add FLP configuration No
? Configure advanced options No

이 세팅에서 Appication Type을 SAPUI5 freestyle을, floorplan은 SAPUI5 Application을, 그리고 버전은 1.102.3으로 맞추는 것이 좋습니다.

작업이 완료되면 VS Code를 실행시켜 해당 작업 폴더로 이동합니다.

SAPUI5 project 구조 생성 및 기본 화면의 실행

다음과 같이 개발에 필요한 폴더 구조 및 파일, 설정 사항 등 SAPUI5 Project 구조가 자동으로 만들어져 있음을 확인할 수 있습니다.

SAPUI5 기본 구조 및 파일

Webapp 폴더에 오른쪽 마우스 버튼을 눌러 [Preview Application] 을 실행합니다.

SAPUI5 앱 Preview Application

스크립트 선택창에서 start fiori… 메뉴를 선택합니다.

SAPUI5 앱 start fiori

그러면 웹브라우저를 통해 앱이 실행됨을 확인할 수 있습니다.

SAPUI5 앱 FLP 기반에서의 실행

이를 FLP(Fiori Launch Pad) 방식이 아니라 단독 앱을 실행하기 위해서는 VS Code 터미널을 열어 다음과 같이 실행합니다.

ui5 serve -o index.html

그러면 브라우저를 통해 앱을 실행되면 FLP(Fiori Launch Pad)D없이 앱이 실행이 됩니다.

SAPUI5 앱 FLP 없이 실행

기본 SAPUI5 project 구조 및 설정 파일

주요 설정 파일 및 폴더 구조를 간략히 알아보도록 하겠습니다.

webapp >> controller

실제 화면 로직을 담당하는 controller 파일이 위치하고 있는 디렉토리입니다. 화면 View 파일이 추가되면 상응하는 화면 로직 Controller 파일을 해당 폴더에 위치시키면 됩니다.

SAPUI5 Controller

webapp >> i18n

웹 브라우저에서 사용하는 언어별 텍스트를 담당합니다. i18n_en.properties, i18n_ko_KR.properties 등의 파일을 만든 후 브라우저에서 호출하게 되면 해당 언어에 대응하는 언어로 표시됩니다.

SAPUI5 i18n

예를 들어, i18n_en.propertie의 경우에는

appTitle=movie info

i18n_ko_KR.properties에는 다음과 같이 입력이 됩니다.

appTitle=영화정보

해당 분기 설정은 브라우저 설정에서 확인할 수 있습니다. 예를 들어 크롬의 경우 아래 설정에서 확인할 수 있습니다.

크롬 설정 > 언어 설정에 정의된 순서대로 기본 언어를 인식합니다.

크롬 설정 언어 한국어 영어

webapp >> view

xml 형태로 정의된 View 파일이 위치하는 디렉토리 입니다. 화면이 추가되는 경우 해당 디렉토리에 위치시키면 됩니다.

SAPUI5 view

webapp >> index.html

앱이 실행되는 최조 진입점 파일이며, sapui5 기본 라이브러리 로드, manifest.json 위치, CSR(Client Side Rendering)된 데이터를 로드할 Body content 위치 정보를 담고 있습니다.

SAPUI5 index.html

webapp >> Component.js

앱 실행시 index.html로부터 가장 먼저 실행되며 manifest.json의 설정정보, 라우팅 정보 등의 앱 실행에 필요한 기본 등을 로드하게 됩니다.

SAPUI5 Component.js

webapp >> manifest.json

SAPUI5 manifest.json 이란 SAPUI5 앱을 구동하는 필요한 configuration 설정 정의입니다.

앱 로직과 설정을 분리하여 관리함으로써 좀 더 유연하게 앱을 유지보수 하는 것을 목표로 합니다.

매니페스트 파일을 통해 resource 와 model 객체, i18n 리소스 번들 등을 로드하게 됩니다.

이상으로 간단히 SAPUI5 프로젝트 구조를 알아보았습니다. 영화 API를 통한 SAPUI5 화면 개발은 다음에서 계속 업데이트 할 예정입니다.