GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기Kenneth Ceyer
GDG DevFest 2017 Seoul
프론트엔드 모던 프레임워크 낱낱히 파헤치기 세션의 발표자료입니다.
이 발표자료에서는 여러분이 항상 궁금해 하신
프론트엔드 프레임워크의 삼총사
Angular, React, VueJS를 다차원적으로 깊이있게 비교하고 각각의 이점과 특화된 기능을 소개하고 있습니다.
이러한 프레임워크를 경험해보지 못한 분들을 위해 프레임워크 별로 특징부터 쉽게 접근하여 설명하기 때문에 경험 불문하고 가볍게 읽어 보실 수 있습니다.
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기Kenneth Ceyer
GDG DevFest 2017 Seoul
프론트엔드 모던 프레임워크 낱낱히 파헤치기 세션의 발표자료입니다.
이 발표자료에서는 여러분이 항상 궁금해 하신
프론트엔드 프레임워크의 삼총사
Angular, React, VueJS를 다차원적으로 깊이있게 비교하고 각각의 이점과 특화된 기능을 소개하고 있습니다.
이러한 프레임워크를 경험해보지 못한 분들을 위해 프레임워크 별로 특징부터 쉽게 접근하여 설명하기 때문에 경험 불문하고 가볍게 읽어 보실 수 있습니다.
자마린 iOS 멀티화면 컨트롤러_네비게이션 컨트롤러, 루트 뷰 컨트롤러
첫번째 작성한 Xamarin.iOS 예제를 통해 View Controller가 자신의 Content View 계층 구조를 Window에 로드하는 하나의 Window만 가지고 있음을 알수 있었고 두번째 멀티화면 예제를 통해 새로운 화면(Scene)을 추가하고 아래 그림과 같이 두 화면(Scene) 사이에 이름을 전달했다.
사용자가 입력한 여러 개의 이름은 첫 번째 화면에서 입력되고 첫 번째 View Controller에서 두 번째 화면(Scene)으로 전달되어 두 번째 화면에 표시된다. 화면, 뷰 컨트롤러 및 데이터의 분리는 모델, 뷰, 컨트롤러 (MVC) 패턴을 따른다.
Model-View-Controller는 디자인 패턴으로 재사용 가능한 아키텍처 인데, MVC는 그래픽 사용자 인터페이스(GUI)가 있는 응용 프로그램의 아키텍처이다. 애플리케이션의 객체를 모델 (데이터 또는 애플리케이션 로직), 뷰 (사용자 인터페이스) 및 컨트롤러 (코드 비하인드)의 세 가지 역할 중 하나에 할당한다.
요즘 크로스플랫폼 앱개발 자마린 인기죠^^
Xamarin.iOS를 기반으로 아이폰용 HelloWorld를 간단히 실습하는 자료 입니다. 보시고 천천히 따라해 보세요~
Xamarin.ios 단일뷰 앱 프로젝트를 생성하자. (프로젝트명 : iOS_Hello)
Main.storyboard를 더블 클릭해서 아래 화면 처럼 UI를 구성하자.
Label(Text : 이름을 입력하세요.)
Text Field(Name : txtName, Text : “”)
Button(Name : btnAdd, Text : Add)
Label(Name : lblNames)
Button(Name : btnNext, Text : 다음 화면)
3. xamarin.i os 3.3 xamarin.ios helloworld 자세히 살펴보기 3.4.4 view controllers an...탑크리에듀(구로디지털단지역3번출구 2분거리)
3.4.4 View Controllers and the View Lifecycle
■ Content View Hierachy : View Controller에 의해 관리되는 View or Subview의 스택이다.
■ View Controller는 Content View Hierachy 안에 있는 View들을 관리하는 역할을 한다.
■ View Controller는 Scene의 아래 검정색 Bar로 Storyboard안에 표현된다.
■ Content View Hierachy에 대해 사용자 정의 View Controller를 정의할 수 있는데 속성창의 Identity안의 Class 속성에서 지정할 수 있다.
■ ViewController는 UIViewController의 하위 클래스로 아래와 같이 기본 모양을 가진다.
public partial class ViewController : UIViewController
{
public ViewController (IntPtr handle) : base (handle)
{
}
■ View의 Lifecycle 이벤트
View Controller는 Window로부터 Content View Hierarchy의 요소들을 로딩하거나 언로딩 한다. Content View Hierachy안의 View에서 발생되는 중요한 일에 대해 View의 라이프 사이클
동안 OS는 이벤트를 통해 View Controller에 알린다.
View Controller가 메모리에 Content View Hierarchy를 로드하는 시점에 한번 호출된다.}
View Controller의 View가 Content View Hierarchy에 추가되어 화면에 나타날때 마다 호출된다.(OnStart)
View Controller의 View가 Content View Hierarchy에서 제거되어 화면에서 사라질 때마다 호출된다. 주로 화면 Clear 또는 저장하는 경우에 사용된다.
and View가 Content View Hierarchy에서 추가되거나 제거될 때 호출된다.
■ 사용자의 상호작용에 대한 응답 : View Controller의 가장 중요한 역할은 버튼 조작, 탐색 등과 같은 사용자 상호 작용에 응답하는 것이다. 사용자 상호 작용을 처리하는 가장 간단한 방법은 컨트롤을 연결하여 사용자 요청/입력을 받고 응답하는 이벤트 핸들러를 만들어 연결하는 것인데 Hello iOS 예제처럼 버튼을 터치하여 터치 이벤트에 응답 할 수 있다.
■ Properties 창에서 Button 컨트롤에 Name을 할당하면, iOS 디자이너는 ViewController 클래스의 내부에서 사용할 수 있도록 ViewController.designer.cs의 컨트롤에 자동으로 매핑한다. View Lifecycle의 ViewDidLoad 단계에서 컨트롤이 먼저 사용 메서드 내에서 사용자의 터치에 응답 할 준비를 하는 것이다.
자마린 iOS 멀티화면 컨트롤러_네비게이션 컨트롤러, 루트 뷰 컨트롤러
첫번째 작성한 Xamarin.iOS 예제를 통해 View Controller가 자신의 Content View 계층 구조를 Window에 로드하는 하나의 Window만 가지고 있음을 알수 있었고 두번째 멀티화면 예제를 통해 새로운 화면(Scene)을 추가하고 아래 그림과 같이 두 화면(Scene) 사이에 이름을 전달했다.
사용자가 입력한 여러 개의 이름은 첫 번째 화면에서 입력되고 첫 번째 View Controller에서 두 번째 화면(Scene)으로 전달되어 두 번째 화면에 표시된다. 화면, 뷰 컨트롤러 및 데이터의 분리는 모델, 뷰, 컨트롤러 (MVC) 패턴을 따른다.
Model-View-Controller는 디자인 패턴으로 재사용 가능한 아키텍처 인데, MVC는 그래픽 사용자 인터페이스(GUI)가 있는 응용 프로그램의 아키텍처이다. 애플리케이션의 객체를 모델 (데이터 또는 애플리케이션 로직), 뷰 (사용자 인터페이스) 및 컨트롤러 (코드 비하인드)의 세 가지 역할 중 하나에 할당한다.
요즘 크로스플랫폼 앱개발 자마린 인기죠^^
Xamarin.iOS를 기반으로 아이폰용 HelloWorld를 간단히 실습하는 자료 입니다. 보시고 천천히 따라해 보세요~
Xamarin.ios 단일뷰 앱 프로젝트를 생성하자. (프로젝트명 : iOS_Hello)
Main.storyboard를 더블 클릭해서 아래 화면 처럼 UI를 구성하자.
Label(Text : 이름을 입력하세요.)
Text Field(Name : txtName, Text : “”)
Button(Name : btnAdd, Text : Add)
Label(Name : lblNames)
Button(Name : btnNext, Text : 다음 화면)
3. xamarin.i os 3.3 xamarin.ios helloworld 자세히 살펴보기 3.4.4 view controllers an...탑크리에듀(구로디지털단지역3번출구 2분거리)
3.4.4 View Controllers and the View Lifecycle
■ Content View Hierachy : View Controller에 의해 관리되는 View or Subview의 스택이다.
■ View Controller는 Content View Hierachy 안에 있는 View들을 관리하는 역할을 한다.
■ View Controller는 Scene의 아래 검정색 Bar로 Storyboard안에 표현된다.
■ Content View Hierachy에 대해 사용자 정의 View Controller를 정의할 수 있는데 속성창의 Identity안의 Class 속성에서 지정할 수 있다.
■ ViewController는 UIViewController의 하위 클래스로 아래와 같이 기본 모양을 가진다.
public partial class ViewController : UIViewController
{
public ViewController (IntPtr handle) : base (handle)
{
}
■ View의 Lifecycle 이벤트
View Controller는 Window로부터 Content View Hierarchy의 요소들을 로딩하거나 언로딩 한다. Content View Hierachy안의 View에서 발생되는 중요한 일에 대해 View의 라이프 사이클
동안 OS는 이벤트를 통해 View Controller에 알린다.
View Controller가 메모리에 Content View Hierarchy를 로드하는 시점에 한번 호출된다.}
View Controller의 View가 Content View Hierarchy에 추가되어 화면에 나타날때 마다 호출된다.(OnStart)
View Controller의 View가 Content View Hierarchy에서 제거되어 화면에서 사라질 때마다 호출된다. 주로 화면 Clear 또는 저장하는 경우에 사용된다.
and View가 Content View Hierarchy에서 추가되거나 제거될 때 호출된다.
■ 사용자의 상호작용에 대한 응답 : View Controller의 가장 중요한 역할은 버튼 조작, 탐색 등과 같은 사용자 상호 작용에 응답하는 것이다. 사용자 상호 작용을 처리하는 가장 간단한 방법은 컨트롤을 연결하여 사용자 요청/입력을 받고 응답하는 이벤트 핸들러를 만들어 연결하는 것인데 Hello iOS 예제처럼 버튼을 터치하여 터치 이벤트에 응답 할 수 있다.
■ Properties 창에서 Button 컨트롤에 Name을 할당하면, iOS 디자이너는 ViewController 클래스의 내부에서 사용할 수 있도록 ViewController.designer.cs의 컨트롤에 자동으로 매핑한다. View Lifecycle의 ViewDidLoad 단계에서 컨트롤이 먼저 사용 메서드 내에서 사용자의 터치에 응답 할 준비를 하는 것이다.
2. 목 차 뷰 스위처 애플리케이션 멀티뷰 애플리케이션의 구조 콘텐츠 뷰 해부 뷰 스위처 만들기 뷰 컨트롤러와 nib 파일 만들기 애플리케이션 델리게이트 수정하기 SwitchViewController.h MainWindow.xib 고치기 SwitchViewController.m작성하기 콘텐츠 뷰 구현하기 전환 시 애니메이션 주기
3. Introduction 아이폰의 기본 애플리케이션 중 주식 애플리케이션은 두 개의 뷰를 가지는데, 하나는 데이터를 보여주고 다른 하나로는 주식종목을 설정한다 전화 애플리케이션은 탭바를 사용하는 멀티뷰 애플리케이션의 한 예이다 메일 애플리케이션은 내비게이션 바를 사용하는 멀티뷰 애플리케이션의 예이다 아이팟 애플리케이션은 내비게이션 바와 탭바를 모두 사용한다
4. 뷰 스위처 애플리케이션 뷰 스위처를 실행한 모습 뷰 바꾸기(Switch View) 버튼 누른 후 가운데 버튼을 눌렀을 때 보여주는 경고창
5. 멀티뷰 애플리케이션의 구조 최상위 컨트롤러 애플리케이션이 실행되고 나서 사용자에게 최초로 보여지는 컨트롤러 UIViewController,UINavigationController나UITabBarController의 인스턴스가 최상위 컨트롤러로 사용 최상위 컨트롤러는 2개 이상의 뷰를 가지며 사용자의 입력에 알맞는 뷰를 보여주는 역할을 한다. 멀티뷰 애플리케이션에서 화면의 대부분은 콘텐츠 뷰로 구성 각각의 콘텐츠 뷰는 아웃렛과 액션을 포함한 자신만의 컨트롤러를 가지고 있다 일반적으로 각각의 콘텐츠 뷰들은 뷰 컨트롤러, nib, UIView의 하위클래스로 구성
6. 뷰 스위처 만들기 새 프로젝트 생성 프로젝트 이름 View Switcher, Window-based Application옵션 선택
7. 뷰 컨트롤러와 nib 파일 만들기 UIViewControllersubclass 를 선택하고XIB for user interface 옵션을 제외 두개의 .xib파일을 생성 BlueView.xib, YellowView.xib
10. MainWindow.xib 고치기 새로 추가할 클래스는 UIViewController의 하위클래스이므로 라이브러리에서 View Controller(그림)를 찾아서 nib의 메인 창에 끌어놓는다. Drag
11. MainWindow.xib 고치기 nib 메인 윈도우의 뷰 컨트롤러 아이콘을 클릭하고⌘4를 눌러 아이덴티티(identity) 인스펙터를 띄운다. UIViewController라고 되어 있는 Class 콤보박스를 클릭하고 클래스를 SwitchViewController로 바꾼다.
12. MainWindow.xib 고치기 최상위 컨트롤러의 컨텐츠 뷰는 화면 하단에 배치될 툴바로 구성 라이브러리에서 뷰를 끌어서 윈도우에 놓는다. 라이브러리에서 툴바를 집은 후 뷰의 바닥으로 끌어서 그림과 같이 만든다. 툴바 버튼을 액션 메서드에 연결 Bar Button Item의 속성 인스펙터를 연다. (⌘1) 버튼에서부터 Switch View 컨트롤러 아이콘으로 컨트롤을 누른 채로 끌어 놓고 switchViews: 액션을 고른다.
30. 콘텐츠 뷰 구현하기 BlueViewController.m #import "BlueViewController.h“ @implementation BlueViewController - (IBAction)blueButtonPressed { UIAlertView *alert = [[UIAlertViewalloc] initWithTitle:@"Blue View Button Pressed" message:@"You pressed the button on the blue view" delegate:nil cancelButtonTitle:@"Yep, I did." otherButtonTitles:nil]; [alert show]; [alert release]; } YellowViewController.m #import "YellowViewController.h“ @implementation YellowViewController -(IBAction)yellowButtonPressed { UIAlertView *alert = [[UIAlertViewalloc] initWithTitle:@"Yellow View Button Pressed" message:@"You pressed the button on the yellow view" delegate:nil cancelButtonTitle:@"Yep, I did." otherButtonTitles:nil]; [alert show]; [alert release]; } ...
31. 전환 시 애니메이션 주기 SwitchViewController.m으로 돌아간다. switchViews: 메소드를 책에 있는 새로운 코드로 바꾼다. 아이폰에서는 다음 네 개의 뷰 트랜지션을 선택할 수 있다 UIViewAnimationTransitionFlipFromLeft UIViewAnimationTransitionFlipFromRight UIViewAnimationTransitionCurlUp UIViewAnimationTransitionCurlDown
32. 전환 시 애니메이션 주기 애니메이션을 진행하는 동안 뷰의 모습이 바뀌지 않으면 항상 캐시를 사용 [UIViewsetAnimationTransition:UIViewAnimationTransitionFlipFromRightforView:self.viewcache:YES]; 트랜지션을 설정한 후 트랜지션할 때 사용하는 뷰별로 각각 한 번씩 메서드를 호출 [self.blueViewControllerviewWillAppear:YES]; [self.yellowViewControllerviewWillDisappear:YES]; 뷰 바꾸기가 끝나면 이 뷰들에 대해 두 번의 호출을 더 한다. [self.yellowViewControllerviewDidDisappear:YES]; [self.blueViewControllerviewDidAppear:YES];