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

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36

저번 시간까지 무사히 마치고 이번 포스트까지 오셧다는 가정하에 시작해보겠습니다.

이번에는 저번 3편에서 있던 문제인 정렬에 대한 문제를 해결할겁니다.

어제는 주로 확인했던 창이 우측의 어트리부트 인스펙터 였는데

오늘은 사이즈 인스펙터입니다

아래의 사진과같은곳이죠. 정렬과 크기에 대한 내용을 담고있어서 그런가 아이콘부터가 자모양이죠?

위 사진은 Label을 선택한후 오른쪽영역인 익스펙터즈화면에서 6번째아이콘인 사이즈 인스펙터화면입니다

x와 y의 좌표부터 사이즈 그리고 다룰 레이어아웃에 관한 정보를 보여주고 추가 수정,삭제를 할수 있는 공간입니다.

어제까지의 프로젝트를 그대로 시뮬레이터만 바꿔서 실행해봅시다!

지원할수 있는 가장 작은 사이즈를 iphone xe라 하면 시뮬레이터를 iphone xe로 변경하고 실행해보세요

이런...

저희가 원래 원했던 모양이 아닙니다.

오늘은 이 부분을 해결할것이고, 이에대한 해결이 포스트위에서 말씀드린 사이즈 인스펙터창을 확인하면서 진행될겁니다.

우선 가장위에있는 라벨먼저 고쳐보죠.

라벨을 잘보시면 원래 의도했던 소수점 내용이 화면에 가려서 안보여요

라벨자체도 가운데에있는게 아니라 치우쳐있군요

처음에 라벨을 사이즈및 위치를 선정할때 아이폰11 사이즈를 보면서 했기에 사실 앞쪽(왼쪽) 여백에 대한 문제는 아이폰11사이즈의 화면의 시작점입니다

우리는 화면크기가 바뀌어도 일정한 비율을 유지했으면 좋겠는데

이를 지정하는게 바로 앵커입니다

앵커는 다른 UI쪽을 다루는 내용을 해보신분들은 아시겠지만 UI를 다루지않았으면 갑자기 무슨이야기야 라고 하실수 있으니 별로 좋은 단어는 아니겠네요.

앞으로 이를 Auto Layout, 이라 할것이고 이를위해 추가해야할 애들을 Constraint라 할겁니다.

물론 이를 코드로 다루다보면 앵커라는 단어를 쓰지만 이 튜토리얼에서는 코드로 오토레이아웃을 다루는일을 하지않을겁니다.

이런 단어를 처음 듣는 분은 그냥 아 이런게 있구나 정도로만 생각해두시고 스토리보드창에서 손쉽게 마우스 몇번 클릭으로 추가할 수 있다는것만큼은 기억해주세요

라벨을 스토리보드(Main.storyboard를 선택하고 중앙에 위치한 화면)에서 선택하고 아래의 사진에있는 버튼을 눌러주세요

중앙영역 하단에 "├ ⎕ ┤" 라고적힌 버튼 부분입니다

이 버튼을 누르면 사지너럼 말풍선이 뜨는데 여기에서 상단(앞으로는 탑이라 부르겠습니다) 좌측(앞으로는 리딩이라...) 우측( ... 트레일링 ...) 하단(... 바텀 ...)의 띄여지는 위치와 높이(Height) 너비(Width)를 고정하거나 가로세로에 대한 비율을 고정(Aspect Ratio) 시키는등의 제약을 걸수 있습니다

Contraint(제약,제한,통제)의 단어뜻처럼말이죠

그러면 아래 사진처럼 라벨에 대한 Constraint를 걸어주세요

조금 특이하게 탑과 바텀 그리고 높이만 지정해줬어요 그리고 하단의 Add 3 Constraints 버튼을 눌러주시면됩니다

하단의 사진을 보면

Height Equals: 119.5

Bottom Space to: Table View

Equals: 16

Align Top to: Safe Area

Equals: 16

이  추가가 된것을 확인할 수 있습니다 방금 추가한거에요

추가로 이야기하자면 버튼의 Add라는 이름답게 만약 창이 닫아지고 다시 같은 탑이나 바텀같은 내역을 지정해주면 그것또한 추가가되지 변경이 되지않습니다 변경하시려면 아래사진의 사이즈인스펙터에서  변경할 내역을 더블클릭하셔서 수정하시면되요

Height Equals: 119.5 를 더블클릭해서 수정모드로 들어가는 화면은 바로 아래화면입니다

