Tech/iOS 개발2013. 9. 6. 20:51

iOS 어플리케이션 배포하기

  (1) TestFlight를 이용한 내부 Release 버젼 배포 및 테스트


본 포스트에서 TestFlight를 이용한 내부 Release 버젼 배포 및 테스트 과정을 소개 한 후, 다음 포스트에서 앱스토어 등록을 위한 방법을 소개할 예정입니다. 이 포스트는 TestFlight에 가입하여 팀을 구성한 상태에서 읽어주시기 바랍니다.

1. TestFlight란?

iOS 개발시 앱스토어에 등록하기 전 여러번의 테스트를 거치게 되는데, 그 때 마다 직접 기기에 연결 후 빌드해서 팀원들과 내부 테스터 분들에게 배포하기란 귀찮은 작업입니다. 또한 빌드시 Debug 모드 일 때와  Release 모드일 때는 다르죠. 그래서 Release 모드로 빌드된 앱을 배포하여 테스트를 할 필요가 있는데, 이 작업을 손쉽게 해주는 것이 바로 TestFlight 입니다.


2. Test Flight 설치하기

먼저 https://testflightapp.com 에 가입하여 Desktop App을 설치해 주세요 


3. Application Target 설정하기

새로운  배포용 앱(Archive)을 생성하는 것이므로 Version 과 Build 번호를 한단계씩 높여 줍니다. Summary -> iOS의 Application Target 에서 아래 그림과 같이 수정하시면 됩니다. Build번호는 같은 Release 버전에서도 몇 번 수정하여 배포할 수 있으니 소수점 뒤에 하나를 더 붙여줍니다. 


4. Archive Build Configuration 설정

다음으로 Archive 를 생성할 때의 Build Configuration 을 설정해 주어야 됩니다. 아래 그림과 같이 Xcode 상단의 Scheme 에서 왼쪽에 앱이름이 적혀있는 부분을 클릭 하신후 Edit Scheme 으로 들어갑니다. 

Archive 탭의 Build  Configuration 항목에서 Release 로 설정이 되어 있는지 확인합니다. (Distribution은 앱스토어 배포용)


5. Archive로 빌드하기

상단 메뉴바에서 Product -> Archive 를 누르시면 Release 모드로 빌드되어 Archive 가 생성됩니다. 

아래와 같이 Organizer 의 Archive 탭에서 정상적으로 생성된 것을 확인 하실 수 있습니다.


6. Test Flight 에 어플리케이션 등록

아까 처음에 Test Flight 앱을 설치하셨으면 상단 메뉴바에 Test Flight 아이콘이 있습니다. 이를 클릭하시면 방금 Archive로 만든 앱목록이 나오는 것을 확인 하실수 있습니다. 이를 클릭하시고 확인 후 쭉 진행하시면 앱이 TestFligt 팀에 등록이 되고, 구성원들에게 메일이 전송됩니다.

2014.07.21 업데이트 : 정상적으로 앱을 등록했는데 설치 실패하는 기기가 발생하는 경우를 만났습니다. TestFlight App 에서 identity를 선택할 때, 해당 App의 App ID와 일치하는 iOS Team Provisioning Profile 을 선택하여 빌드를 등록하니 문제가 해결되었습니다.

그러면 아래와 같은 TestFlight 창이 뜨는데 이 때, 이 창에 있는 Identity와 Build Settings -> Code Signing 에 있는 Release 항목의 Provisioning Profile이 일치하는지 확인해 주세요. 

 


7. 앱 설치하기

iOS 디바이스에 Archive 를 설치하는 방법입니다. 앱을 등록하는 시점에 미리 Device와 함께 Test Fligt 에 등록이 되어있던 사람은 받은 메일의 링크를 따라가면 앱을 설치할 수 있는 링크가 나옵니다. 

새로운 멤버나 장치에서 이 앱을 설치하고 싶으시다면 가지고 있는 Device 에서 "Safari" 를 통해 TestFlight 홈페이지에 접속하신 후 로그인을 합니다. 처음 들어가는 장치라면 로그인 직후 아래와 같은 하면이 나옵니다.

Connect Device 버튼 을 누르시면 Provisioning Profile을 설치하라고 설정 창이 나오는데 설치해주시면 다시 웹 화면으로 돌아와서 "View All Apps" 란 탭이 생깁니다 이 탭을 클릭하시면

이러한 화면이 나오게되고, 여기서 INSTALL 을 하시면 설치가 됩니다

이제 내부테스트를 진행하시면 됩니다!



Posted by 비둘기야

댓글을 달아 주세요

  1. like 버튼이 없어서 아쉽네요..
    앱 이미 설치되어 있으면 업데이트로 설치 되는지 궁금하네요? 그렇겠죠?

    2013.09.06 21:37 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 업데이트로 설치 되더라구요 ㅎㅎ

      2013.09.09 10:12 신고 [ ADDR : EDIT/ DEL ]
    • 요 근래에 Android 도 지원되게 바뀌었는데, 연재로 Android 프로젝트에 대해서 써보는 것도 좋겠군요!

      2013.10.01 21:53 신고 [ ADDR : EDIT/ DEL ]
  2. 김병수

    여쭈어 보고 싶은게 있는데요.
    TestFlight에서 6그림화면에서요 SDK 부분과 dSYM 부분이
    SDK not found 와
    dSYM not found 이 뜨는데 따로 설치 해야 하는 부분인가요?

    2013.09.27 14:23 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 그렇습니다.

      이 포스트에서는 TestFlight SDK 를 사용하도록 이미 설정되어 있는 프로젝트를 배포하는 방법을 설명하고 있어서 SDK 사용하는 부분은 들어가 있지 않은데요, TestFlight 홈페이지에서 안내하고 있는대로 하시면 특별히 문제는 없을 겁니다.

      2013.10.01 21:53 신고 [ ADDR : EDIT/ DEL ]
  3. 정민수

    https://testflightapp.com 에 접속이 되지 않는데, 혹시 접속 잘 되시는지 좀 알 수 있을까요?

    2017.02.09 10:58 [ ADDR : EDIT/ DEL : REPLY ]

