Android DataBinding
: 기초에서 고급까지
송유섭
NAVER / 라이브서비스개발
네이버에서 7년째 개발하고 있는 안드로이드 개발자 입니다. 갤럭시S가 출시때부터 안드로이드 개발을 해왔으며, 네이버 입사전에는 음성인식 앱인 Seri, 스마트폰 사용제한 앱인 '하지마 Not todo List'등을 만들었습니다. 네이버에서는 현재 PRISM이라는 라이브/동영상 촬영 및 편집 앱을 담당해서 개발하고 있습니다.
리덕스를 도입할 때 주저하게 만드는 장벽들
○ 개요
몹엑스, 아폴로, 컨텍스트 API 등 리덕스를 도입하기도 전에 이미 선택적인 고민을 하게 만듭니다. 리덕스를 도입한 후에도 사가, 펜더, 옵져버블등의 미들웨어의 도입에서도 선택 장애가 발생하는 문제들이 리덕스 선택을 주저하게 만듭니다.
2020년 리덕스는 좋은 선택지 일까요? 리덕스는 언제 그리고 어떻게 사용해야 활용도를 높일 수 있을까요? 에어비앤비 결제 시스템과 3차원 시각화 시스템에 적용한 리덕스 활용 사례를 살펴보며 리덕스의 효용 가치를 같이 살펴보고자 합니다.
○ 목차
- 형상관리를 어렵게 하는 요소들
- MobX vs Redux
- 단방향 데이터 흐름(Flux)
- 미들웨어 살펴보기
- 리덕스와 미들웨어 활용 데모
- Typescript와 GraphQL 도입 사례
Sorry. for koreans only. I'll add english short description. or just visit http://wtfjs.com
아오 썅.
정정사항입니다.
객체 동일비교는 항상 valueOf 결과물로 나온 비교로 하는 데다가,
객체와 배열은 valueOf 해봐야 객체로 나오기 때문에
객체와 배열은 == 하나 === 하나 같은 비용으로 비교합니다.
[1,2,3]==[1,2,3] 은 false가 되므로
[1,,,2]==[1,undefined,undefuned,2] 는 무조건 false로 나옵니다.
이것이 자바다 익명 객체 + Chap.11 기본 API 클래스(java) 발표용 PPT.
간단하게 정리한 것.
이것이 자바다 책을 기반으로 작성한 강의용 PPT입니다.
부족한 게 많으니 쓰실 때에는 추가하셔서 쓰세요~
참고 자료 : 이것이 자바다
사진 첨부 : http://palpit.tistory.com/
Android DataBinding
: 기초에서 고급까지
송유섭
NAVER / 라이브서비스개발
네이버에서 7년째 개발하고 있는 안드로이드 개발자 입니다. 갤럭시S가 출시때부터 안드로이드 개발을 해왔으며, 네이버 입사전에는 음성인식 앱인 Seri, 스마트폰 사용제한 앱인 '하지마 Not todo List'등을 만들었습니다. 네이버에서는 현재 PRISM이라는 라이브/동영상 촬영 및 편집 앱을 담당해서 개발하고 있습니다.
리덕스를 도입할 때 주저하게 만드는 장벽들
○ 개요
몹엑스, 아폴로, 컨텍스트 API 등 리덕스를 도입하기도 전에 이미 선택적인 고민을 하게 만듭니다. 리덕스를 도입한 후에도 사가, 펜더, 옵져버블등의 미들웨어의 도입에서도 선택 장애가 발생하는 문제들이 리덕스 선택을 주저하게 만듭니다.
2020년 리덕스는 좋은 선택지 일까요? 리덕스는 언제 그리고 어떻게 사용해야 활용도를 높일 수 있을까요? 에어비앤비 결제 시스템과 3차원 시각화 시스템에 적용한 리덕스 활용 사례를 살펴보며 리덕스의 효용 가치를 같이 살펴보고자 합니다.
○ 목차
- 형상관리를 어렵게 하는 요소들
- MobX vs Redux
- 단방향 데이터 흐름(Flux)
- 미들웨어 살펴보기
- 리덕스와 미들웨어 활용 데모
- Typescript와 GraphQL 도입 사례
Sorry. for koreans only. I'll add english short description. or just visit http://wtfjs.com
아오 썅.
정정사항입니다.
객체 동일비교는 항상 valueOf 결과물로 나온 비교로 하는 데다가,
객체와 배열은 valueOf 해봐야 객체로 나오기 때문에
객체와 배열은 == 하나 === 하나 같은 비용으로 비교합니다.
[1,2,3]==[1,2,3] 은 false가 되므로
[1,,,2]==[1,undefined,undefuned,2] 는 무조건 false로 나옵니다.
이것이 자바다 익명 객체 + Chap.11 기본 API 클래스(java) 발표용 PPT.
간단하게 정리한 것.
이것이 자바다 책을 기반으로 작성한 강의용 PPT입니다.
부족한 게 많으니 쓰실 때에는 추가하셔서 쓰세요~
참고 자료 : 이것이 자바다
사진 첨부 : http://palpit.tistory.com/
이영훈 (현, 얼티온 전문위원)
기업혁신을 위한 클라우드 여정
기업의 클라우드 서비스 도입과 운영의 문제점을 살피고, 이를 위한 아키텍쳐 기반의 서비스 운영과 거버넌스의 필요성을 제시한다.
서비스 L/C상의 CSB의 중요성과 향후 클라우드 기반 구축의 CSB 포지셔닝을 제시한다.
- The Cloud Life Seminar 2014 발표 내용
이준영 (현 소프트웨어인라이프 연구원)
OpenShfit와 CSB.IO
인프라 비용을 절감하고 애플리케이션 개발속도를 향상 시킬 수 있는 방안으로 PaaS와 레드햇의 오픈 소스 솔루션인 OpenShift에 대하여 설명한다.
그리고, CSB.IO와 OpenShift의 미래 모습에 대해서도 소개한다.
- The Cloud Life Seminar 2014 발표 내용
장선진 (현, 소프트웨어인라이프 대표)
Cloud Services & Life
우리의 삶속에 필수요소인 클라우드 서비스의 중요성에 대하여 확인하고, 더 나아가 조직관점에서 활용하고 발전시켜야 할 방향에 대하여 제시한다.
- The Cloud Life Seminar 2014 발표 내용
2. 목차
객체란?
객체 리터럴
생성자 함수
New를 강제하는 패턴
배열 리터럴
JSON
정규 표현식 리터럴
원시 데이터 타입 래퍼
에러 객체
정리
3. 리터럴 & 객체
리터럴이란?
문자열 자체가 값을 나타내는 것
x = “90”
객체란?
이름 붙은 값들의 모음이다.
image 이름의 객체에
width, height 프로퍼티 2개가 있을 시
image.width
image.height
4. 객체 리터럴 문법
1.객체를 중괄호( { } )로 감싼다.
2.객체 내의 프로퍼티와 메서드를 쉼표로 분리한다. 마
지막에는 붙이지 않는다.
3.프로퍼티명과 프로퍼티 값은 콜론으로 분리한다.
4.객체를 변수에 할당할 때는 닫는 중괄호 뒤에 세미콜
론을 빼먹지 않도록 하라.
5. 빈 객체
빈 객체란?
Object.prototype에서 상속받은 프로퍼티와 메서드를 가
진다.
„비어있다‟는 말은 어떤 객체가 상복받은 것 외에는 자신
의 프로퍼티를 갖고 있지 않다는 뜻으로 이해 가능하다
6. 객체 리터럴 (1)
객체는 이름-값 쌍의 해시 테이블과 비슷하다
원시 테이터 타입과 객체(복합 데이터) 모두 값이 될
수 있다.
함수도 값이 될 수 있으며 이런 함수는 메서드라고
부른다.
* Primative data type, Composite data type
7. 객체 리터럴 (2)
빈 객체 생성
var dog = { }
프로퍼티 추가
dog.name = “Benji”;
메서드 추가
dog.getName = fucntion () {
return dog.name;
};
8. 객체 생성자
자바스크립트에는 클래스가 없기 때문에 유연하다.
객체 생성 - 리터럴 사용
var car = { goes: “far”};
// 내장 생성자 사용 (안티패턴)
var car = new Object();
car.goes = “far”;
리터럴 표기법을 사용하면 유효범위 판별 작업도 발
생하지 않는다.
9. 객체 생성자 – 함정 (1)
생성자가 인자를 받을 수 있어서 인자로 전달되는 값에 따라
다른 내장 생성자 객체 생성을 위임 할 수 있어서 다른 객체
가 반환 되기도 한다.
var o = new Object();
console.log(o.constructor === Object); //true
var o = new Object(1);
console.log(o.constructor === Number); //true
console.log(o.toFixed(2)); //”1.00”
10. 객체 생성자 – 함정 (2)
var o = new Object(“I am a string”);
console.log(o.consturctor === String); //true
console.log(typeof o.substring); //”function”
var o = new Object(true);
console.log(o.constructor === Boolean); //true
11. 사용자 정의 생성자 함수(1)
직접 생성자 함수를 만들어 객체 생성
var adam = new Person(“Adam”);
adam.say(); //”I am Adam”
Person은 그저 보통의 함수일 뿐이다 (클래스가 없
으므로)
var Person = fuction(name) {
this.name = name;
this.say = function() {
return “I am “ + this.name;
};
};
12. 사용자 정의 생성자 함수(2)
var Person = function(name) {
// var this = { };
//위 라인이 빠진 것이다
this.name = name;
this.say = function() {
return “I am “ + this.name;
};
//this를 반환한다.
// return this;
};
13. 사용자 정의 생성자 함수(3)
new 로 생성자 함수를 호출 시
빈 객채 생성
This라는 변수 참조 가능
해당 함수의 프로토타입을 상속 받음
This로 참조 되는 객체 프로퍼티와 메서드가 추가된다
반환되는게 없을 경우 this로 참조된 객체를 반환한다
14. 사용자 정의 생성자 함수(4)
바뀌지 않고 재사용이 필요할 시
프로토타입을 쓰는것이 좋다
person.prototype.say = function() {
return “I am “ + this.name;
};
var this = Object.create(Person.prototype);
15. 사용자 정의 생성자 함수(5)
빈 객체
var this = {};
var this = Object.create(Person.prototype);
Object.create는 다음장에…
16. 생성자 반환 값
생성자 함수를 new와 함께 호출하면 항상 객체가 반
환된다.
함수 내에 return문을 쓰지 않았더라도 생성자는 암
묵적으로 this를 반환한다.
또한 바환 값이 될 객체를 따로 정할 수도 있다.
var Objectmaker = function() {
this.name = “This is it”;
var that = {};
that.name = “And that‟s that”;
return that;
};
17. NEW를 강제하는 패턴(1)
New없이 생성자를 호출하면 this가 전역 객체를 가
리키게 된다.
function Waffle() {
this.taste = “yummy”;
}
var good morning = new Waffle();
console.log(typeof good_morning); //”object”
console.log(window.tastes); //”yummy”
New를 빼먹을시 good_morning은 undefined로 나온
다
18. NEW를 강제하는 패턴(2)
function Waffle() {
var that= {};
that.taste = “yummy”;
return that;
}
function Waffle() {
return {
tastes: “yummy”
};
}
그러나 이 방법은 프로토타입에 추가한 맴버를 객체에서 사용 불가
var first = new Waffle(), second = Waffle();
console.log(first.tastes); //”yummy”
console.log(second.tastes); //”yummy”
19. 스스로를 호출하는 생성자
function Waffle() {
if (!(this instanceof Waffle)) {
return new Waffle();
}
this.taste = “yummy”;
}
Waffle.prototype.wantAnother = true;
var first = new Waffle(),
second = Waffle();
console.log(first.tastes); //”yummy”
console.log(second.tastes); //”yummy”
console.log(first.wantAnother); // true
console.log(second.wantAnother); // true
20. 배열 리터럴(1)
Array() 생성자
var a = new Array(“itsy”, “bitsy”, “spider”);
var a = [“itsy”, “bitsy”, “spider”];
배열도 객체 “object” 출력한다
console.log(typeof a);
console.log(a.constructor === Array); // true
21. 배열 리터럴(2)
New Array()의 단점
var a = [3];
console.log(a.length); //1
console.log(a[0]); //3
var a = new Array(3);
console.log(a.length); //3
console.log(typeof a[0]); // “undefined”
new Array 에서는 부동소수점을 넣을시 에러가 난다
var white = new Array(256).join(„ „);
는255개의 공백문자 문자열을 반환한다.
22. 배열 판별 방법(1)
Array.isArray([]); //true
Array.isArray({
length: 1,
“0”: 1,
slice: function() {}
}); // false
또는
Object.prototype.toString() 호출시 가능
“[object Array]” 는 배열이고
“[object object]” 는 객체이다
24. JSON
JavaScript Object Notation의 준말
데이터 전송 형식의 일종
배열과 객체 리터럴 표기법의 조합
{“name”: “value”, “some”: [1,2,3]}
- 프로퍼티명에도 따옴표가 필요하다
함수나 졍규식 리터럴을 사용할 수 없다.
25. JSON 사용(1)
var jstr = „{“mykey”: “my value”}‟; // 공통
var data = eval(„ („ + jstr + ;) ;); //안티(보안)
var data = JSON.parse(jstr); //위라인 대신
console.log(data.mykey); //”my value”
// javascript YUI 사용
YUI().use(„json-parse‟, function(Y) {
var data = Y.JSON.parse(jstr);
console.log(data.mykey); //”my value”
});
// jQuery 사용
var data = jQuery.parseJSON(jstr);
console.log(data.mykey); //”my value
26. JSON 사용(2)
var dog = {
name: “Fido”,
dob: new Data(),
legs: [1, 2, 3, 4]
};
var jsonstr = JSON.stringify(dog);
위 메서드는 객체 또는 배열을 인자로 받아 JSON 문
자열로 직렬화한다
{“name”:”Fido”, “dob”:”2010-04-
11T22:36:22.436Z”, “legs”:[1,2,3,4])}
27. 졍규 표현식 리터럴
New RegExp() 생성자 사용
var re = //gm;
정규식 리터럴 사용
Var re = new RegExp(“”, “gm”);
28. 정규식 문법
g 전역 매칭
m 여러 줄 매칭
i 대소문자 구분없이 매칭
var no_letters = “abc123XYZ”.replace(/[a-
z]/gi, “”);
console.log(no_letters); //123
매칭을 미리 알 수 없거나 런타임에 문자열이 만들어
질시에는 RegExp()를 사용
29. 원시 데이터 타입 래퍼(1)
var n = 100;
console.log(typeof n); //”number”
var nobj = new Number(100);
console.log(typeof nobj); //”object”
var s = “hello”;
console.log(s.toUpperCase()); //”HOLLO”
“monkey”.slice(4, 6); //”key”
(22 /7).toPrecision(3); //”3.14”
30. 원시 데이터 타입 래퍼(2)
var s = new String(“my string”);
var n = new Number(101);
var b = new Boolean(true);
var s = “my string”;
var n = 101;
var b = true;
var greet = “Hello there”;
greet split(„ „)[0]; //”Hello”
greet smile = true;
typeof greet.smile; //”undefined”
31. 원시 데이터 타입 래퍼(3)
typeof Number(1); // “number”
typeof Number(“1”); // “number”
typeof Number(new Number()); // “number”
typeof String(1); //”string”
typeof Boolean(1); //”boolean”
32. 에러 객체
name, message이 기본 프로퍼티이다
그 외에도 임의의 프로퍼티를 가질 수 있다
try {
throw {
name: “MyErrorType”,
message: “oops”,
extra: “This was rather embrrassing”,
remedy: genericErrorHandler
};
} catch (e) {
alert(e.message); // “oops”
e.remedy(); // genericErrorHandler() 호출
}