First Item 과 Relation 그리고 Constraint 변경으로 이 높이제약조건을 변경할수 있어요

Priority는 이 제약조건이 다른 제약조건에의해 지켜지지못할거같을때, 혹은 변경이되어야할때 누구를 우선순위로 잡을것이냐를 지정해주는건데 이 내용은 다루지 않겠습니다.

위의 높이 제약조건 변경화면은 높이이기에 Second Item항목이 없는데

위치(탑,바텀,리딩,트레일링)제약조건일 경우 A가 B로부터 16떨어져야한다 라는같은 지정을위해 Second ITEM 항목이 추가됩니다

라벨에대한 제약조건을 더욱줘봅시다.

지금은 탑, 높이 바텀만 줬으니 리딩,트레일링을 줘야할것같지만 저는 화면이 어찌됐던 이 내용이 가운데에 있었으면 좋겠습니다

이럴때 추가하는게 아래 사진에 나와있는 Alignment Constraint 입니다 가운데 정렬을 원하므로 Horizontal in Container를 체크하고 Add를 눌러줍시다

Horizontal과 Vertical은 영단어 그대로 가로이냐 세로이냐입니다 그외 애들은 직접 예를 보여드려야 이해가 되실듯하지만 이 튜토리얼에서는 다루지않기에 넘어갑니다.

그렇게 라벨에 들어갈 제약조건(constraint)를 다 추가해줬지만 스토리보드화면에서는 빨간색으로 테두리와 스토리보드 영역의 좌측상단에는 빨간불(위 사진의 하얀색 실선테두리 상자) 이 들어와있습니다.

이를 눌러보면 어떤 제약조건이 문제가 생겼는지 알수 있습니다 한번 들어가보세요

내용을 보면 라벨 아래에있는 애들에 대한 제약조건이 없어서 발생하는 문제입니다.

여기에있는 각 항목의 빨간불을 눌러 이 xcode가 제안하는 Constraint를 넣거나 삭제하거나 수정할 수 있지만 이는 권장하지 않습니다.

그럼 테이블뷰와 아래 버튼들에 대한 제약조건을 마져 걸어봅시다.

테이블뷰에 넣을 제약조건은 다음과같습니다

잘 보시면 탑에 대한 제약조건을 걸지않았는데 이는 우측영역 사이즈인스펙터에 보면 이 테이블뷰위에 있을애인 라벨이 바텀 제약조건으로 이미 이 테이블뷰의 탑 제약조건이 추가가 되어있는걸(Top Space to: 00:00.0) 확인할 수 있고 이와 겹쳐지지않게 탑 제약조건은 추가하지 않는것입니다. 

추가하고나면 90높이로 변경되어 원래 원하던 모양이 아님을 알 수 있습니다. 이는 사실 살짝 변경을 해주기 위해 우선적으로 추가해준거에요. 

위 사진에 있는 Height Equals: 90 을 더블클릭해 수정페이지로 들어가줍시다.

그리고 Relation의 Equal 부분을 아래사진처럼 Greater Than or Equal로 변경해줍시다

이 Relation의 내용을 그대로 읽어보면 감이 잡히실건데

다른 제약조건이나 화면크기 변화로 인해 크기가 최소 90이상은 유지해주세요라고 제약을 건겁니다.

이 90은 나중에 추가해줄 랩타임 기록의 한줄정도 표시해줄 사이즈에요.

그래서 화면이 최소로 작아지면서 위(라벨) 아래(버튼)의 위치에 눌려도 최소 90은 보장해줘라! 라고 제약조건을 건겁니다.

그리고 이제 버튼들을 손봐줘야하는데

새로운 오브젝트를, Stack View 라는녀석을 추가해줄겁니다.

스택은 영어사전(파파고)에 검색보면 

• 1.(깔끔하게 정돈하여) 쌓다; 쌓이다, 포개지다[VN] to stack boxes책을 포개다
• 2.(어떤 곳에 물건을 쌓아서) 채우다

라고 뜨는데 이는 각 오브젝트들을 차곡차곡 쌓아 예쁘게 표시해주려고 할때 쓰는 오브젝트입니다.

버튼을 이 스택뷰에 넣어서 깔끔하게 보여주기위해서 사용할거에요

그럼 버튼들을 드래그로 전부다 한번에 선택해준뒤 아래의 사진에있는 버튼을 누른후 뜨는 말풍선에서 Stack View를 선택해줍시다

저처럼 스택뷰를 추가하신분은 스토리보드화면에 버튼들이 아래와같이 묶혀있게됩니다.