Tech/닷넷 일반2013. 7. 16. 00:00

NuGet Visual Studio에 추가하여 사용할 수 있기도 하고독립적으로도 사용할 수 있는 패키지 관리 시스템으로 기존의 Windows Forms 응용프로그램에서부터 ASP.NET, 그리고 Windows 8과 Windows Phone 8에 이르기까지 다양한 종류의 프로젝트를 지원하는 전천후 패키지 관리 시스템이자 또한 NuGet 웹 사이트와 연동하여 최신의 패키지를 자유롭게 활용할 수 있는 멋진 기능입니다.

.NET Framework 관련 소프트웨어 개발을 시작할 때 새로운 프로젝트를 만들고 TDD 초기 환경 구축을 하는 과정은 다양합니다. Visual Studio가 제공하는 Test Project를 만드는 방법이 있을 수도 있고나름대로 Test Mockup을 만드는 방법도 있을 수 있지만무료로 사용할 수 있으면서도 분명한 효과를 제공하는 도구로는 단연 NUnit이 거론됩니다그런데 Visual Studio의 기본 구성 요소도 아니고프로젝트에 추가해서 사용하기 번거로운 면도 일부 있습니다그리고 테스트 코드를 만들고 프로젝트에 포함시키는데 있어서도 프로젝트의 코드 관리를 어렵게 만드는 면이 있습니다.

이러한 문제를 해결하기 위한 방법으로 두 가지 방안을 소개하려고 합니다.

첫 번째는, NuGet 패키지 관리자를 이용하여 NUnit Framework는 물론 NUnit Runner를 MSI 패키지 설치 방식이 아닌 솔루션 단위의 패키지로 설치하여 버전 관리 시스템에 같이 포함하여 배포할 수 있는 방법에 관한 것입니다두 번째는, Friend 어셈블리를 이용하여 테스트 어셈블리에 대해서만 독점적인 접근 권한을 부여하여 테스트 논리를 만드는 절차를 간소화하는 방법에 관한 것입니다.

NuGet 패키지 관리자 버전 확인 후 업데이트하기

NuGet 패키지 관리자는 Visual Studio 2010 이후부터 서비스 팩을 설치하면 극 초기의 버전이 자동으로 추가되는 경우가 있습니다하지만 제품과 함께 제공되거나 서비스 팩을 이용하여 설치한 패키지 관리자는 버전이 너무 낮고 기능에도 일부 오류가 있어 쓰기 불편합니다당연히 여기에 대한 업데이트가 배포 중이며다음과 같은 방법으로 업데이트할 수 있습니다. Visual Studio 2010 이후의 버전은 모두 다음과 같은 방법으로 진행하면 됩니다.

Visual Studio를 시작합니다.



도구 메뉴를 선택한 다음 확장 관리자 메뉴를 아래와 같이 선택합니다.

 


나타나는 대화 상자의 왼쪽 편의 항목들 중 온라인 갤러리” 선택 후 모두를 선택합니다그러면 아래와 같이 NuGet Package Manager가 상위권 항목에 나타납니다많이들 사용하는 기능이기 때문에 검색할 필요도 없이 금세 발견할 수 있을 것입니다.

 


업그레이드를 할 필요가 없거나 이미 최신 버전이 설치된 경우 위와 같은 화면이 나타나지만대개는 업그레이드가 필요함을 알려줄 것입니다리스트에서 다운로드 버튼이 보이면 클릭하여 설치나 업데이트를 진행하시면 됩니다.

설치를 완료한 다음에는 Visual Studio를 다시 시작하라는 메시지가 나타나며이 메시지에 따라 다시 시작 버튼을 클릭하면 자동으로 다시 실행됩니다.

기존 프로젝트 또는 새 프로젝트에 NUnit 프레임워크와 NUnit Runner 추가하기

이제 NuGet 패키지 관리자를 새로 업그레이드하였으니 이 패키지 관리자를 사용하여 기존 프로젝트 또는 새 프로젝트에 NUnit 프레임워크와 NUnit Runner를 추가할 차례입니다단위 테스트 기능을 추가하려는 프로젝트를 열거나 새로운 프로젝트를 만들고아래와 같이 솔루션 탐색기에서 해당 프로젝트를 마우스 오른쪽 버튼으로 클릭한 다음, NuGet 패키지 관리 메뉴를 선택합니다만약 테스트 코드와 실제 제품 코드를 분리하고자 할 경우에는 별도의 새로운 프로젝트를 만든 다음 그 프로젝트에 아래 그림과 같이 패키지 관리자를 실행하도록 하면 됩니다.

 


 

그러면 NuGet 패키지 관리자가 다음과 같이 나타납니다아무것도 설치한 것이 없으므로 처음에는 덩그러니 빈 화면만 나타나는데이번에도 좌측편의 항목들 중 온라인을 선택합니다.

 


그 다음우측 상단의 검색 창에 NUnit을 입력하고 검색 버튼을 클릭하면 다음과 같이 NuGet 관련 패키지들이 나타나게 됩니다.

 


이 중에서 우리가 필요로 하는 것은 NUnit과 NUnit.Runners 패키지입니다. NUnit 패키지에서는 NUnit 프레임워크 어셈블리를 포함하고 있으며, NUnit.Runners 패키지는 NUnit 테스트 실행을 위한 프로그램의 GUI, CLI 및 플랫폼 중립, x86 버전의 파일도 같이 들어있습니다그러나 Runners 패키지는 실제 프로젝트에 참조로 추가되는 것은 아니며 Windows 탐색기를 사용하여 파일을 별도로 실행하거나 빌드 자동화 시점에서 활용할 수 있는 유틸리티 정도로 생각하면 편합니다.

