선생님 개발블로그가 하고싶어요.

Attempted to scroll the collection view to an out-of-bounds item (0) when there are only 0 items in section 0.

늦은 업데이트를 진행하였고 시뮬레이터가 15.2가 되었다.

회사 프로젝트를 돌려보던중 시뮬레이터에서 위와 같은 에러가 나면서 종료가 되고있다.

내용만 봐선 "아이템이 0인데 스크롤을 0으로 하려고한다 그러지마 "  라며 친절히 문제되는 부분을 알려주지만

이전에는 됐는데?

참담한 심정으로 콜렉션뷰의 스크롤하는 부분

      self.collectionView.scrollToItem

부분을

if (.count != 0 ) 를 걸어주어 0 이후에 변경될때만 호출해주도록 변경하였다.

동작은 한다

뭔가 미묘한 기분

UI Test의 자동화를 추가 해보려고했다.

Appium을 먼저 시도를 했으나 이상하게도 시뮬레이터에서 어마어마게 지연현상이 일어나고 이러면 그냥 손으로하는게 더빠르겠다 싶어서 포기한적이 있었다. 

무엇이 문제였는지는 아직도 모르겠다.

그리고 이제 다시 Detox로 해보려고 한다.

사실 디톡스의 홈페이지에 방법이 적혀있다

디톡스를 적용해볼 사람은 굳이 이글을 읽지말고

https://wix.github.io/Detox/docs/introduction/getting-started/ 

를 보는게 좋다고 본다.

일단 필요한 도구들을 설치해준다.

npm install -g detox-cli

npm install detox --save-dev

디톡스들을 설치해주고

설정은 나중에 할거다.

그전에 문서에 이러한 항목이 있다.

Tip: Remember to add the node_modules folder to your git ignore file (e.g. .gitignore).

gitignore에 무시항목을 꼭 넣어주라는 말인데 

이걸 안해주면 모든 파일이 깃에 추가되어 특히 라이브러리들이 많은 리엑트 네이티브에서는 깃관리의 헬이 벌어진다.

프로젝트의 루트폴더에 .gitignore 라는 숨긴파일이 있을것이고 

해당 내용을 수정해주면된다.

폴더 자체를 관리 안할수도있고

파일 확장자별로도 관리 안할 수도 있고

여러가지가 있다.

디톡스를 설정하기전  나는 프로젝트가 제대로 시뮬레이터상에서 동작하는지 확인을 해야한다고 생각한다.

그래서 첫단계는

1. npm i 

로 라이브러리 먼저 설치한다.

여러가지 버전 문제로 실제로나는

npm i --force

의 명령어를 프로젝트 루트 폴더에서 실행시켰다.

그 다음은 ios 의 라이브러리를 설치한다.

cd ios && pod install --repo-update

왜 레포지토리의 업데이트도 같이 하는지는 내 프로젝트에서 사용중인 firebase 관련 라이브러리들이 이상하게 버전이 계속 어긋난다.

이럴때 --repo-update 옵션을 붙이니 잘맞게 설치가 되었다.

이제 iOS시뮬레이터로 돌아가는지 테스트를 해본다.

npx react-native run-ios --simulator="iPhone 12 mini"

시뮬레이터 옵션을 붙이는 이유는 맥북의 용량이 적기에 필요한 시뮬레이터만 남기고 죄다 삭제해버렸다.

그래서 기본으로 잡히는 시뮬레이터가 존재하지않는다는 에러를 뱉기에 따로 지정해줬다.

안드로이드는.... 결론만 말하자면 실패했다 이에 대해서는 후반부에 다시 적을 것이다.

iOS가 정상적으로 돌아가기에 이제 설정해줬다

detox init

를 실행한다.

디톡스에대한 설정을 package.json에 설정해줘도 된다고 적혀있지만

난 .detoxrc.json에 설정해줬다.

아래는 공식문서에 적힌 형식이다.

{
  "devices": {
    "simulator": {
      "type": "ios.simulator",
      "device": {
        "type": "iPhone 12 Pro Max"
      }
    }
  },
  "apps": {
    "ios.release": {
      "name": "YourProject",
      "type": "ios.app",
      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/YourProject.app",
      "build": "xcodebuild -project ios/YourProject.xcodeproj -scheme YourProject -sdk iphonesimulator -derivedDataPath ios/build"
    }
  },
  "configurations": {
    "ios.sim.release": {
      "device": "simulator",
      "app": "ios.release"
    }
  }
}