이제 이 스택뷰의 설정을 조금 바꿀거게요. 스토리보드에서 스택뷰를 선택하시고(스택뷰안에 있는 버튼이 아닙니다) 우측 인스펙터즈화면을

5번째아이콘인 어트리뷰트 인스펙터로 들어가주세요,

여기서, 이 스택뷰에서 주로 다루는 부분이 바로 

Axis 와 Alignment, Distrubution, Spacing 입니다.

이 속성들에대한 설명은 애플은 이렇게 적어놨습니다.

There are a number of properties that define how the stack view lays out its content.

• The axis property determines the stack’s orientation, either vertically or horizontally.

• The distribution property determines the layout of the arranged views along the stack’s axis.

• The alignment property determines the layout of the arranged views perpendicular to the stack’s axis.

• The spacing property determines the minimum spacing between arranged views.

• The isBaselineRelativeArrangement property determines whether the vertical spacing between views is measured from the baselines.

• The isLayoutMarginsRelativeArrangement property determines whether the stack view lays out its arranged views relative to its layout margins.

요약하고 저딱 4개만 설명하자면

Asis는 이 스택뷰 가로로 쌓이냐 세로로쌓이냐를 선택하는것이고,

Distribution은 Asis에서 선택한 방향의 레이아웃을

Alignment는 이 축의 수직에대한 레이아웃을

Spcaing 안의 녀석들의 최소간격을 결정한다. 입니다 ㅎ

이제 이 속성을 위사진에서 아래사진 처럼 변경해주세요.

그러면 아래와같이 버튼을 묶었던 영여기 작아지게됩니다.

버튼은 스택뷰 좌우로 꽉 차고,  다 같은 높이로 그리고 버튼간 간격은 16 으로 지정한거에요.

이제 이 스택뷰의 Constraints를 추가해줍시다.

스택뷰를 선택하시고( 스택뷰안에 있는 버튼이 아닙니다)  "├ ⎕ ┤" 버튼( Add new Constraints) 를 클릭후 

아래 사진과 같이 추가해주세요

그럼 화면이 아래와같이 나올겁니다.

이제 첫 이 튜토리얼의 첫 포스트에서 보여드려던 앱의 모습과 많이 닮아졌네요!

이제 그럼 아까 문제가 되었던 아이폰se화면으로 실행해봅시다.

xcode상단의 시뮬레이터를 iPhone SE로 변경해주고 실행해주세요!

이런...

타임을 표시해줄 라벨이 양옆이 조금씩 벗어났습니다.

이건 라벨의 크기는 그대로 유지되고 라벨의 가운데는 화면의 가운데로 가져갔으나 양옆에 대한 제약조건이 없기에 발생한문제인데요.

이를 리딩, 트레일링을 넣어줬으면 밖으로 빠져나가지는 않았을겁니다( 대신 라벨의 끝부분이 ... 으로 짤렸을겁니다)

이에 대한 문제는 글자 크기를 줄여주거나 리딩 트레일링을 주면서 자동으로 글자가 작아지게끔 설정을 해주면되는데

우리는 이렇게 주지않을것이고 사실 저 라벨은 임시적으로 달아둔거라 다른모양으로 변경할것입니다.

튜토리얼 1편의 앱에서처럼 변경할거 거든요!

이에대한것은 다음편에서 다루겠습니다

그럼 다음편에서 봐요~

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

저번 2편까지 무사히 끝내셧다면 앱이 시뮬레이터로 무사히 실행이 되었으나

앱에 아무것도 없었을겁니다.

이제 앱에 채워넣을 차례입니다.

1편에서 본 만들려고하는 앱의 화면을 다시한번 보자면

위 에서 부터 차례대로

시간을 표시하는 부분 

랩타임을 표시하는 부분

그리고

시작 버튼

랩타임 체크 버튼

정지 버튼

초기화 버튼

이런식으로

크게 

시간표시, 랩타임표시, 버튼부분 세부분으로 나눠져 있습니다.

우리는 이 화면을 구성하기위해 애플에서 제공해주는 오브젝트들로 붙여넣을꺼에요

설명은 뒤에서 하고 우선 넣을것들 나열하자면

UILabel

UITableView

UIButton

이렇게 세종류와 

추가로

UITableViewCell 이라는 녀석이 이 앱화면을 구성하게 됩니다.

화면 구성을 시작하기전에 에디터에 보여지는 방식을 저랑 맞추겠습니다.

에디터메뉴에 아래 사진처럼 체크해주세요!