이제 새로운 Test Fixture 클래스와 Test Case 메서드들을 몇 가지 추가해봅니다테스트해 보고픈 임의의 코드를 추가하고 컴파일이 잘 되는지 확인합니다여기서는 다음과 같이 코드를 작성했다고 가정해 보겠습니다.



이제 위의 테스트 어셈블리를 포함한 솔루션을 NuGet이 설치한 NUnit Runner를 통하여 열어보도록 하겠습니다솔루션 폴더를 찾아서 폴더 창을 열려고 하면 번거롭습니다이를 단순하게 하기 위하여현재 열려있는 코드 편집기 창의 탭 부분을 오른쪽 버튼으로 클릭하면 상위 폴더 열기 메뉴가 아래 그림과 같이 나타납니다이 메뉴를 클릭합니다.

 


그러면 다음과 같이 폴더 창이 정확한 위치를 가리키며 나타나게 됩니다이제 이 위치에서 SLN 파일이 있는 위치로 상위 폴더로 몇 번 이동합니다그 다음해당 폴더 위치를 기준으로 packages 폴더 > NUnit.Runners.x.x.x 폴더 > tools 폴더 순으로 접근합니다그리고 아래 그림과 같이 nunit.exe 파일을 찾아 실행합니다.

 


익숙한 화면이 나타납니다시스템에 관리자 권한을 이용하여 설치하지 않았어도 NUnit Runner가 즉시 실행되고 사용 가능한 상태로 준비된 것이 보입니다이제 여기서 SLN 파일을 열어보겠습니다. File 메뉴의 Open 메뉴를 선택하여 SLN 파일을 찾아 엽니다.

 


만약 솔루션 파일을 열려고 시도하였을 때솔루션이 이상 없이 컴파일이 잘 됨에도 불구하고 다음과 같이 오류 메시지가 나타나면 대상 플랫폼 설정이 NUnit의 대상 플랫폼과 일치하지 않기 때문에 오류가 발생하는 것입니다.



이 경우 문제 해결을 위하여 아래 그림과 같이 대상 플랫폼을 Mixed Platform 대신 x86으로 변경하고 nunit-x86.exe Runner를 대신 사용하거나, Any CPU로 맞추어 다시 솔루션을 빌드합니다.



SLN 파일을 열고 난 다음에는 테스트를 진행할 수 있게 화면이 나타납니다현재 활성화된 환경 설정을 기준으로 자동으로 포커스가 변경됩니다.



테스트가 잘 실행되는지 살펴봅니다예상대로 Case 1은 decimal이 정확한 덧셈을 처리하고 있음을 증명하며, Case 2는 Windows 환경에서 언제나 성공합니다그러나 Case 3는 Windows 환경에서 언제나 실패하며, Case 4는 1글자이지만 String과 Char가 분명히 다른 형식임을 확인해주고 있습니다.



실제 코드 어셈블리와 테스트 어셈블리를 분할하는 방법

NuGet 패키지 관리자를 사용하여 NUnit을 전보다 더 가깝고 편리하게 사용할 수 있게 된 것은 좋은 일입니다그렇지만 한 가지 고민이 남는데인프라의 개선과는 별도로 설계와 유지에 있어서 테스트 코드와 실제 제품 코드가 한 배를 타는 것은 별로 좋은 것 같지 않습니다테스트 코드가 제품 코드에 자유롭게 접근할 수 있으면서도제품 코드가 테스트 코드를 배려하는 별도의 부수적인 옵션 구성 요소들을 추가하는 일 없이테스트 코드가 자유롭게 제품의 기능을 접근하여 확인할 수 있는 수단이 필요할 것입니다.

여기에 대한 답을 .NET Framework는 Friend Assembly라는 이름의 개념으로 정의하고 있는데기본적으로 Assembly는 그 안에 속한 Module들 간에는 internal로 선언한 멤버들을 자유롭게 제어하고 다룰 수 있게 되어있습니다그런데 이 Assembly 간의 관계를 설정해두면 특정 어셈블리 상의 코드에 대해서만 internal로 선언한 멤버들을 자유롭게 제어하고 호출하거나 다룰 수 있게 해주는 특권의 부여가 가능합니다.

이 기능을 사용하면제품에 대한 실제 코드를 담고 있는 클래스 라이브러리나 실행 파일 모듈을 가지고 있는 .NET 어셈블리와 각 유형별 테스트 케이스를 따로 모아놓은 테스트 어셈블리들을 분리하여 테스트 어셈블리는 배포하지 않고실제 코드 어셈블리만 배포하는 것이 가능합니다그러면서도실제 코드 어셈블리의 모든 internal 멤버들을 테스트 어셈블리들이 자유롭게 활용할 수 있습니다이렇게 하여 둘 사이에 발생할 수 있는 상호 종속적인 관계를 분리할 수 있으니 훨씬 자유로운 테스트 코드 작성이 가능합니다.

위의 예제에서 보인 것처럼 실제 코드와 테스트 코드를 분리한 상태에서실제 코드를 가지고 있는 어셈블리에서는 우선 보호하고 싶은 클래스나 멤버에 대해 internal 키워드를 사용하여 선언합니다여기까지는 우리가 알고 있는 그대로이며다른 어셈블리에서는 internal 키워드를 사용하여 선언한 멤버들을 접근하거나 활용할 수 없습니다그러나프로젝트 내에 추가할 테스트 어셈블리의 이름을 아래 그림과 같이 확인해둡니다.