뭔가 많다.

release라고 뒤에 붙은 애들과 따로 debug용으로 나눌수 있어서 이렇게 한것으로 보이나

난 디버그용이면 충분하다고 생각한다.

그래서 나는 아래와 같이 설정했다.

{
    "testRunner": "jest",
    "runnerConfig": "e2e/config.json",
    "skipLegacyWorkersInjection": true,
    "apps": {
      "ios": {
        "name":"<AppName>",
        "type": "ios.app",
        "build": "xcodebuild -workspace ios/<ProjectName>.xcworkspace -scheme <ProjectName> -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/<ProjectName>.app"
      }
    },
    "devices": {
      "simulator": {
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 12 mini"
        }
      },
      "emulator": {
        "type": "android.emulator",
        "device": {
          "avdName": "Pixel_API_28_AOSP"
        }
      }
    },
    "configurations": {
      "ios": {
        "device": "simulator",
        "app": "ios"
      },
      "android": {
        "device": "emulator",
        "app": "android"
      }
    }
  }

ios는 여타 다른 설정이 굳이 필요하지 않다

바로 e2e폴더에 테스트 코드를 넣고 돌리면 된다.

예제용 코드

describe("First UI test1", () => {

  it("should show Step One", async () => {
    await device.launchApp();
    await expect(element(by.text("Step One"))).toBeVisible();
  });

  it("should show Debug", async () => {
    await expect(element(by.text("Debug"))).toBeVisible();
  });

  it("should show \"Learn More", async () => {
    await expect(element(by.text("Learn More"))).toBeVisible();
  });
});

주의점은

if가 아니라 it이라는것과

여러 it이 있지만 하나라도 뭔가 이상하면 테스트가 없다고 에러가 날수 있다는점과

해당 코드들 기본으로 쓰이는 expect나 it , element 등등에 대한 import가 위에 적용될시 에러가 날 수 있다는점이다.

이런한 점때문에 시간을 참 많이 날렸다.

테스트를 돌릴려면 빌드가 필요하다.

detox build --configuration <your configuration name>

를 프로젝트 루트에서 실행해서 에러를 잡으면된다

나는

detox build --c ios

로 돌렸다.

configuration 을 c로도 동작한다는게 공식페이지에선 보이지 않는다.

테스트 코드를 실행하려면

detox test --configuration <your configuration name>

로 실행을 하면 기존 설치된앱이 삭제되고 새로 깔리며 실행된다.

나는

detox test -c ios 

로 돌렸다.

추가적인 팁을 적자면

각 파트별을 컴포넌트화 하여 임포트 시켜 사용할 수 있다.

난 긴 명령어를 간단하게 작성하려고 컴포넌트화를 시켜서 사용했다

다른 라이브러리를 임포트하여 ( axios )네트워크 통신도 넣어볼수있다.

- 어디선가 본 글에는 이러한 네트워크 통신을 테스트코드에 넣지말고 임의로 값을 반환해서 마치 값을 잘 받아온것처럼 하라고 하여서 서버 부담을 없애야한다고 했다. 만 나는 그냥 돌렸다.

iOS - 끝!

다음글은 결국 실패하고 기약을 알 수 없이 미뤄버린 안드로이드에대한 글이다.

최신 시뮬레이터를(또는 기기)에서 테스트를 해보기위해 최신버전 xcode가 필요했다만

구형 라이브러리를 사용중인 리액트 네이티브 프로젝트때문에 최신버전 xcode를 사용하지 못하고 있었다.

최신버전( 12.5.1 )에서 해당 프로젝트를 사용하지 못할까 하여 찾아보고 아래와같은 시도로 성공을 했다.

1 ~ 4번은 flipper의 구형버전때문에 발생하는 문제로 사용안하기에 주석처리

1. Podfile의 use_flipper 부분과 post_install do 항목 주석처리  
2. pod install
3. run 해봤지만 안돌아가서 왓치맨-빌드 파일등 들을 초기화 및 삭제해줌
4. build fail 

아래와 같은 에러 발생