다시 앱화면 구성에 대해서 이야기하겠습니다.

우선 UILabel에 대해 이야기하자면

U는 내버려두고 Label을 사전(파파고)에 검색하면 

아래와 같이 나옵니다

label[ˈleɪbl]명사

• 1.(종이 등에 물건에 대한 정보를 적어 붙여 놓은) 표
• 2.(사람물건의 성격 등을 묘사하는) 딱지
• 3.음반사, 레이블

다들 아시다 싶이 그냥 라벨이에요

라벨을 라벨이라 부르지못하고 레이블이라 불러야한다지만 저는 앞으로도 라벨로 부르겠습니다........

이 UILabel은 애플이 이렇게 설명하고있습니다.

A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.

텍스트를 포함하고, 뭐 각종 속성들을 넣어 제어할 수 있다고하네요

라벨이라는 이름답게 글씨를 표시해주는애 입니다. Text를 표시해주는애인데 

이 앱에서는 다루지않을 다른 텍스트를 표시해주는 녀석들도 있습니다.

TableView는 다음에 설명을 할것이고 버튼을 이야기하자면

누구나 다 예상하시듯이 버튼입니다

애플은 이 버튼 오브젝트를 아래와같이 설명해주고 있어요

You can set the title, image, and other appearance properties of a button. In addition, you can specify a different appearance for each button state.

제목, 이미지 기타 속성을 넣고 각 상태따라 다른게 설정을 해줄수있다!

이 상태가 매우 중요합니다.

각 오브젝트들에 대해 자세히 다루지는 않을테니 더 궁굼하신분은 애플디펠로퍼의 도큐먼트 페이지들을 봐주세요

그럼 

우선은 라벨을 넣어서 실행해보죠

프로젝트화면의 좌측의 프로젝트 네비게이션에서 Main.storyboard를 누르시면 가운데 화면이 마치 아이폰 시뮬레이터같은 모양으로 변경됩니다.

이 하얀 녀석을 마우스로 클릭하면 네비게이션 옆에 있는, Structure Area의 View가 선택되었다고 하일라이트가 될겁니다

앞으로 이 뷰 안에 표시할애들을 넣어줄거에요.

뷰안에는 이미 Safe Area가 속해있는데

이는 실제적으로 있는 것이 아니라 실제 화면만 보여질곳, 상단 스테이터스바와 하단 홈바를 제외하고 있는 가운데에 남겨진 영역에 대해 알려주기위한 일종의 가이드라인입니다

앞으로 이 가이드 라인에 대한 도움을 많이 받을거에요

위 사진의 보라색 실선부분, + 버튼 또는 키보드로 command + shift + L 을 누르면 아래와같은 창이 뜹니다

위에 사진처럼 우측에 설명칸이 나와 있을 수도 있고 없을수 도 있습니다.

설명창을 펼치거나 혹은 닫고싶으시면 팝업창 상단의 검색바 옆의 두번째 창모양 버튼을 누르시면되요

이제 창에서 보이는 Label을 아까 선택했던 뷰로 드래그 하고 드롭 해주세요

그럼 아래와 같이 드롭한 장소에 라벨이 하나 생겼을겁니다.

그리고 이 라벨을 더블클릭하면 이 텍스트를 수정할 수 있게됩니다!

아래 사진처럼요

그리고 옆의 

인스펙터영역이 아래와 같이 5번째가 선택되어 딱봐도 이 라벨에 대한 설정을 변경 할 수 있는 창이구나! 라고 알만하게 여러 속성을이 있습니다

이 어트리뷰트 인스펙터창에서 텍스트를 수정하거나, 색상, 정렬 크기 등등 많은걸 수정 할 수 있어요

스토리보드를 통해 작업을하면 기본적으로 이런식으로 뷰에 필요한 오브젝트를 넣고 설정을해주는 식으로 화면을 구성하게 됩니다.

이제 아까 라벨을 추가한것처럼

라이브러리버튼(+버튼)을 눌러서 저희가 사용하려하는

테이블뷰, 버튼들을 배치해줍시다

추가로 넣으려는 오브젝트들은 아래와같습니다 

항목을 잘 선택하셔서 드래그 앤 드롭해주세요

아래와같이요!

그리고 이제 

각각의 오브젝트들을 선택하시면 각 사각형이 크기가 수정가능하게 변하는데 이를 잘 조절하여 최대한 만드려는 앱과 비슷하게 만들어줍시다.

이제 글자 크기와 색상을 맞춰줄꺼에요.