접근을 허용하려는 테스트 어셈블리의 이름을 찾아 복사합니다그리고 실제 코드를 포함하는 어셈블리의 적당한 위치에 다음과 같이 코드를 작성합니다. 그리고 실제 코드를 포함하는 어셈블리의 적당한 위치에 다음과 같이 코드를 작성합니다. 아래와 같이 어셈블리에 대한 특성을 부여하는 코드는 보통 Visual Studio 프로젝트와 함께 자동으로 생성되는 AssemblyInfo.cs 파일에 기술하면 편리합니다.

[assembly: System.Runtime.CompilerServices.InternalsVisibleTo("<Assembly Name>")]

 

위와 같이 코드를 작성하고 컴파일 한 다음 경고 메시지가 나타나지 않으면 됩니다그 다음접근을 허용한 어셈블리에서 테스트하려는 코드를 포함한 어셈블리를 참조에 추가한 다음, internal로 선언한 모든 멤버들을 정상적으로 사용할 수 있는지 확인하여테스트 코드를 작성할 수 있는 상태이면 테스트 케이스를 만들어나가기 시작하면 됩니다.

결론

테스트 주도 개발은 이번 아티클에서 살펴본 것과 같이 초기의 개발 환경 구축을 단순화할 수 있다면 얼마든지 쉽게 시작할 수 있는 효율적이고 인상적인 개발 방법론입니다그러나 여기에서 염두에 두어야 할 것은 이렇게 구축한 개발 환경을 어떤 관점을 유지하면서 활용해 나아갈 것인가에 대한 전략의 설정과 실천에 있을 것입니다.

테스트 주도 개발에 관한 좀 더 근본적인 내용을 검토하기 위해서는 다양한 자료들을 참조할 수 있지만가장 추천해 드릴 만한 자료로는 단연 Kent Beck의 Test Driven Development (ISBN 978-89-91268-04-3)이라는 도서입니다테스트 주도 개발의 원칙과 방향성에 대한 이야기를 자세히 들어볼 수 있으므로 꼭 살펴보실 것을 권합니다.

Posted by 비회원

댓글을 달아 주세요

Tech/HTML52013. 7. 4. 01:26

 

요즈음 Windows 8.1과 Windows Server 2012 R2 출시로 많은 이야기들이 오고 가고 있는데, 그 중에서도 Internet Explorer 11에 대한 이야기도 많이 눈에 띕니다.

Internet Explorer 11에 등장하는 새로운 기능들도 많지만, 기존 버전과 확연히 달라지고 제거되는 기능들 중에 호환성에서 문제를 일으킬만한 요소들이 많이 눈에 띕니다. 이러한 부분들을 잘 정리한 아티클이 있어 소개합니다. (http://www.nczonline.net/blog/2013/07/02/internet-explorer-11-dont-call-me-ie/)

이 아티클에서 이야기하는 내용을 요약하면 다음과 같습니다.

  • 11부터 User Agent 문자열에서 MSIE 문자열이 사라집니다. Internet Explorer인지 확인하기 위하여 User Agent 문자열을 검사하는 시나리오에 의존하는 모든 종류의 프로그램 및 로직은 MSIE 문자열 대신 Trident 문자열을 검사하도록 패턴을 수정하는 것이 구 버전부터 11.0까지 모두 지원할 수 있는 정확한 방법일 것입니다.
  • navigator 객체의 appName 속성은 'Netscape', product 속성은 'Gecko' 문자열을 반환합니다. 이러한 속성에 의존하여 IE 인지 아닌지를 판단하는 코드에서는 이런 이유로 IE 11을 IE가 아닌 Gecko 렌더링 엔진을 사용하는 브라우저로 오판할 수 있습니다.
  • typeof document.all 식을 사용하여 결과값을 평가하면 'undefined'로 반환되지만, 실제 document.all 속성에 대한 호출은 정상적으로 작동합니다. 달리 말하면, Modernizer와 같은 Presence Test Framework에서는 document.all 속성을 IE11이 지원하지 않는 것으로 해석하지만, 호환성을 이유로 document.all을 평가 과정 없이 직접 호출하는 Legacy Web Page들은 문제없이 잘 실행됩니다. 그러나 Legacy Web Page이더라도 typeof document.all 과 같은 표현식의 값을 의존하는 경우 역시 호환성 문제가 발생할 수 있습니다.
  • 같은 이유로 element.attachEvent 메서드의 Presence를 확인하기 위해서 typeof 연산자를 사용하면 'undefined'로 평가되지만 실제로는 호출이 가능합니다. 이러한 평가 사실에 의존하는 코드는 역시 호환성 문제가 발생할 수 있습니다.
  • window.execScript 메서드, window.doScroll 메서드, script.onreadystatechange 이벤트, script.readyState 속성, document.selection 속성, document.createStyleSheet 메서드, style.styleSheet 속성은 완전히 제거되었으므로 typeof 식은 물론 실제로도 작동하지 않습니다.

Windows 8.1에 대한 호환성을 점검하고 계시다면, 위의 사항들을 잘 참고하시어 대비하는 것이 필요해보입니다.

Posted by 비회원

댓글을 달아 주세요

Tech/TypeScript2012. 10. 8. 18:54

Untitled.jpg


공식사이트 http://www.typescriptlang.org/


TypeScript를 소개합니다. TypeScript는 JavaScript 개발을 위한 언어로, Ruby에 익숙한 분들이 CoffeeScript를 사용하듯, JAVA나 C#에 익숙한 사람들이 사용하기에 익숙하도록 만들어진 언어가 TypeScript 같습니다.


1.jpg 


명령줄에 Node.js 패키지 매니저로 TypeScript 컴파일러를 설치할 수 있습니다.


2.jpg 


VS2012에 TypeScript 편집기 플럭그인을 설치할 수 있습니다.


3.jpg 


TypeScript는 CodePlex에서 개발하고 있습니다. TypeScript 컴파일러는 TypeScript로 구현되었으며, 모든 자바스크립트 호스트에서 사용할 수 있습니다. (* CodePlex 주소는 여기)



확장성
클래스, 모듈, 인터페이스들을 사용할 수 있도록 기능을 제공합니다.


자바스크립트로 시작해서 자바스크립트로 끝난다.
기존의 자바스크립트 코드를 사용할 수 있으며, 유명한 자바스크립트 라이브러리들을 내포하고 있습니다.
다른 자바스크립트 코드에서 호출하여 사용할 수 있습니다.

대규모의 응용프로그램을 위한 강력한 도구
유형(Type)은 TypeScript 개발자가 높은 생산성의 개발 도구와 방법을 사용할 수 있도록 합니다.



**TypeScript에 대한 자세한 문서는 여기**

Introduction
전자 메일, 지도, 문서 편집 및 협업 도구와 같은 웹 응용 프로그램들이 점점 일상 컴퓨터 사용의 중요한 부분이 되어가고 있습니다. 우리는 이러한 웹 응용프로그램과 같은 대형 자바스크립트 프로그램을 구축하고 유지하는 자바스크립트 프로그래밍 팀의 요구를 충족하기 위해 TypeScript를 설계하게 되었습니다. TypeScript는 프로그래밍 팀이 소프트웨어 구성 요소 사이의 인터페이스를 정의하고 기존의 자바스크립트 라이브러리의 동작을 파악하는데 도움이 됩니다. 또한 TypeScript는 자신의 코드를 동적으로 로딩 가능한 모듈로 구성함으로써, 네이밍 충돌을 줄일 수 있습니다. TypeScript의 type 시스템은 자바스크립트 개발자가 높은 생산성의 개발 도구와 방법들을 사용할 수 있도록 해줍니다. (정적 타입 검사, 심볼 기반의 네비게이션, 구문 완성, 코드 리팩토링)



**TypeScript 튜토리얼은 여기**

튜토리얼의 내용을 봤을 때, 눈에 띄는 사용법은
아래처럼 모듈의 파라미터에 type을 정의할 수 있다는 점과,

function greeter(person: string) {
    return "Hello, " + person;
}



클래스와 인터페이스 정의가 가능하다는 점입니다.

class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);