Undefined symbols for architecture x86_64:

  "Swift._ArrayBuffer._copyContents(initializing: Swift.UnsafeMutableBufferPointer<A>) -> (Swift.IndexingIterator<Swift._ArrayBuffer<A>>, Swift.Int)", referenced from:

이전 swift5의 컴파일러가 돌아갔을때의 문제와 비슷해보인다.

1. .xcodeproj파일의 PROJECT항 의 build Settings의 Library Search Paths의 swift-5.0항을 삭제해본다.
2. run ….
3. xcode상에서는 빌드가 성공했다.

code -8번항을 보려고 들어갔다가 그냥 전부 정리해두려고 적습니다.

애플 개발자문서에서는 이름만 나오고 값소개가 안되있길래 그냥 라이브러리쪽 복사해서 보기편하려고 번역기 돌렸습니다.

public enum Code : Int {

    /// Authentication was not successful, because user failed to provide valid credentials.

    // 사용자가 유효한 자격 증명을 제공하지 못했기 때문에 인증에 실패했습니다.

    case authenticationFailed = -1

    /// Authentication was canceled by user (e.g. tapped Cancel button).

    /// 사용자가 인증을 취소했습니다 (예 : 취소 버튼을 탭함).

    case userCancel = -2

    /// Authentication was canceled, because the user tapped the fallback button (Enter Password).

    /// 사용자가 대체 버튼 (암호 입력)을 탭했기 때문에 인증이 취소되었습니다.

    case userFallback = -3

    /// Authentication was canceled by system (e.g. another application went to foreground).

    /// 시스템에서 인증을 취소했습니다 (예 : 다른 애플리케이션이 포 그라운드로 전환됨).

    case systemCancel = -4

    /// Authentication could not start, because passcode is not set on the device.

    /// 기기에 비밀번호가 설정되어 있지 않아 인증을 시작할 수 없습니다.

    case passcodeNotSet = -5

    /// Authentication could not start, because Touch ID is not available on the device.

    /// 장치에서 Touch ID를 사용할 수 없어 인증을 시작할 수 없습니다.

    @available(iOS, introduced: 8.0, deprecated: 11.0, message: "use LAErrorBiometryNotAvailable")

    case touchIDNotAvailable = -6

    /// Authentication could not start, because Touch ID has no enrolled fingers.

    /// Touch ID에 등록 된 손가락이 없어 인증을 시작할 수 없습니다.

    @available(iOS, introduced: 8.0, deprecated: 11.0, message: "use LAErrorBiometryNotEnrolled")

    case touchIDNotEnrolled = -7

    /// Authentication was not successful, because there were too many failed Touch ID attempts and

    /// Touch ID is now locked. Passcode is required to unlock Touch ID, e.g. evaluating

    /// LAPolicyDeviceOwnerAuthenticationWithBiometrics will ask for passcode as a prerequisite.

    @available(iOS, introduced: 9.0, deprecated: 11.0, message: "use LAErrorBiometryLockout")

    /// 실패한 Touch ID 시도가 너무 많았 기 때문에 인증에 실패했습니다.

    /// 이제 Touch ID가 잠겨 있습니다. Touch ID를 잠금 해제하려면 암호가 필요합니다. 평가

    /// LAPolicyDeviceOwnerAuthenticationWithBiometrics는 전제 조건으로 암호를 요청합니다.

    case touchIDLockout = -8

    /// Authentication was canceled by application (e.g. invalidate was called while

    /// authentication was in progress).

    /// 인증이 애플리케이션에 의해 취소되었습니다 (예 : invalidate가 호출되는 동안

    /// 인증이 진행 중입니다)

    @available(iOS 9.0, *)

    case appCancel = -9

    /// LAContext passed to this call has been previously invalidated.

    ///이 호출에 전달 된 LAContext는 이전에 무효화되었습니다.

        @available(iOS 9.0, *)

    case invalidContext = -10

/// 장치에서 생체 측정을 사용할 수 없기 때문에 인증을 시작할 수 없습니다.

 @available (iOS 11.0, *)

 public static var biometryNotAvailable : LAError.Code {get}

 /// 생체 측정에 등록 된 ID가 없기 때문에 인증을 시작할 수 없습니다.

 @available (iOS 11.0, *)

 public static var biometryNotEnrolled : LAError.Code {get}