우선 라벨의 속성은 아래와같이 설정해줄겁니다

라벨을 선택하고

우측의 인스펙터즈 창을 어트리뷰트 인스펙터로 변경되는것을 확인한후

font 는 system 100.0

Alignment 는 가운데로 설정합니다

그후 버튼의 색상과 글자크기를 변경할겁니다

우선 Stop버튼을 눌러서 아래와같이 변경해줍시다

그러면 아래와같이 스톱버튼이 변했을거에요.

나머지 버튼들도 만드려고하는 앱의 화면처럼 변경해줍시다.

Start Button , Check Button

font를 30포인트로 올리고 변경없음

Reset Button

font를 30포인트로 올리고 Text Color 를 Label Color로 설정

아래의 사진과 같이되면 됩니다

뭔가 조금 정렬이 안맞고 크기도 잘안맞는거 같고 그렇죠?

그 부분은 다음 포스트에서 다루겠습니다!

오늘 우선한것을 command + r 키 또는 실행버튼으로 시뮬레이터로 돌려보세요

아래와같이 나온다면 이번 튜토리얼도 성공입니다

그럼 다음 포스트에서 봐요~

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 라고 뜨면서 

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

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

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

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

이제 막 iOS 개발에 손을 대고자 하는 분들을 위해 아래의 영상에서 나오는 스톱워치를 만드는 튜토리얼을 시작해보려고합니다.

일단 개발을 위해 필요한 준비물은

xcode11이 설치되는 macOS 10.14.4 버전 이상의 맥PC,

그리고 애플 계정입니다.

튜토리얼에서 만들앱은 xcode에서 제공해주는 시뮬레이터로만 돌릴것이고 개발자계정(유료)은 없어도 학습이 가능합니다.

단, 학습용이라고 할지라도 애플계정은 필요해요

맥을 구입하셨고, 처음 사용자세팅을 완료하셨다면 분명 다들 애플 계정이 있을꺼라 생각됩니다.

macOS 10.14.4 이상으로 제한한 이유는

swift5의 컴파일러를 사용하기 위해서입니다.

실제로는 그 이하 버전이라도 개발은 가능해요

그리고 위에서 말씀드린 실행영상입니다.

이 영상은 시뮬레이터(iphone11, ios13)의 화면이에요.

기본, 라이트 모드에서의 동작화면 

다크 모드 화면

우선 위에 영상에서 나오는 앱의 기능을 정의해야합니다.

1. 분,초, 1/10초의 시간 표시가 되어야합니다. 이는 물론 스톱워치 기능을 시작하면 실시간으로 시간이 표시되어야하죠.

2.  랩타임을 기록하고싶습니다. 스톱워치면 당연히 있어야겠죠?

3. 언제든 스톱워치를 처음상태로 돌아가는 리셋기능도 만들어주세요!

4. 요즘 ios13에는 다크모드라고 검은색버전도 있던데 지원가능하게해주세요!

그렇게

요청사항은 크게 4가지가 되겠습니다.

그럼 다음 포스트는 프로젝트를 만드는것으로 만나뵙겠습니다 ㅎ

'Could not instantiate class named _UITextLayoutView because no class named _UITextLayoutView was found;

라는 오류 메시지가 뜨면서 앱이 튕긴다.

https://stackoverflow.com/questions/58657087/after-upgrading-to-xcode-11-2-from-xcode-11-1-app-crashes-due-to-uitextlayoutv

에서 해당 문제 상황에 대한 해결책이 제시되었다

import UIKit

@objc
class UITextViewWorkaround : NSObject {

    static func executeWorkaround() {
        if #available(iOS 13.2, *) {
        } else {
            let className = "_UITextLayoutView"
            let theClass = objc_getClass(className)
            if theClass == nil {
                let classPair: AnyClass? = objc_allocateClassPair(UIView.self, className, 0)
                objc_registerClassPair(classPair!)
            }
        }
    }

}

해당 클래스를 작성한후

Appdelegate 에 application( didFinishLaunchingWithOptions ) 항목에서 

executeWorkaround() 를 실행시켜주면 이상없이 동작한다!

추가로 xcode 업데이트로 해당문제는 해결될것으로 보인다.

우선은 추가...

모달형식을꽤나 자주 쓰는 앱인데 ( present() )

모달을 띄우면 기존엔 풀스크린으로 깔끔히 보이던게 ios13에서는 상단에 이상한 모양의 카드? 형식처럼 모달이 표시된다.