그리고, VisualStudio 2012에서 TypeScript를 편집하는 경우, VisualStudio 에서 제공되는 편의기능들을 그대로 사용할 수 있습니다. (참조 검색이나 코드 리팩토링 등) 

Visual Studio picture


OOP 방식으로 자바스크립트 개발한다고 Base 라이브러리를 사용하거나 했었는데, TypeScript를 쓰면 원하던 OOP 개발을 더 편하게 할 수 있을 것 같네요. 상속이 지원되는지라거나 상세한 내용은 문서를 더 읽어보고 써봐야 알 것 같네요.

'Tech > TypeScript' 카테고리의 다른 글

[TypeScript - VS2012에서 자바스크립트 개발하세요]  (0) 2012.10.08
Posted by 벚꽃손님

댓글을 달아 주세요

Tech/HTML52012. 6. 4. 15:14


Webkit Keyframes Animation 실컷 구현해놓고, 안드로이드에서 돌렸을 때,

심장이 철렁한 경험을 했었는데요;

Keyframe Animation에 translate과 scale 속성이 변경되도록 해두었는데, translate만 동작하더라고요.

지금 생각해도 벌렁벌렁한 일이었네요. 아이폰에서만 확인했다가 =ㅅ=) 예상치 못한 난관을 맞닥뜨렸을 때의 심정이란...


WebkitTransition은 동작하기 때문에 구현 방식을 변경해야하는 고민이 있었습니다만...

저를 구원하는 사이트를 찾을 수 있었습니다.


http://blog.webcreativepark.net/2012/02/12-141313.html


위의 사이트에 한 일본 개발자 분께서 친절하게 안드로이드에서 Webkit Keyframes Animation을 적용하는 방법을 상세히 적어주셨습니다. 안드로이드에서도 Scale Aniamtion이 된다는 사실을 알게 된 저는 굉장히 기뻐했었는데요. (부끄부끄) 샘플 코드를 분석해서 문제를 찾을 수 있었습니다.

구현한 내용에는 문제가 없었습니다. css 에 적은 한 줄을 제거해야하더군요.


'-webkit-backface-visibility: hidden;'

'backface-visibility: hidden;'


backface-visibility 속성을 설정해 둔 한 줄을 제거하니 Scale Animation이 동작합니다. (감동)


혹여, 저처럼 안드로이드에서 scale 애니메이션이 동작하지 않아서 당황스러운 분들이 있을까 공유합니다...

(너밖에 없어 퍽!)

Posted by 벚꽃손님

댓글을 달아 주세요

Tech/HTML52012. 6. 4. 14:57


제목에는 일단 오차가 발생하다고 했지만, 표현이 좀 이상하네요.


여튼, 요즘은 HTML5 관련 작업을 하고 있는데,

마주한 문제가 발생했을 때마다 기록해보려고 합니다.


크롬에서 Video, Audio 태그를 사용하여 미디어를 재생하는 중에 Pause했다가, 다시 바로 Play를 시키면,

currentTime, 즉 재생 시간이 0.8 ~ 1.0초 뒤로 점프하는 경우가 생깁니다.

예를 들어, 1.0초에서 Pause시킨 뒤, 바로 Play를 하면 2.0초쯤에서 재생이 시작됩니다.

처음엔 잘 몰랐는데, 황당한 경우가 발생한거죠;


딱히 해결책을 찾기 어려워서, Seek를 해봤습니다. 즉 재생 콘트롤러에서 드래깅하여 재생 시간을 이동한 뒤 재생을 시작해보니 제시간에 재생을 하더군요.


