작성일 | 2025.03.04 |
버전 | 1.1 |
숫자 계산기
•
첫번째 숫자랑 두번째 숫자가지고 계산하기 누르면 밑에 결과 하단에 해당 결과가 노출되어야함
•
첫번째 숫자가지고 구구단 보기 누르면 해당 dialog 팝업에 구구단나옴
•
버튼은 닫기로 표시해주기
셋팅
프로젝트 설정 입력
•
Module name: numbercalc
•
Application title: [D**] 숫자 계산기
•
Application namespace: sync.d**
•
Description: 간단한 숫자 계산 애플리케이션
•
View name: Calc
VSCODE에서 터미널 실행시 앞으로 기본을 CMD로 셋팅
CTRL + SHIFPT + P 누르고
플젝에서 우클릭
터미널에
npm start
Bash
복사
기본 초기 화면인 App을 지우고 만든 뷰로 셋팅해보기
App 관련 파일 제거
•
webapp/view/App.view.xml 파일 삭제
•
webapp/controller/App.controller.js 파일 삭제
manifest.json
계산기 JSON 모델 설정
•
JSON Model을 생성하여 계산기 데이터 정의
•
Component.js에서 calcModel을 생성하여 입력값, 연산자, 결과 값을 저장하도록 설정
•
JSONModel을 생성하고, 변수명은 oCalcModel로 할 것.
◦
"sap/ui/model/json/JSONModel"
•
다음 데이터를 포함하는 JSON 객체를 생성할 것.
◦
firstNumber: 첫 번째 숫자 (초기값: "")
◦
secondNumber: 두 번째 숫자 (초기값: "")
◦
operation: 연산자 (초기값: "add")
◦
result: 계산 결과 (초기값: "")
•
setModel()을 활용하여 calcModel이라는 모델명으로 등록할 것
•
JSON Model은 SAPUI5에서 데이터를 관리하는 가장 일반적인 방법
•
Component.js에서 모델을 초기화하면 애플리케이션 전체에서 모델에 접근가능함!
•
"calcModel"이라는 이름으로 모델을 설정 → 여러개 모델 공존 시 구분해서 사용 가능.
화면 View 구현
문제 요구사항
content안에 한번 VBox 태그로 감싸서 내용물들을 수직으로 구현
•
SAP UI5의 Select 컨트롤을 사용하여 연산을 선택할 수 있도록 구현.
•
연산 선택지는 core:Item을 사용하여 정의.
•
선택된 값은 JSON 모델(calcModel)의 /operation 속성과 바인딩.
•
Select의 너비는 20%로 설정.
•
다국어 지원을 위해 i18n.properties에서 operationLabel 키를 참조.
힌트
•
sap.m.Select는 UI5에서 제공하는 드롭다운 UI 요소.
•
selectedKey 속성을 사용하여 모델과 데이터를 연결할 수 있다.
•
core:Item을 사용하여 드롭다운에 들어갈 항목을 추가할 수 있다.
<! -- 참고용 -->
<Select id="" selectedKey="{}" width="20%">
<items>
<core:Item id="addItem" key="add" text="더하기 (+)" />
<core:Item id="subtractItem" key="subtract" text="빼기 (-)" />
<core:Item id="multiplyItem" key="multiply" text="곱하기 (×)" />
<core:Item id="divideItem" key="divide" text="나누기 (÷)" />
</items>
</Select>
XML
복사
•
VBox 레이아웃을 사용하여 컨트롤을 수직으로 정렬
•
데이터 바인딩({calcModel>/firstNumber})을 사용하여 모델과 UI를 연결.
•
<core:Item> 컨트롤을 사용하여 Select의 드롭다운 항목을 정의한다.
•
<core:Item> 컨트롤을 사용하여 Select의 드롭다운 항목을 정의한다.
•
이벤트 핸들러(.onCalculate)를 버튼에 연결
언어팩 설정
•
아래 항목들을 i18n.properties에 추가.
•
버튼, 입력 필드, 오류 메시지 등에 사용될 문구만 추가.
•
하드코딩된 텍스트를 사용하지 않고, {i18n>키값}으로 XML에서 불러오기.
i18n.properties에 추가할 항목
firstNumberLabel=첫번째 숫자
secondNumberLabel=두번째 숫자
operationLabel=연산 선택
calculateButton=계산하기
resultLabel=결과
errorEmptyInput=숫자를 입력해주세요
errorInvalidInput=유효한 숫자를 입력해주세요
multiplicationTable=구구단 보기
Plain Text
복사
컨트롤러
1. 기능 개요
버튼 | ID | 실행될 함수 | 수행 동작 |
계산하기 | calculateButton | onCalculate() | 입력된 숫자 2개와 연산자를 가져와 계산 후 결과 출력 |
구구단 보기 | multiplicationTableButton | onShowMultiplicationTable() | 입력된 숫자로 구구단을 생성하여 다이얼로그(Dialog)로 표시 |
2. 상세 요구사항
1) 계산하기 버튼 (onCalculate())
기능 설명•
사용자가 입력한 두 숫자와 연산자를 가져와 사칙연산을 수행한 후 결과를 출력해야 함.
•
연산 후 결과를 calcModel>/result에 저장해야 함.
•
입력값 검증을 수행하여 잘못된 입력이 있을 경우 오류 메시지를 표시해야 함.
구현 순서
•
calcModel에서 /firstNumber, /secondNumber, /operation 값을 가져오기.
var oModel = this.getView().getModel("calcModel");
var fFirstNumber = parseFloat(oModel.getProperty("/firstNumber"));
var fSecondNumber = parseFloat(oModel.getProperty("/secondNumber"));
var sOperation = oModel.getProperty("/operation");
JavaScript
복사
•
입력값 검증
◦
첫 번째 또는 두 번째 숫자가 NaN이면→ "errorInvalidInput"(유효한 숫자를 입력해주세요) 메시지를 출력
◦
if문안에서 isNaN 사용해서 MessageToast 사용하면됨
•
선택한 연산을 수행 (switch-case 활용)
◦
나눌때 0이 있으면 오류메세지 떨궈주기
▪
"0으로 나눌 수 없습니다.”
•
연산 결과를 calcModel>/result에 저장하여 화면에 표시
oModel.setProperty("/result", sResult.toString());
JavaScript
복사
•
"계산 완료!" 메시지를 MessageToast로 출력
MessageToast.show(this.getView().getModel("i18n").getResourceBundle().getText("calculateSuccess"));
JavaScript
복사
추가 조건•
연산 수행 후 result 값이 calcModel에 저장되도록 구현할 것.
•
오류 메시지는 i18n을 활용하여 다국어 지원할 것.
2) 구구단 보기 버튼 (onShowMultiplicationTable())
기능 설명•
사용자가 입력한 숫자를 기반으로 구구단을 생성해야 함.
•
생성된 구구단을 다이얼로그(Dialog)로 표시해야 함.
•
기존 다이얼로그가 있으면 새로 만들지 않고 내용만 업데이트해야 함.
구현 순서
•
calcModel에서 /firstNumber 값을 가져오기.
var fNumber = parseFloat(this.getView().getModel("calcModel").getProperty("/firstNumber"));
JavaScript
복사
•
입력값 검증
◦
첫 번째 숫자가 NaN이면→ "구구단을 표시할 숫자를 입력해주세요." 메시지를 출력
▪
if문안에서 isNaN 사용하기해서 MessageToast 사용하면됨
•
구구단을 생성 (for 문 활용, 1~9까지 반복)
var sMultiplicationTable = fNumber + "단\n\n";
for (var i = 1; i <= 9; i++) {
sMultiplicationTable += fNumber + " × " + i + " = " + (fNumber * i) + "\n";
}
JavaScript
복사
•
다이얼로그(Dialog) 생성 및 재사용
if (!this.guguDialog) {
this.guguDialog = new Dialog({
title: fNumber + "단",
content: new Text({ text: sMultiplicationTable }),
beginButton: new Button({
text: "닫기",
press: function() {
this.guguDialog.close();
}.bind(this)
})
});
this.getView().addDependent(this.guguDialog);
} else {
this.guguDialog.setTitle(fNumber + "단");
this.guguDialog.getContent()[0].setText(sMultiplicationTable);
}
JavaScript
복사
addDependent(this.guguDialog)?
SAP UI5에서 다이얼로그(sap.m.Dialog) 같은 팝업 UI 요소는 뷰의 일부가 아님.
그래서 명확하게 뷰(View)와 연결해줘야 메모리 관리를 제대로 할 수 있어.
다이얼로그를 뷰(View)에 종속시키는 코드this.getView().addDependent(this.guguDialog);
JavaScript
복사
이렇게 하면 현재 View가 제거되거나 파괴될 때(destroy), guguDialog도 자동으로 같이 제거됨.
즉, 메모리 누수를 방지하고, 다이얼로그가 남아서 UI에 문제를 일으키지 않게 관리하는 역할!
사용하지 않으면!
•
뷰가 삭제되어도 다이얼로그는 남아 있어서 메모리 누수 발생 가능
•
같은 다이얼로그가 여러 개 생성될 수도 있음 (중복 생성 문제 발생)
•
뷰(View)를 닫았다가 다시 열 때, 기존 다이얼로그가 사라지지 않고 남아 있을 수도 있음
참고
this.guguDialog.getContent()[0] -> 이건 밑에보면 배열의 첫번째 요소인 text 값 갖고올려공
this.guguDialog.getContent() = [
Text({ text: "구구단 결과" }) // 배열의 첫 번째 요소
];
JavaScript
복사
•
다이얼로그 열기 (.open())
this.guguDialog.open();
JavaScript
복사
추가 조건•
기존 다이얼로그 객체(this.guguDialog)가 있으면 새로운 다이얼로그를 생성하지 않고 재사용할 것.
•
"닫기" 버튼을 눌렀을 때 다이얼로그가 닫혀야 함.
•
"0으로 나눌 수 없습니다." 메시지를 i18n으로 변경하여 다국어 지원 가능하게 만들 것.
3. 추가할 조건 목록
•
입력값 검증 강화
◦
첫 번째 또는 두 번째 숫자가 비어 있으면→ "errorEmptyInput"(숫자를 입력해주세요) 메시지를 출력
•
다국어(i18n) 적용
◦
"0으로 나눌 수 없습니다.", "계산 완료!", "구구단을 표시할 숫자를 입력해주세요." 등의 메시지를 i18n으로 변경하여 다국어 지원 가능하게 만들 것.