남산 아래 개발자들

[iOS 강좌] 오픈소스로 쉽게 카메라 앱 만들기 - 1부 (cocospods) [iOS 강좌] 오픈소스로 쉽게 카메라 앱 만들기 - 2부 (카메라) [iOS 강좌] 오픈소스로 쉽게 카메라 앱 만들기 - 3부 (필터) 저번시간에 이어, 이번엔 카메라 기능을 추가해보도록 하겠습니다. 깃허브로 다운받은 GPUImage 라이브러리로 스틸 사진을 캡쳐할 수 있는 카메라를 만들어보겠습니다. 먼저, 뷰에 카메라 영역을 만듭니다. 기본뷰를  GPUImageView 로 상속을 받습니다. 추후 촬영버튼 및 필터를 선택할 수 있는 뷰영역을 제외하고 정사각형의 뷰를 올리고, 클래스 명을  GPUImageView으로 적어줍니다.   그리고 나서, UIButton으로 촬영 버튼을 만들어줍니다. 스토리보드의 뷰 컨트롤러에 올린  GPUImageView 객체와  UIButton 객체를 해당 Class와  IBOutlet으로 연결 해시켜 줍니다.  GPUImageStillCamera 클래스를 사용하는 간단합니다. 헤더에  GPUImageStillCamera 클래스를 추가하고  아래의 코드를 삽입하면, 클래스를 사용 할수 있습니다. initCamera 에서 카메라를 초기화하고 시작합니다. ====================================================================================================================================== -( void )initCamera{     // 카메라 생성 및 세팅     m_stillCamera = [[ GPUImageStillCamera alloc ] init ];     m_stillCamera . outputImageOrientation = UIInterfaceOrientationPortrait ;          // 필터 생성 및 카메라에 필터 추가  

* 이 문서는 지속적으로 업데이트 될 예정입니다 이번에 Angular2 로 프로젝트를 진행하면서 레퍼런스가 없어서 많은 어려움을 겪었습니다. 다행히 능력자님들이 이미 만들어 배포해두신 Angular2+ Component 들이 많아서 큰 도움을 받았습니다. 그 중 몇 개를 소개하려고 합니다. Angular 2+ Components & Libraries http://laptrinhx.com/topic/26993/angular-2-components-libraries#ui-components 유용한 Angular2 컴포넌트 라이브러리들을 링크로 정리한 문서 (아래에 소개할 링크도 일부 포함되어 있습니다) 필요한 부분을 찾을 때 참조하면 좋습니다. Swiper https://github.com/ksachdeva/angular2-swiper-example Swiper Demo 보러가기 >   http://idangero.us/swiper/demos/#.WZooPT5JYUE 웹/모바일 UI 에서 가장 흔히 쓰이는 swiper jQuery 용으로는 수도 없이 많지만 Angular2+ 용으로는 거의 유일무이하게 쓸만해 보이는 라이브러리입니다. 수많은 기능을 제공합니다. (Zoom, AutoScrolling 기타등등) Responsive UI, Bootstrap 에서도 무리 없이 잘 동작합니다. 약간의 버그가 있긴 하지만 고객이 문제삼지 않는다면 넘어가줄 수 있는 수준입니다. PrimeNG https://www.primefaces.org/primeng/#/ FileUpload, DataTable, Calendar, Chart 같은 온갖 기본 컴포넌트들이 무료 로 제공됩니다. 사용법도 간편합니다. 모듈만 임포트하면 끝~ 디자인도 꽤 괜찮구요. 직접 개발하려면 어마어마한 시간이 드는 것을 PrimeNG 모듈을 사용해서 시간을 상당히 단축시킬 수 있었습니다. 굳이 단점을

오늘은 AWS의 저장소 기능인 S3를 활용하여 정적 웹사이트 호스팅을 적용하는 방법에 대해 알아 보겠습니다. 먼저 S3 버킷 생성을 위하여 AWS 의 S3 메뉴로 이동합니다. 최근 S3 메뉴화면이 리뉴얼 되었습니다. 새로운 S3 콘솔화면이 나타납니다. “이전 콘솔로 전환” 버튼을 클릭하면 예전 콘솔화면으로 돌아갈수 있지만 새로운 콘솔화면을 통해 S3 버킷을 생성해 보도록 하겠습니다. “버킷만들기” 버튼을 클릭합니다. 버킷이름 과 버킷 리전을 입력하고 “생성” 을 선택합니다. 버킷이 생성되었습니다. 생성된 버킷명을 선택하면 버킷정보 화면이 표출됩니다. “업로드” 버튼을 선택하고 테스트용 index.html 파일을 업로드 합니다. index.html 파일은 웹사이트 호스팅시 최초표출될 화면으로 임의의 파일을 생성하여 등록합니다. 상단 “속성” 메뉴를 선택하면 정적 웹사이트 호스팅 이라는 카드메뉴가 표출됩니다. “정적 웹 사이트 호스팅” 을 선택합니다. 상단 엔드포인트에 http://BucketName.s3-website.ap-northeast-2.amazonaws.com/ 형식의 URL 이 생성됩니다. “이 버킷을 사용하여 웹 사이트 호스팅을 사용합니다” 에 체크 합니다. "인덱스 문서"   에 index.html 을 입력합니다.  (호스팅 구성시 인덱스 문서명은 실제 진입페이지로 사용할 파일명을 입력합니다) “저장” 을 선택합니다. 이제 위에서 생성된 엔드포인트 주소로 접속을 해보겠습니다. 호스팅 설정을 제대로 했음에도 403 에러가 표출되는 것을 확일할 수 있습니다. S3버킷 생성시 기본적으로 엑세스 권한이 공개설정 되지 않으므로 별도로 액세스 권한설정을 해주어야 합니다. 상단의 “권한” 탭으로 이동 후 “버킷정책” 을 클릭합니다. 버킷 정책 편집기에 아래와

앱을 개발 하다보면 필수 기능중에 하나가 보고 있는 리스트나 상세 페이지등을 새로고침 하는 것 입니다. 몇년 전 까지만 하더라도 새로 고침 기능이라고 하면 아이폰 처럼 뷰를 당기면 공간이 벌어지면서 새로고침 하는 방식을 많이 사용 했습니다.(여전히 이 방법을 사용하는 앱은 많습니다.) 해당 새로고침을 기능을 제공 하려면 개발가 하나하나 구현 해야해서 쉽지 않은 기능 중 하나였습니다. 하지만 지금은 android 레이아웃중 SwipeRefreshLayout을 제공하여 레이아웃만 추가한다면 별다른 구현 없이도 위에서 아래로 내려오는 새로고침 기능을 사용 할수 있게 되었습니다. SwipeRefreshLayout을 간단하게 구현하는 샘플 코드를 작성해 보겠습니다. 1단계 : 레이아웃 새로고침이 될 뷰를 SwipeRefreshLayout으로 자식뷰로 만듭니다.       <android.support.v4.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/swipe_refresh"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webView"></WebView> </android.support.v4.widget.SwipeRefreshLayout> 2단계 : 새로고침 이벤트 해당 뷰 영역을 위에서 아래로 당기면

Angular에서 정말로 놀랄만한 기능을 꼽자면 아마도 어플리케이션과 뷰의 데이터를 상호 공유하는 양방향바인딩 기능일 것입니다. Angular2 이후부터는  내장된 ngModel을 사용하는 방향과 별도 지시자(directive)를 사용하여 양방향 데이터 바인딩을 구현할 수 있습니다. 양방향 데이터 바인딩 양방향 데이터 바인딩은 단방향 바인딩과 달리 뷰와 컴포넌트의 상태 변화를 상호 간에 반영합니다. 양방향 바인딩을 사용하기 위한 가장 기본적인 출발은 FormsModule의 ngModel 지시자를 사용합니다. Angular2 이후부터는  ngModel을 속성바인딩과 이벤트바인딩을 합친 형태로 제공합니다. 아래의 소스를 살펴보면 <input [(ngModel)]="username" > Hello {{username}}! ngModel을 사용하여 손쉽게 양방향 바인딩을 구현할 수 있으며, ngModel 빼고는 다음과 같은 방식으로 사용합니다. <input [value]="username" (input)="username = $event.target.value" > Hello {{username}} 각각 요소에 대해 살펴보면 [value]=”username” - 컴포넌트의 username 속성을 input element의 value 속성으로 바인딩 합니다. 다시 말해 컴포넌트의 값을 뷰템플릿으로 값을 전달한다고 할 수 있습니다. (input)=”표현식” - input 이벤트 발생 시 다음 표현식을 실행합니다. username = $event.target.value - 이벤트 발생 시 해당하는 값을 컴포넌트의 username 속성에 전달합니다. $event - 이벤트 발생시 바인되는 정보를 담고 있습니다. 엘레멘트에 속성을 연결하여 엘레먼트의 상태가 바뀌었을때 해당 속성을 값을 변경하고, 속성을 바뀌었을

안녕하세요. '남산 아래 개발자들' 블로그에서 막내를 담당하고 있는 남산돈가스 입니다. 이번 블로그에선 AWS에서 제공하고 있는 서비스인 API Gateway와 Lambda를 이용해 간단한 RESTful API를 만들어보는 시간을 가질 예정입니다. 내용의 이해를 돕기 위해서 #1, #2를 각각 나누어 Lambda와 API Gateway를 나누어 게시하도록 하겠습니다. 그렇다면 우선 Lambda는 무엇인가 싶으실텐데요. Lambda란? AWS Lambda를 사용하면 서버를 프로비저닝하거나 관리할 필요 없이 코드를 실행할 수 있습니다. 사용한 컴퓨팅 시간만큼만 비용을 지불하고, 코드가 실행되지 않을 때는 요금이 부과되지 않습니다. Lambda에서는 사실상 모든 유형의 애플리케이션이나 백엔드 서비스에 대한 코드를 별도의 관리 없이 실행할 수 있습니다. 코드를 업로드하기만 하면, Lambda에서 높은 가용성으로 코드를 실행 및 확장하는 데 필요한 모든 것을 처리합니다. 다른 AWS 서비스에서 코드를 자동으로 트리거하도록 설정하거나 웹 또는 모바일 앱에서 직접 코드를 호출할 수 있습니다. [출처] https://aws.amazon.com/ko/lambda/ 이 정도 설명으론 Lambda를 이해하기엔 조금 어려울 수 있을텐데요. 쉽게 얘기하자면 기존의 AWS 사용자는 EC2인스턴스를 통해서 그들의 컴퓨팅 환경을 구성하고 그 안에서 각자의 런타임환경을 통해 코드를 실행하여 백엔드서비스를 제공해왔습니다. 하지만 Lambda를 이용하면 EC2환경이 아닌 단순히 소스코드를 업로드함으로써 Lambda에서 제공하는 Runtime환경 내에서 코드들을 실행할 수 있다는 얘기입니다. 그럼, 이제부터 실제 Lambda를 이용해 간단한 소스코드를 등록하고 실행해보겠습니다. 1. AWS Console에 접속해 Lambda 검색하여 서비스 이동 2. 처음 시작한다면 Get Started No

Apache Tomcat 을 기반의 웹서버를 구성하고  AWS  ELB(Elastic load Balancer) 를 활용하여 Multi-AZ(Available Zone) Instance 이중화를 구성하였습니다. 그런데 웹서버에 접속후 로그인 세션이 유지되지 않는 문제가 발생하였습니다. 원인은  ELB 는 트래픽 분산방식이 기본적으로 RoundRobin 방식으로 구현되어 사용자 세션이 유지되지 못하는 현상이었습니다. 이런 문제를 해결하기 위하여 ELB는 Sticky Session 기능을 적용합니다. 최초에 ELB 구성시 Sticky Session 은 Disabe 상태입니다. 확인을 위해 AWS 콘솔에 접속하여 EC2 DashBoard - Loadbalancer 항목으로 이동해 보겠습니다. Description 탭에 PortConfigration 항목에 설정에서 변경을 원하는 Port 구성에 Edit stickiness   를 선택합니다. Enable Load Balancer Generated Cookie Stickines 를 선택합니다. Expiration Period 에 세션이 유지될 시간을 "초" 단위로 입력해 줍니다. 이제 ELB 에서 생성한 쿠키를 사용하여 해당 시간동안 ELB 에서는 동일한 서버로 트래픽을 연결하여 세션을 유지하게 됩니다. 간단하게 ELB 를 통한 세션 설정이 완료 되었습니다. ELB 에서 생성한 Cookie 대신 웹 Application에서 직접 Cookie 를 생성하고 세션을 관리 할수도 있습니다. Enable Application Generated Cookie Stickiness 를 선택하면 웹서버에서 생성한 쿠키를 사용하여 세션을 유지하게 됩니다.  이때는 Cookie Name 에  웹서버에서 생성한 Cookie Name 을 입력해 주면 됩니다.  AWS Console 을 통하여 간단하게 Sticky Session 구성