혹시나해서, Pause했을 때 currentTime을 0으로 설정했다가 다시 미디어 시간을 적용한 뒤 재생하니 점프하는 경우 없이 재생합니다.




이렇게 처리한 경우, 문제가 하나 있습니다.

Video 태그의 경우, Pause 했을 때 화면이 0초로 왔다 다시 제시간으로 돌아가는 모습을 볼 수 있습니다. -_-;

(꼼수는 꼼수일 뿐... )


Posted by 벚꽃손님

댓글을 달아 주세요

Tech/PHP 개발2011. 7. 28. 18:49

addon은?

  • XE가 모듈을 실행할 때 함께 실행되는 PHP 코드
  • 적용할 모듈과 실행 시점을 지정할 수 있다.
    • 예) board 모듈이 실행될 때, 레이아웃을 화면에 출력하기 직전에 실행
    • 실행 가능한 시점
      • before_module_init
      • before_module_proc
      • after_module_proc
      • before_display_content

   

XE 기본 counter 애드온을 예로 들어 설명하겠습니다.

  • 기능: counter 애드온은 해당 모듈의 접근 횟수를 기록하는 애드온입니다.
  • 구성:

    conf/info.xml<클래스_이름>.addon.php 이 기본 구성 파일입니다.

    • info.xml:

      애드온의 기본 정보를 담고 있습니다. 관리자의 기능 설정>애드온 메뉴에 보여집니다.

    • counter.addon.php:

      모듈의 로드와 함께 실행될 코드가 작성되는 부분입니다. 주로 if문을 이용해 특정 시점에만 실행되도록 제한을 가합니다. 아래 코드는 addon이 설치되어 있고, admin 모듈이 아니고, 반환 대상이 HTML인 경우(view의 경우 대개 HTML이겠고 controller라면 XML/JSON인 경우가 많겠죠), 모듈이 초기화되기 전에 코드를 실행하겠다는 의미입니다.

     

그럼 이제 hello_world라는 간단한 애드온을 직접 작성해 봅시다.

hello_world 애드온은 page모듈의 상단에 hello world를 출력하는 애드온입니다.

   

우선 addons 폴더 안에 기본적으로 갖춰야 할 파일들을 생성합니다.

   

info.xml을 다음과 같이 작성합니다.

이외에도 addon 설정에 이용되는 extra_vars 등을 지정할 수 있지만, 지금은 필요하지 않습니다.

   

hello_world.addon.php도 가장 기본적인 내용을 작성합시다. HTML 코드를 생성한 뒤에 조작해야 하니, 모듈이 실행된 이후에 애드온이 실행되도록 합니다.

   

이제 실제로 hello world를 프린트하는 부분을 작성해야겠죠. 이 부분은 JavaScript로 작성해 봅시다.

hello_world 폴더 아래에 js라는 폴더를 만들고 hello_world.js를 생성해 줍시다. 지금은 똑같이 쓰긴 했지만, 자바스크립트 파일 이름은 애드온 이름과 달라도 됩니다 :)


hello_world.js 에서는 jQuery를 이용해 <body> 의 맨 뒷부분에 'hello world'를 추가하면 되겠죠?

   

자, 이제 page 모듈이 실행될 때 이 js파일을 실행시키도록 hello_world.addon.php 을 수정해 줍시다.

   

한 번 잘 되나 테스트해 볼까요? 우선 관리자 페이지에서 hello_world 애드온을 사용하도록 설정해 주셔야 합니다.

   

그리고 페이지 모듈을 하나 새로 만들어서 접속해 보시면, hello world가 출력되는 걸 보실 수 있습니다!

   

잘 되나 의심되신다면 위젯을 한두개 추가해 보세요. 저는 언어 선택 위젯을 추가해 봤습니다.   

   

잘 되네요 :)

'Tech > PHP 개발' 카테고리의 다른 글

XE 애드온(addon)개발하기  (0) 2011.07.28
Selenium 설치 및 사용법  (0) 2011.07.04
PHPUnit 설치  (0) 2011.07.04
XE 개발, Firebug + FirePHP로 디버그하기  (0) 2011.06.30
Xdebug를 이용한 PHP 디버그  (1) 2011.06.29
Posted by 비회원

댓글을 달아 주세요

Tech/iOS 개발2011. 7. 21. 11:39

Xcode 4는 이전 버전과 UI가 완전히 달라져서 힘드네요 orz

전에 EXC_BAD_ACCESS 를 디버깅하는 방법을 포스팅한 적이 있는데, 달라진 UI에 맞추어 다시 설명해보도록 하지요.

Environment 설정이 이제는 Scheme 쪽으로 통합되었습니다. 좌측 상단에 있는 시뮬레이터로 실행할지 실제 장비에서 실행할지 선택하는 부분이 Scheme 선택 UI 입니다.


여기서 Edit Scheme... 을 고릅니다.


그 후 뜨는 대화창에서 좌측의 Run <앱 이름> 항목을 선택합니다. 그리고 Arguments 탭으로 가서 Environment Variables 섹션에 NSZombieEnabled 를 추가해주면 됩니다. 한 번 추가해놓고 필요할 때에만 체크박스에 체크해서 사용하면 됩니다.


Posted by wafe

댓글을 달아 주세요

Tech2011. 7. 19. 15:26

※ Selenium 설치, 실행법은 다음 링크를 참고하세요.

http://xinics.tistory.com/entry/Selenium-설치-및-사용법

   

인터페이스

 

 

1.        작성한 테스트 스크립트가 보여지는 창

2,3,4.    명령어 입력 창. 각각 명령어, 대상, 값

5.         클릭하면 target에 지정된 엘리먼트가 highlight됩니다.

6.        클릭하면 기록 모드로 변하고, 다시 클릭하면 기록을 중지합니다. 기록 모드인 상태로 브라우저(파이어폭스)를 사용하면 실행한 행동들이 기록됩니다.

