SeSAC iOS 데뷔과정 2기

0708 새싹 5회차 정리

Lia's iOS 2022. 7. 8. 20:49
iOS 앱 개발자 데뷔 과정 5회차

 

 

 

 

#0. Memo

- AutoLayout

Constraints에 따라 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 동적으로 지정하는 것.

디바이스마다 화면의 해상도가 다르고, 비율도 다르기 때문에 AutoLayout으로 조건을 걸어 동일한(비슷한) 화면을 보여주게 하는 것이다.

 

뷰당 최소 4개씩 레이아웃을 잡아주는 경우가 기본적이다.

뷰 하나를 추가할 때마다 레이아웃을 잡는것이 가장 좋지만, 이미 뷰가 여러개 있다면 아래와 같은 순서로 작업하는 것이 좋다.

 

1. 큰 쪽에서 작은 쪽으로

2. 아래/위 둘중 기준점 하나를 잡아서 차례대로

 

참고 : 다른 뷰에 레이아웃을 맞출 수평으로 드래그하면 수평에 관한 옵션만 뜬다. 대각선으로 !

 

 

- Constraints (제약 조건)

Constants : 가장 자주 사용하는 제약 조건으로, 객체간 레이아웃 관계를 나타낸다.

Multiplier : 한글로 하면 승수. 간단하게 말하면 객체의 y좌표와 x좌표에 대한 곱하기이다.

Equal Width / Height : View의 비율에 대한 크기를 정할 수 있다.

 

 

 

- Horizontally / Vertically in Container

수평 / 수직으로 항상 중앙에 위치하게 한다.

수치를 입력하면 중앙에서 얼마나 이동할 것인지 정할 수 있다.

 

 

 

 

#1. Checklist

- Git vs Github

Git  : 로컬에서 코드와 수정내역을 기록하고 관리하도록 돕는 버전 관리 프로그램

Github : Git 저장소를 웹에서 관리하는 클라우드 기반 호스팅 서비스. 다른 사람과 공유가 가능하다

 

 

- Local Repository vs Remote Repository

Local Repository : 현재 내가 사용하고 있는 PC에 저장되는 저장소(폴더). 원격 저장소의 파일을 로컬 저장소로 Pull 할 수 있다.

Remote Repository : 원격 서버에 저장, 관리되는 저장소. 로컬 저장소의 파일을 원격 저장소로 Push 할 수 있다. 주 목적은 파일 공유

 

 

- Commit vs Push

Commit : 로컬 저장소와 연결하여 코드의 변경사항을 저장, 기록

Push : Commit으로 기록한 내용을 원격 저장소에 업로드(업데이트)

 

 

- AutoLayout

#0. Memo AutoLayout 참고

 

 

- Constraints

#0. Memo Constraints (제약 조건) 참고

 

 

- Horizontally / Vertically in Container

#0. Memo Horizontally / Vertically in Container 참고

 

 

 

 

#2. Assignment

- 과제1 오토레이아웃 학습하기

- 현재 서비스중인 앱의 UI를 따라 만들어보자 1

참고 자료(좌), 결과물(우)

 

오토 레이아웃... 진짜 너무 어렵다ㅠㅠ

저 간단해보이는 화면을 만드는데 반나절은 꼬박 걸린 것 같다...

 

 다른 디바이스에서는 이렇게 보인다.

원래는 프로필사진의 크기를 유동적으로 두고 Constant를 주었는데, 그렇게 할 경우 화면이 작은 SE 기기에서 프로필 사진이 의도와 다르게 작아지는 현상이 있어서 Width, Height 로 절대적인 크기를 잡아주었다.

 

 

- 현재 서비스중인 앱의 UI를 따라 만들어보자 2

참고 자료(좌), 결과물(우)

 

정말 너무 어렵고 귀찮은 오토 레이아웃도 반복 학습 앞에서는 별 수 없나보다.

계속 하다보니 속도도 빨라지고, 이쁘게 만들다보면 성취감도 좋아서 나름 재밌었다 :)

 

 다른 디바이스에서는 이렇게 보인다.

 가사 창이 언제나 저 여백의 정 중앙에 있으면 좋을 것 같아서 투명한 View를 하나 만들고, 그 안에 가사가 들어갈 Label을 넣은 다음 항상 중앙에 오도록 설정해줬다.

 

 

- 현재 서비스중인 앱의 UI를 따라 만들어보자 3

참고 자료(좌), 결과물(우)

 

이게 보기엔 가장 간단해 보이지만 은근히 오래 걸렸다.

양 옆을 같은 크기로 두려면 어떻게 해야할지 모르겠어서 헤맸는데 StackView를 사용하니 쉽게 잡아줄 수 있었다.

 

 

 

 

- 과제2 newlyCoinedWord Project 구현하기

[0710 1주차 마무리] 참고

https://eun-dev.tistory.com/8

 

 

 

 

# Plus

- 비밀번호가 보이지 않게 변경

passwordTextField.isSecureTextEntry = true

 

원래 지원하는 기능이기 때문에 코드 한줄로 간단하게 변경해줄 수 있었다.

 

 

- 추천코드 숫자 제한(붙여넣기 방지)

숫자만 입력하라고 KeyboardType을 NumberPad로 제한해도 복사/붙여넣기를 통해 문자를 입력하는 사람이 있다고 한다.

왜 그러는지는 모르겠지만(...) 이렇게 Int 외의 다른 타입이 들어오면 따로 메세지를 보여주기로 했다.

 

일단 원래 if와 else밖에 없었던 코드에 else if를 하나 추가했다.

추천코드는 선택사항이기 때문에 아무것도 입력하지 않았을 경우를 제외하고, String 타입인 추천코드를 Int로 변환시켰을 때 nil 이 된다면 해당 메세지를 띄우도록 했다.

 

 

# 더 공부하고 싶은 부분... 오늘은 늦었으니 이만 잡시다 

회원가입이 성공했을 때는 괜찮은데, 실패했을 때의 Title이 바로 나오지 않는 현상이 있다.

두번째부터는 재깍재깍 나오는데 첫번째는 100% 확률로 나오지 않는다... 원인을 찾아보자!