멘붕상태에 빠지고 구글신님께 문의를해보니

"""

iOS 13.0부터 iOS에서는 UIModalPresentationAutomatic이 기본값이고, 이전 버전에서는 UIModalPresentationFullScreen입니다.

기본적으로 UIViewController는 UIModalPresentationAutomatic을 UIModalPresentationPageSheet로 해석하지만 다른 시스템 제공보기 컨트롤러는 UIModalPresentationAutomatic을 다른 구체적인 프리젠 테이션 스타일로 해석 할 수 있습니다.

"""

라고한다.

그리하여.

.modalPresentationStyle 을 풀스크린으로 변경해주면 

ios13에서도 정상적으로 뜬다.

물론 이것만으로 모든게 정상적으로 돌아가는게 아니였다.......

이유는 모르겠지만 컨테이너뷰로 만든애의 옆구리가 빈다....................

너네 왜그러니 ㅠㅠ

참고로 옆구리가 비어있는 문제는 ios13 xr 시뮬레이터 이상에서만 나온다.

기존 타겟으로 삼은 기기 6s에선 ios13으로도 문제없이 프린트가 된다.

도대체 뭐가 문제였을까

ios12로 돌리던 xr에선 문제없이 보이건만 슬플따름

이거에대한 문제가 해결되면 나중에 다시 관련내용으로 글을 작성할 예정이다.

==========================================================================

추가

옆구리가 비는 문제는 몇몇의 기기에서만 발생하는문제였다.

임시적으로

viewWillLayoutSubviews 에서 크기와 위치를 재설정해줘서 땜빵해놨다.

이 이후에 문제가 뭔지 발견하면 수정할 예정.

자바스크림트는 다뤄본적도 없는 내가 하이브리드 앱을 위해 리액트 네이티브를 공부하기 시작했습니다.

공부하던 도중 자주보이는 이 연산자 ...

말줄임표 같이 생긴 이 점세개에 무슨의미가 있길래 이리도 자주 쓰이나 궁굼증만 넘쳐나고 있었습니다.

제목 그대로의 스택오버플로우의 답변에는 

https://stackoverflow.com/questions/40124680/what-does-in-react-native-mean

-답변

이건 스프레드 구문이라 부른다!

연속되는 배열이나 여러 요소가 담긴 녀석을 사용해 확장시킬때 써!

--

라고 하는데 도저히 잘 감이 안잡힌다.

예시를 볼때는 오로지 전부 배열뿐인데 

배열에서만 사용되는거면 이해가 되긴하는데..

내가 보는 튜토리얼 강좌에는 

플랫폼 선택에 따라 다른 설정을 해줄때 아래의 함수를 쓴다

...Platform.select()

그놈의 점세개...

...

...

아직도 이 점세개의 의미가 잘 파악되지않는다.

이번 프로젝트에서는 데이터가 날짜에 대한 항목이 여러군데에서 많이 쓰여

기본 타입의 확장으로 편리성을 높여봤습니다.

날짜 형식을 잘 파싱해서 Datecomponents에 넣어서 Date값을 반환해도 좋지만

Dateformat을 활용해 바꿔봤습니다.

extension String {
    func toDate() -> Date? { //"yyyy-MM-dd HH:mm:ss"
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        dateFormatter.timeZone = TimeZone(identifier: "UTC")
        if let date = dateFormatter.date(from: self) {
            return date
        } else {
            return nil
        }
    }
}

extension Date {
    func toString() -> String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        dateFormatter.timeZone = TimeZone(identifier: "UTC")
        return dateFormatter.string(from: self)
    }
}

따로 함수로 빼서 사용 하시려면 self 자리에 해당하는 내용을 적어주면 되겠네요 ㅎ

추가로 toString할때 타임존을 UTC 가 아니라 각 나라별로 하면

Date는 기본이 UTC라 각 나라의 시간대별 시간으로 바로 변환 하는걸로 써먹을수도 있을거같아요.

혹은 날짜형식 변환에도 써먹을수 있겠네요

년 월 일 시 분 초 있는 문자열을 월/일 시 - 분 문자열로 변환같은 기능으로요.

그럴일이 있을까 모르겠습니다만...

아무튼 위 소스의  사용은 아래와 같이 해봤습니다.

(참고로 이 애들은 전역 변수 쓰듯이 클래스 밖에다가 적어 주셔야합니다 extension 사용임을 잊지말아주세요.)

참고로 toDate()는 반환이 옵셔녈 타입이기에 한번 옵셔널을 벗겨주셔야합니다.