7.        테스트 실행 버튼.

8.        테스트 결과. 성공한 테스트와 실패한 테스트의 개수를 보여 줍니다.

 

튜토리얼

 

XE에서 게시판에 글을 작성했을 때 최신 댓글 위젯에 새 글이 표시되는 것을 테스트하는 테스트 스크립트를 작성해 보면서 Selenium의 사용법을 배워 보도록 하겠습니다.

튜토리얼에서 사용되거나 자주 쓰이는 명령어/셀렉터는 글 아래 부분에 정리해 두었으니 함께 보세요.

 

글이 하나, 댓글이 하나 있는 상태를 초기 상태라고 가정합시다.

 

Selenium IDE를 켜고 게시판에 접속한 뒤,

 

글 제목을 클릭해 봅시다.

 

Selenium에 open, clickAndWait 커맨드가 입력된 것을 알 수 있습니다. 그런데 clickAndWait의 대상이 글의 제목으로 설정되어 있네요. 글의 제목이 달라져도 사용할 수 있도록 target을 수정해 봅시다.

우선 Selenium의 기록 기능을 끄고,

이전 페이지로 돌아간 다음에 Firebug를 이용해 HTML 구조를 확인합니다. Firebug 콘솔의 화살표 버튼을 누른 상태로 알아볼 위치를 클릭하면 그 부분의 HTML 코드가 보입니다.

 

HTML 코드를 보니 <td class="title"> 안의 <a>태그를 클릭하면 되는 것 같습니다. target을 css=td.title > a로 수정하고 Find 버튼을 눌러 봅시다.

 

우리가 클릭하려고 했던 링크가 노랗게 highlight되는 걸 확인할 수 있습니다. 제대로 선택한 게 맞네요. 그럼 다음으로 넘어갑시다.

 

덧글을 쓰려면 덧글 텍스트 상자를 target으로 지정해야겠죠. Firebug로 다시 한 번 찾아 봅시다.

 

이번엔 <body class="xe_content">를 선택하면 되겠네요. 확인해 봅시다.

 

그럼 이제 댓글을 작성해야겠죠? 커맨드는 type, 값은 '2등!'으로 입력해 봅시다. 작성한 명령을 더블 클릭하면 실행이 됩니다.

 

텍스트 창에 댓글이 제대로 입력되었네요. 명령이 녹색으로 변한 건 오류 없이 실행되었다는 의미입니다.

그럼 이제 마지막으로 댓글 등록 버튼을 누르면 되겠네요. 다시 Selenium의 기록 모드를 켠 다음 댓글 등록 버튼을 클릭해 봅시다.

 

 

댓글이 등록되었고, Selenium에는 clickAndWait css=input[type=submit] 이라고 잘 기록되었네요.

 

자 이제 최신 댓글 페이지로 돌아가서 댓글이 잘 등록되었나 확인해 볼까요?

open 커맨드를 이용해 최신 댓글 페이지 링크로 이동하니

 

 

댓글이 잘 작성되어 있네요. 그럼 이제 테스트를 해 봅시다. 가능한 명령어를 확인하기 위해 2등! 링크에서 오른쪽 버튼을 눌러 봅시다.

 

 

우리는 assertText를 사용할 수 있을 거 같네요. 대신 Target을 좀 손봐야 할 것 같습니다.

 

 

첫 번째 <li>의 <a> 태그니 XPath형태로 //li[1]/a 로 지정하면 되겠네요. 다시 확인해 보고,

 

 

자, 이제 테스트를 작성했으니, 실행해 볼까요? Selenium IDE의 테스트 실행 버튼을 클릭해 봅시다.

 

 

자! 모두 성공했습니다 J

 

 

명령어

 

명령어

설명

Target

Value

예제

open

페이지를 엽니다.

URL

  

open /admin

type

텍스트를 입력합니다.

엘리먼트

텍스트

type uid admin

click

클릭합니다. (페이지가 전환되지 않는 경우 clickAndWait 대신 사용하고 waitFor~ 로 기다리도록 합니다)

엘리먼트

  

click //input[@type='submit']

clickAndWait

클릭하고 페이지가 전환될 때까지 기다립니다. 페이지가 전환되지 않으면 실패합니다.

엘리먼트

  

clickAndWait //input[@type='submit']

select

<select> 태그의 리스트에서 선택합니다.

엘리먼트

select sortkey_text label=날짜 △

pause

지정한 시간 동안 멈춥니다. (밀리초)

시간

  

pause 300

assertText

텍스트를 검증합니다. 텍스트가 다르면 실패합니다.

엘리먼트

텍스트

assertText num_channel 5/6

assertElement

Present

엘리먼트가 있는 지 검증합니다. 엘리먼트가 없으면 실패합니다.

엘리먼트

  

assertElementPresent //tr[2]

assertElement

NotPresent

엘리먼트가 없는 지 검증합니다. 엘리먼트가 있으면 실패합니다.

엘리먼트

  

assertElementNotPresent //tr[2]

assertVisible

엘리먼트가 보이는 상태인지 검증합니다. 엘리먼트가 숨겨져 있다면 실패합니다.

엘리먼트

  

assertVisible newest_comments

assertNotVisible

엘리먼트가 보이지 않는 상태인지 검증합니다. (예: display: none) 엘리먼트가 보이는 상태라면 실패합니다.

엘리먼트

  

assertNotVisible newest_comments

assertConfirmation

confirm()의 메시지를 검증합니다. 해당 메시지를 가진 confirm()이 실행되지 않으면 실패합니다.

메시지

  

assertConfirmation 수정하시겠습니까?

assertAlert

alert()의 메시지를 검증합니다. 해당 메시지를 가진 alert()가 실행되지 않으면 실패합니다.

메시지

  

assertAlert 채널을 생성하였습니다.

