본문 바로가기

전체 글

 (686)
2. Javascript ES2015 (5) - 클래스 [2/2] 앞서 살펴본 클래스 관련 내용을 이어서 계속 알아보도록 하겠습니다. 앞선 내용에서는 새로운 클래스 문법이 아닌 기존 프로토타입 문법을 살펴보고 있었습니다. 이 중, 부모 클래스의 생성자를 호출하는 내용까지 살펴보았죠. var Human = function(type){ this.type = type || 'human'; }; Human.isHuman = function(human){ return human instanceof Human; }; Human.prototype.breathe = function(){ alert('h-a-a-m'); }; var Zero = function(type, firstName, lastName){ Human.apply(this, arguments); this.firstNa..
2. Javascript ES2015 (5) - 클래스 [1/2] 자바스크립트에서도 클래스와 관련된 문법이 추가되었습니다. 물론, 근본적으로 자바스크립트에서의 프로토타입 기반의 상속 구조는 크게 변하지 않습니다. 다만, 기존의 상속 구조의 복잡함을 해결하기 위한 것이라는 점을 명심하고 아래 내용을 살펴봐주세요. 기본적인 방식으로 프로토타입 기반의 상속 과정을 나타낸 것입니다. var Human = function(type){ this.type = type || 'human'; }; Human.isHuman = function(human){ return human instanceof Human; }; Human.prototype.breathe = function(){ alert('h-a-a-m'); }; var Zero = function(type, firstName, ..
3. 사용자 인터페이스 구현 (3) - 뷰의 기초 공통 속성 2 앞서 살펴본 id 속성에 이어서, 계속해서 뷰의 공통 속성을 살펴보도록 하겠습니다. ○ layout_width, layout_height 뷰의 화면 표시를 위한 속성 중 size(크기)는 필수 속성입니다. 선언하지 않으면 에러가 발생하게 되죠. 기본적으로 아래와 같은 형식으로 선언하게 됩니다. 기본적으로 크기를 지정하는 속성 값은 아래와 같이 네 가지로 지정할 수 있습니다. · match_parent · fill_parent · wrap_content · 100px match_parent와 fill_parent는 의미상 동일해 결과는 같습니다. 기본적으로 해당 속성이 적용된 뷰는, 부모 계층의 뷰가 지정한 크기에 꽉 들어차도록 자동으로 결정하게 됩니다. 뷰 계층 구조는 추후 따로 살펴볼 예정이니, 여기서..
3. 사용자 인터페이스 구현 (3) - 뷰의 기초 공통 속성 1 레이아웃 XML로 UI를 구성한다고 가정했을 때, 각각의 뷰 태그에는 여러가지 속성을 부여해 값을 조정할 수 있습니다. HTML의 태그 별 속성을 떠올리시면 쉽게 이해가 되실 것입니다. 이번 아티클에서는 가장 기본적이면서도 자주 사용하게 되는 뷰 - TextView를 기준으로 뷰 클래스의 공통적인 속성에 대해서 하나씩 살펴보도록 하겠습니다. ○ id 속성 id 속성은 필수 속성은 아닙니다. 각각의 뷰를 식별할 수 있는 구분자로 사용되는데, 이를 자바 코드에서 불러와 컨트롤하는데 사용하게 됩니다. 앞서서 setContentView( ) 함수에 대해서 살펴보았는데, 이와 연계하여 화면을 구성하는 데 사용하게 되죠. setContentView( ) 함수 호출 → 레이아웃 XML 호출 → XML에 선언해둔 객체..
3. 사용자 인터페이스 구현 (2) - UI 작성법 : JAVA vs XML [2/2] 앞선 아티클에서 우리는 자바 코드만으로 레이아웃에 뷰를 적용하고, 이를 출력하는 실습까지 진행해 보았습니다. 3. 사용자 인터페이스 구현 (2) - UI 작성법 : JAVA vs XML [1/2] 안드로이드 프로그래밍에서 UI를 만드는 방법은 이론적으로는 자바 코드로 직접 작성하기, 레이아웃 XML로 작성하기 - 이렇게 두 가지 방법이 있습니다. 물론 실제로는 대부분 레이아웃 XML을 활 nozeroslope.tistory.com 이번에는 익숙한(?) 방식인 XML을 사용해 UI를 구성하는 방법에 대해서 살펴보도록 하겠습니다. 이번에는 이전 아티클에서 생성했던 모듈에서, MainActivity는 그대로 두고 새로운 액티비티를 추가로 생성해서 진행해 보겠습니다. 프로젝트 메뉴에서 패키지명 com.examp..
3. 사용자 인터페이스 구현 (2) - UI 작성법 : JAVA vs XML [1/2] 안드로이드 프로그래밍에서 UI를 만드는 방법은 이론적으로는 자바 코드로 직접 작성하기, 레이아웃 XML로 작성하기 - 이렇게 두 가지 방법이 있습니다. 물론 실제로는 대부분 레이아웃 XML을 활용하는 것이 사실이지만, 기본적인 원리를 학습하는 차원에서 두 가지 방법 모두 학습해 보도록 하겠습니다. ○ 자바 코드 사용 자바 코드를 통해서 화면을 구성하게 되면 - 레이아웃 XML을 사용하지 않고, 자바 코드만으로 뷰 생성을 진행하고 메서드를 활용해 뷰의 속성 등을 일일이 지정하게 됩니다. 그리고 이렇게 준비한 뷰를 setContentView( ) 함수의 파라미터로 넘기는 방식으로 화면을 구현하게 됩니다. 안드로이드 스튜디오를 실행하고, 우리가 앞서서 사용한 AndroidLab 프로젝트를 다시 활용해 봅시다...
2. Javascript ES2015 (4) - 구조 분해 할당 구조 분해 할당을 사용하면, 객체와 배열로부터 속성 / 요소를 쉽게 꺼낼 수 있습니다. 우선 예를 들어서 바로 살펴보도록 하겠습니다. 아래 예제에서는, candyMachine이라는 객체에 할당된 속성 중 getCandy라는 함수 속성, 그리고 status 속성 내의 count라는 속성을 - 동일한 이름을 가진 전역 변수에 할당하는 코드입니다. (함수 자체를 할당하는 것입니다! 리턴 값을 할당하는 것이 아니기에 실행하지는 않습니다) var candyMachine = { status: { name: 'node', count: 5 }, // 호출 객체의 count를 1 감소하고 리턴한다. getCandy: function(){ this.status.count--; return this.status.count;..
2. Javascript ES2015 (3) - Arrow Function(화살표 함수) ES2015에서는 화살표 함수(arrow function)가 추가되었습니다. 물론 기존의 함수 리터럴도 그대로 사용이 가능합니다. 여기서 설명하는 화살표 함수는 람다식과 비슷한 형태로 생각해 주시면 이해가 빠를 것입니다. 간단한 add 함수 선언 예제를 살펴보겠습니다. function add1(x, y){ return x + y; } const add2 = (x, y) => { return x + y; }; /* const add2 = function(x, y){ return x + y; }; */ const add3 = (x, y) => x + y; const add4 = (x, y) => (x + y); function not1(x){ return !x; } const not2 = x => !x; a..

티스토리툴바