 /// 실패한 생체 측정 시도가 너무 많았 기 때문에 인증에 실패했습니다.

 /// 이제 생체 측정이 잠겨 있습니다. 생체 측정을 잠금 해제하려면 암호가 필요합니다. 평가

 /// LAPolicyDeviceOwnerAuthenticationWithBiometrics는 전제 조건으로 암호를 요청합니다.

 @available (iOS 11.0, *)

 public static var biometryLockout : LAError.Code {get}

 /// 금지 된 UI를 표시해야하므로 인증에 실패했습니다.

 /// interactionNotAllowed 속성을 사용합니다.

 @available (iOS 8.0, *)

 case notInteractive = -1004

}

1편 : https://wiwi-pe.tistory.com/34

1편에 이어 드디어 만들기를 시작할겁니다.

1편에 이야기를 안했지만 이 튜토리얼의 대상은 한번도 코딩을 해본적이 없는자가 아닌 타 언어나 오브젝티브C로 이미 조금은 해본사람들을 대상으로합니다. 이 튜토리얼은 프로그래밍 입문용으로 좋지않습니다.

추가로 이 앱은 19년 1월에 발표한 아이폰 사용자의 iOS 점유을 90% 차지한 11.0을 최소 지원하도록 할 겁니다.

18년도 iOS 버전별 점유율 : https://wiwi-pe.tistory.com/28

1편에 준비물로 적은 xcode를 다운로드, 설치를 완료한 상태로 시작합니다.

프로젝트화면은 이미 설정을 몇가지를 지정해놨기에 실제 이글을 보고 처음 여시는분들과 조금 다를 수 있습니다.

xcode를 실행을 하면 프로젝트 생성이나 기존 있던 프로젝트는 여는 창이뜨게 됩니다.

이상태에서 하얀 테두리가 있는 버튼,

"Create a new Xcode project" 를 눌러주세요.

참고로 사진에서는 우측칸은 회색으로 덮여있습니다만. 원래는 이전 작업했던 프로젝트를 보여줍니다. 조금 문제가 될 수 도 있어 회색상자로 가려놨습니다. 이 이후 사진들도 문제가 될것같은 부분은 회색상자로 가리겠습니다.

이제 xcode에서 무엇을 만들지를 선택해줘야합니다.

우리는 iOS 에 Single View App을 만들겁니다.

사진처럼 iOS항목에 Single View App을 선택해주고 Next버튼을 눌러줍시다

Product Name 칸에는 저희가 할 프로젝트의 이름을 넣어주세요

저는 Tutorial1이라는 이름으로 시작하겠습니다.

Team항목은 잠시만 뒤에서 설명하고 Organization Name에는 저희는 개인 계정으로 만들기에 팀명(이름)으로 그대로 넣어져있거나 넣으시면됩니다.

Organiztion Identifier에는 이제 앞으로 계정에 속하게될 이 앱의 기본적인 ID가 되기에 적당히 Url형식에 맞춰서 정해줍시다.

참고로 주소창에 쓰는 순서그대로가 아닌 역순으로 작성을 해야합니다.

Bundle Identifier 에는 위에서 작성한 Organiztion Identifier과 프로젝트 이름이 합쳐져서 완성이되어 이앱의 ID가 완성됩니다

Language는 Swift로 선택해주시고

User Interface는 Storyboard로 선택해주세요.

이 튜토리얼은 Storyboard기반으로 작성할겁니다.

Storyboard는 각 앱의 기본적인 버튼이나 텍스트를 드롭다운으로 위치지정해서 만들 수 있기에 매우 편리합니다.

참고로 Storyboard 말고 선택 할 수 있는 SwiftUI은 ios13이상에서만 지원하기에 ios11 부터 지원하려고 하는 이 프로젝트에는 사용하지 못합니다.

참고로 Storyboard없이 오로지 코드로만 앱을 작성할 수 도 있지만 튜토리얼에서 다루지 않을겁니다.

이제 Team에 이야기를 해볼건데

Team에는 자신의 계정이 이미 선택되어있거나 선택할 수 있도록 추가가 되어있을거에요.

만약 없을경우

"xcode" 메뉴의 

"Preferences..." 항목을 들어가서

"Accounts" 메뉴에서 추가를 해주세요

이제 프로젝트 화면이 보일겁니다.