waitForText

엘리먼트에 지정한 텍스트가 나타날 때까지 기다립니다. 시간 내에 나타나지 않으면 실패합니다.

엘리먼트

텍스트

waitForText num_channel 5/6

waitForAlert

target에 지정한 alert()가 나타날 때까지 기다립니다. 시간 내에 나타나지 않으면 실패합니다.

메시지

  

waitForAlert 제목을 입력해주세요.

 

대상

Selenium은 대상 지정 방식으로 DOM, CSS, XPath 방식을 지원합니다.

이 글에서는 그 중 CSS, XPath 방식을 예제를 통해 간단히 설명하도록 하겠습니다.

 

튜토리얼에서 사용된 최신 댓글 위젯을 조금 간단하게 수정해 봤습니다.

   

   

   

CSS 셀렉터

Selenium의 target으로 CSS 셀렉터를 이용하기 위해서는 앞에 css= 접두어를 붙여야 합니다. (위의 튜토리얼에 사용된 예가 있으니 확인하세요)

 

엘리먼트

CSS 셀렉터

설명

#title 

id='title'인 것

p#title 

<p> 중 id='title'인 것

div#title_bar #title 

<div id="title_bar">의 자손 중 id='title'인 것

※ 원래는 둘 모두 선택되어야 하나

Selenium은 첫 번째 것만 선택

li.comment a 

<li class='comment'>의 자손인 <a>

li.comment > a 

<li class="comment">의 직계 자식인 <a>

li.comment > a[href='/746'] 

<li class="comment">의 직계 자식인 <a> 중 href='/746'인 것

a[href='/746'] 

<a> 중 href='/746'인 것

li.comment > a[href='/747'] 

<li class="comment">의 직계 자식인 <a> 중 href='/747'인 것

a[href='/747'] 

<a> 중 href='/747'인 것

img#button_hide 

<img> 중 id='button_hide'인 것

img[align=right] 

<img> 중 align='right'인 것

 

XPath 셀렉터

Selenium은 XPath가 기본으로 설정되어 있으니, XPath를 사용하는 경우에는 별도의 접두어를 붙일 필요가 없습니다.

 

엘리먼트

XPath 셀렉터

설명

//*[@id='title']

아무 태그나 id='title'인 것

//p[@id='title']

<p> 중 id='title'인 것

//div[@id='title_bar']/p[@id='title']

<div id="title_bar">의 직계 자식 중 id='title'인 <p>

※ 원래는 둘 모두 선택되어야 하나

Selenium은 첫 번째 것만 선택

//li[@class='comment']//a

<li class="comment">의 자손인 <a>들

//li[@class='comment']/a

<li class="comment">의 직계 자식인 <a>들

//li[@class='comment'][1]//a

<li class="comment"> 중 첫 번째 것의 자손인 <a>

//li[@class='comment'][1]/a 

<li class="comment"> 중 첫 번째 것의 직계 자식인 <a>

//a[@href='/746']

<a> 중 href='/746'인 것

//li[@class='comment'][2]/a

<li class="comment"> 중 두 번째 것의 직계 자식인 <a>

//li[@class='comment'][last()]/a 

<li class="comment"> 중 마지막 것의 직계 자식인 <a>

//a[@href='/747']

<a> 중 href='/747'인 것

//img[@id='button_hide']

<img> 중 id='button_hide'인 것

//img[@align='right']

<img> 중 align='right'인 것

Posted by 비회원

댓글을 달아 주세요

Tech/PHP 개발2011. 7. 4. 14:41

Selenium은 웹 어플리케이션을 위한 테스팅 프레임워크입니다.

   

※ Selenium을 설치하기 전에 PHPUnit을 설치해야 합니다. PHPUnit 의 설치는 이전 블로그 글을 참고하세요.

http://xinics.tistory.com/entry/PHPUnit-설치

   

Selenium 서버 설치 및 실행

  1. http://seleniumhq.org/download/ 에서 Selenium Server를 다운받습니다. 
  2. java -jar 명령으로 다운받은 파일을 실행시킵니다. 끝!

     

Selenium IDE 설치 및 사용

  1. Selenium IDE는 파이어폭스 플러그인으로 제공됩니다.

    http://seleniumhq.org/download/

    에서 Selenium IDE의 최신 버전을 다운받습니다. 

  2. 파이어폭스의 메뉴>부가기능 창에서 톱니바퀴>파일에서 부가 기능 설치 를 선택합니다.

     

  3. 아까 다운받은 파일을 선택하면 설치가 진행됩니다.

    설치가 완료된 후 브라우저를 재시작합니다. 

  4. 테스트를 원하는 페이지에서 메뉴(Alt)>도구>Selenium IDE를 실행하고 IDE 창 우상단에 빨간색 기록 버튼이 눌려 있는 지 확인합니다. (눌려 있지 않으면 눌러서 기록을 시작해 주세요)

     

  5. 브라우저에서 자동화하기 원하는 동작을 실행하면 자동으로 Selenium IDE에 스크립트로 저장됩니다.

     

  6. 작성된 스크립트를 PHPUnit(또는 다른 테스트 프레임워크) 코드로 내보낼 수 있습니다.

     

    생성된 코드입니다.

     

  7. 이제 생성된 코드를 실행하시면 자동으로 테스트가 진행됩니다.

    (Selenium 서버가 실행되고 있어야 합니다)

'Tech > PHP 개발' 카테고리의 다른 글

XE 애드온(addon)개발하기  (0) 2011.07.28
Selenium 설치 및 사용법  (0) 2011.07.04
PHPUnit 설치  (0) 2011.07.04
XE 개발, Firebug + FirePHP로 디버그하기  (0) 2011.06.30
Xdebug를 이용한 PHP 디버그  (1) 2011.06.29
Posted by 비회원

댓글을 달아 주세요