SAP 사용자들의 오픈 커뮤니티

• 목록

Week 0 - Unit 2: JavaScript 이해하기

목차

1. Client-side scripting
2. 데이터 타입과 implicit conversion
3. Objects
4. Functions
5. Asynchronous processing
6. Method chaining (cascading)
7. Closures
8. Scope
9. UI5 관련 정보 참조 사이트

1. Client-side scripting

JavaScript는 코드에 대한 처리를 모두 Client-side에서 진행합니다. HTML 파일, 코드, 데이터와 같은 리소스들만 웹서버에서 가져올 뿐, Document Object Model(DOM) 요소들을 화면에 만드는 로직 처리의 경우 Client 에서 처리/진행됩니다.

JavaScript는 실행 중에 종종 XHR Requests를 발생시켜 OData나 REST 기반 서비스와 같은 백엔드 시스템으로부터 데이터를 제공 받습니다. 해당 데이터는 대부분 JSON이나 XML 포멧으로 제공됩니다.

2. 데이터 타입과 implicit conversion

JavaScript에는 6개의 데이터 타입이 있습니다.

Number : double-precision 64 비트 포멧

String : Unicode 캐릭터들의 나열

Boolean : True, False

Object : Function, Array, Date, RegExp

Null : non-value

Undefined : 초기화 되지 않은 값을 지칭

JavaScript에는 String과 Number 그리고 Boolean 사이에 implicit conversion이 일어납니다.

"5" * "2"
=> 10

Typeof ("Hello" + 1)
=> String

1 == true
=> True

Boolean에서의 implicit conversion을 피하려면 "===" 연산자를 사용하십시오.

1 === true
=> False

3. Objects

Objects는 이름과 값이 짝지어진 집합체입니다. Objects 는 "properties"라고 하며, 어떤 타입이 상관없이 value를 가질 수 있습니다. Objects는 constructor 함수를 가지며, Objects의 properties는 dot notation 또는 array notation을 통해 참조될 수 있습니다.

JavaScript에서의 Objects 개념은 상당히 포괄적으로, core 데이터 타입들을 제외한 거의 모든 것이 Objects라고 이해할 수 있습니다. 심지어 함수도 Objects 중 실행 가능 한 것을 의미합니다.

// object literal
var oObjLiteral = {};

// an Object object
var oObject = new Object();

// properties referenced using dot notation
oObject.property;
oObject.method([parameter]);

// properties referenced using array notation
oObject["property"];

// adding a property to an object
oObject.newProperty = "Property Value";

// deleting properties or methods
delete oObject.myMethod;

4. 함수 (Functions)

함수는 실행 가능한 Objects입니다. 함수는 동적으로 만들어지고 없어집니다. JavaScript에서 함수는 하나의 Objects로 처리되기 때문에 함수에는 이름이나 arguments와 같은 property를 부여하는 것이 가능합니다.

JavaScript에서 함수는 다른 함수에 arugment로 넘겨질 수 있습니다. 이를 기반으로 JavaScript에서의 비동기적 callback이 일어납니다.

JavaScript의 변수는 function의 스코프 안에서 존재합니다. function과 함께 정의된 모든 변수들은 함수 안에서만 유효합니다. 이를 "function scope"라고 부릅니다.

//function expression (anonymous)
var fnAdd = function(a, b) {
	return a + b;
};

//function declaration (named)
function add(a, b) {
	return a + b;
}

// function calls
fnAdd(2, 3); //5
add(2, 3); // 5

5. 비동기식 처리 

JavaScript는 Single Thread 언어이기 때문에, 리소스가 많이 필요하거나 실행 시간이 오래 걸리는 task들은 반드시 비동기로 처리되어야 합니다. 그렇지 않은 경우 UI는 예상치 못하는 성능 이슈로 인해, task를 수행할 수 없게 되며, 아래와 같은 이슈 메시지를 사용자에게 전달합니다.

이를 방지하기 위해서 아래와 같은 방법들을 사용할 수 있습니다.

• 비동기적 모듈 정의 (AMD - Asynchronous module definition)

  requireJS, sap.ui.define과 같은 모듈 로딩 helper tool을 사용하십시오.

• setTimeset(..., 0) 사용

  setTimeset 함수를 통해 오래동안 실행되는 task를 쪼개어 다른 task들이 실행된 후 즉시 그 실행을 이어나갈 수도 있도록 할 수 있습니다.

• callback 함수, 이벤트 리스너, promises, framework hook 사용

  위의 기능을 사용하면 효율적으로 application의 로직을 짜고 구조를 만들 수 있습니다.

• 비동기적 XHR 호출 사용

  리소스가 로딩되는 동안 script 실행이 멈추는 동기적 서버 호출을 지양하고, 비동기적 XHR 호출을 사용하십시오.

jQuery("#myButton")
.text("Click me")
.css("color", "#c00")
.bind("click", function(e) {
	alert("Thanks for clicking");
});

function outer(param) {
	var attr1 = "One";
	inner();

	//the nested function inherits all
	//the outer variables and parameters
	function inner() {
		var attr2 = "Two";
		alert(attr1); // "One"
		alert(attr2); // "Two"
		alert(param); // "Three"
	}
}

outer("Three");

var myObj = {
	whatsThis : function(that) {
		setTimeout(function () {
			//this is the global window object
			console.log(this);
		}, 0);
	}
};

var that = this;

setTimeout(function() {
			//access "that" closure
			//for working with the context
}, 0);

setTimeout(function () {
			//this is still the context
}.bind(this), 0);