위 의 하얀 동그라미친 부분을 저랑 같은 버전의 xcode를 설치하셨다면 iOS13으로 선택되어 있을건데 위 사진처럼 11.0으로 변경해주세요

첫 프로젝트 생성강의라면 각 부분별 설명이 들어가야겠지만 이 튜토리얼에서는 그런 부분은 생략하도록 하겠습니다.

위의 사진의 가장 위의 5개의 버튼중 오른쪽영역을 뜻하는 버튼위에 마우스포인터를 가르키고 가만이 있으면 사진과같이 마우스포인터 하단에 설명이 뜨게 됩니다. 위 사진에서는 우측에 있는 영역을 Inspectors라고 부르는데 이 버튼은 이를 숨기거나 보이게하는 버튼이다 라고 설명으로부터 유추 할 수 있듯이 조금 가지고 놀면서 설명을 읽어나가시다보면 화면 구성에대해서는 대부분 아시게 될 거라 믿기에 생략했습니다.

이제 좌측의 하얀동그라미의 적어있는 파란 아이콘 과 Tutorial1이라 적혀있는부분을 누르시면 가운데 영역이 위의 사진처럼 바뀌게 됩니다

여기서 위사진처럼 보라색동그라미 부분을 iOS11로 바꿔주세요.

그리고 이제 키보드의 command + R 을 누르시면 빌드를 시작하는데

Build Fail이라 뜨면서 

이와 같이 xcode창 상단에 

Tutorial1 | Build Tutorial1 : Faild Today ~~ 라고 뜨고 옆에 빨간 느낌표가 붙어있을겁니다.

빨간 느낌표를 마우스로 눌러보면

화면 좌측 영역이 빌드가 어떤 부분때문에 실패했는지를 알려줍니다.

대강 읽어봐도 iOS13부터 지원되는 함수들이니 사용하지 못한다 라고 알 수 있을건데

이는 최초 프로젝트가 iOS13으로 지정되어 자동생성되었는데 저희가 iOS11.0으로 타겟을 낮췄기에 발생한 오류입니다. 

이제 이러한 자동생성된 부분을 삭제하여 정상적으로 빌드되도록 해보겠습니다.

Command + 1 키를 누르거나 실행버튼 아래의 폴더버튼(현재 파란색으로 선택되어있는 폴더 아이콘)을 누르면 가장 처음 프로젝트를 실행했을때의 좌측영역화면으로 돌아가게 됩니다.

여기서

자동생성된 파일중 SceneDelegate.swift를 선택하고 키보드의 Delete키를 눌러주세요.

그러면 이러한 창이 뜨는데 여기서는 Move to Trash로 파일자체를 삭제해줍시다.

그후 info.plist를 선택하셔서 들어간후 내부의 Application Scene Manifest를 선택하시고 키보드의 Delete키를 눌러주세요.

이제 마지막입니다!

좌측영역에서 AppDelegate.swift를 선택하시고 위 사진처럼

class AppDeleagte 아래에 var window: UIWindow?를 추가해주시고 

맨위에 있던 func 의 가로가 닫아지는부분 의 뒷부분에 있는 항목을 다 지워주세요.

그럼 최종적으로 남아있어야될 부분은 아래와 같습니다.

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return true
    }
}

위 사진의 보라색 동그라미 안에 있는부분, xcode의 실행하는 대상을 선택하는(Set the active scheme) 부분을 마우스로 눌러주세요

위의 사진과같이 기본적으로 설치되어있는 앱을 실행할 수 있는 기기들의 목록이 나오게됩니다.

여기서 iPhone 11을 선택해주세요.

그후 키보드의 command + R 을 누르시거나 xcode 상단의 재생버튼을 눌러 빌드를 해줍시다.

그리고 잠시기다리시면

이전에는 Build Fail이라고 뜨던 메시지가

이젠 Build Successes 라고 뜨면서 

위의 사진과같은 시뮬레이터가 켜지게됩니다.

위사진은 검은색화면이나 이는 다크모드때문에 기본바탕색이 검은색이 된것이지 하얀화면으로 뜰수도 있습니다.

이제 앱을 만들기위해 기본적은 세팅은 완료했습니다!

다음 포스트에서 이제 본격적으로 앱 만들기를 시작해봅시다