1주차(2) - Swift 기본 문법 / 사용자 인터페이스와 로직 연결

 

---

---

<2주차 강의 TIL>

오늘은 Swift 언어의 기본 문법과 사용자 인터페이스와 로직을 연결하는 방법을 배웠다.
Swift 문법은 [내배캠] iOS 개발 종합반에 들어오기 전에 이미 한 번 공부했던 부분이었지만,
한 번 더 복습한다는 생각으로 집중해서 수업을 들었다.☺️

인터페이스와 로직 연결하는 부분 또한 이전에 해본 경험이 있지만,
아직 완전히 이해하고 있는 부분은 아니라서
강의를 멈춰가면서, 직접 해보고 눈과 손에 익을 수 있게 계속 눌러봤다!

---

Swift 기본 문법

▶︎ var & let (변수와 상수)
var는 '변수', let은 '상수'이다.
이 두 가지는 데이터를 담아두는 공간이라고 생각하면 된다.

var(변수)는 데이터를 저장하고 이후에 데이터 변경이 가능하다.
반면에, let(상수)는 한 번 값이 저장되면 이후에 변경이 불가능하다.

var panda = "I love Fubao"
let panda = "I love Aibao"

<해석>
var라는 변수에 "I love Fubao"를 담았다. 
let이라는 상수에 "I love Aibao"를 담았다.
("=" → "대입한다"라는 의미)


▶︎ 데이터 타입(Data Type)
Swift에는 데이터 type이 존재한다.
여러가지가 있지만, 대표적으로 String(문자열), Int(정수), Float(실수), Bool(참/거짓)이 있다.

"푸바오" → String(문자열)
27 → Int(정수)
3.5 → Float(실수, 부동소수점)
true,false → Bool(참/거짓)

let nickname: String = "Yebao"

"nickname이라는 저장 공간에 String이라는 type만 담을거야" 이런 의미이다! :-)


▶︎ 컬렉션(Collection)
같은 type의 여러 개의 변수를 하나로 묶은 것이다.
크게 Array, Dictionary, Set이 있다.

① Array
말 그대로 배열이다. 같은 데이터를 하나의 변수 속에 넣은 것이다.

var baoFamily: [String] = ["Fubao", "Aibao", "Lebao", "Huibao", "Ruibao"]
let firstBao = baoFamily[0]

baoFamily라는 변수 안에 5개의 String 타입들을 넣었다.
Index는 0부터 시작하므로, 1번째인 "Fubao"는 baoFamily[0]에 해당한다.

② Dictionary
딕셔너리는 key로 value에 접근하는 방법이다.

var pandaLand: [String: String] = ["Address": "용인시", "Name": "Fubao", "Age": "Three"]
let pandaName = pandaLand["Name"]

pandaLand라는 변수에 [문자열:문자열] 형태로 넣었다.
"Address", "Name", "Age"는 "용인시", "Fubao", "Three"의 key이고,
"용인시", "Fubao", "Three"는 각각의 value이다.

그래서 pandaName이라는 상수는 pandaLand에 있는 "Name"이라는 key의 value이라는 뜻이다.
pandaName은 "Fubao"가 된다.

③ Set
순서가 없는 고유한 값들의 집합이다.

var Baos: Set<String> = ["Fubao", "Aibao", "Lebao", "Huibao", "Ruibao"]
let isContainsFubao = Baos.contains("Fubao")

이렇게 순서 없이 나열되어 있다.
Set의 경우에는 중복이 발생한다면 제거된다.

위와 같은 경우에는 결과가 "Fubao"가 포함되어 있기 때문에 true로 나올 것이다.


▶︎ 조건문 / 제어문
조건에 따라 다른 상태를 만드는 문법이다.

① if - else

let conditionA = 10
let conditionB = 20

if conditionA + conditionB == 30 {
        print("두 개의 합이 30이야!")
} else {
        print("두 개의 합이 30이 아니야!")
}
// 결과 : 두 개의 합이 30이야!

if 는 true일 때 실행되고, else는 false일 때 실행된다.


③ switch - case
switch문은 동위 선상에 있는 여러 개의 케이스를 분기 처리할 때 사용한다. 
코드블록 안에서 여러 케이스들을 체크하고, 해당 케이스에 부합하면 코드를 수행한다.

let num = 27

switch num {
case 0:
        print("0입니다.")
case 0...20:
        print("0에서 20 사이의 수 입니다.")
case 20...30:
        print("20에서 30 사이의 수 입니다.")
default:
        print("30 이상의 수 입니다.")
}
// 결과: 20에서 30 사이의 수 입니다.

위와 같이 들어오는 변수에 대해서 생각해볼 수 있는 모든 케이스에 대해서 다뤄주어야 한다.
그리고 케이스가 너무 많아서 다 적지 못하는 경우에는
이렇게 default 케이스를 사용해서 나머지 케이스에 대해서 수행할 수 있도록 코드를 남겨주면 된다.

switch문은 항상 주어진 모든 케이스에 대해 정의해야하므로 
default를 통해 아직 정의되지 않거나 정의할 필요가 없는 아래 1,2번 케이스를 처리할 수 있다. (↓※ 참고 ※↓)

※ 참고 ※
<위 상황 이외에도 default 문을 사용하는 경우>
1. 케이스를 특정할 수 없는 경우 (정의된 케이스 이외의 예외들)
2. 아직 정의될 필요가 없는 케이스가 있는 경우


③ for - in (반복문)
For문은 같은 코드를 여러번 반복해주는 방법이다.
코드를 간단하게 만들어주는 방법이기도 하다.

for baos in ["Fubao", "Aibao", "Lebao", "Huibao", "Ruibao"] {
  // 각각의 baos에 대해 실행된다.
}
for nums in 1...5 {
 // 1에서 5까지 실행된다.
}

 

 

 

---

 

 

사용자 인터페이스와 로직 연결

오늘 배운 내용은 IBAction과 IBOutlet이다. 
두 가지 모두 UI를 그리는 방법이다! 앞서 공부했던 아이폰 모형을 꾸미는 것이다.
Storyboard로 직접 꾸미기, Code로 직접 작성해서 꾸미기 → 두 가지 모두 가능하다!
두 방법을 함께 사용할 수도 있다. 

IBAction과 IBOutlet 연결 방법은 'drag & drop' 아주 간단하다.

우선, option키를 누른 상태로 ViewController와 main.storyboard 두 화면을 함께 띄운다.

storyboard에 Button을 생성했다면,
Button에 커서를 두고 control키를 누른 상태로 코드에 drag & drop 을 하면 된다.

---

<이번 강의 목표>

1. 버튼을 눌렀을 때 동작하게 하기
2. 버튼을 누르면 화면에 업데이트 되로록 하기
3. 코딩을 최소한으로 구현하기

---

 

option 키로 화면 분할

IBOutlet은
스토리보드에 Button을 만들고
control로 위와 같은 위치에 drag & drop 하면
화면 왼쪽에 보이는 창이 뜬다.
자유롭게 Name을 입력하고 connect를 누르면 끝.

Label도 추가로 만들어서 바로 아래에 연결했다.
위 화면은 Button과 Label를 위에 설명한 대로 
viewcontroller와 이 두 가지를 연결해 놓은 것이다!
(왼쪽에 숫자 부분에 동그라미에 커서를 가져다 놓으면, 잘 연결됐는지 확인할 수 있다.)

---

이제 Button을 눌렀을 때, 액션이 동작할 수 있도록 연결하려고 한다.
IBAction의 경우 코드 아래 쪽에 보통 넣는다.

위와 같은 방법으로 Button을 drag & drop!

이번에는 Outlet이 아니라 Action!
Name 작성!

그리고 Event를 누르면,

이렇게 클릭 방식에 따른 event 발생을 정할 수 있다.
우선, 커서를 안쪽에 놓고 클릭을 했다가 뗏을 때, 발생하는 'Touch Up Inside'로 설정하고
connect 해보겠다!

그리고 눌렀을 때, 문구가 출력될 수 있도록
print("안녕하세요!!") 를 추가했다.

이렇게 빌드하고 실행해서 버튼을 클릭해보면??

아래와 같이 정상적으로 "안녕하세요!!"가 출력되는 것을 확인할 수 있다.

---

이와 같은 방법으로 버튼을 눌렀을 때, 화면 색상이 바뀔 수 있게 해보려고 한다.
(view.backgroundColor = .원하는 색상)

이렇게 빌드하고 실행해서, 버튼을 누르면?

원래 white 색상이었던 화면이 blue 색상으로 바뀌었다!

---

이번에는 조금 더 나아가서
버튼을 클릭하면, 위에 Label에 설정한 글자가 업데이트 되게 하려고 한다. 

코드: 설정한Label이름.text = "원하는 문구"

이름 옆에 .text를 하는 이유는
Label의 타입과 "문구" 타입이 다르기 때문에 대입이 불가능하기 때문이다!
( → Label은 UILabel, "문구"는 String )

이렇게 하게 되면, 'Label이름.text'의 타입은 String이 되어 대입이 가능해진다!

이렇게 빌드하고 실행시킨 후, 버튼을 클릭하면?

이렇게 설정했던 문구로 바뀌는 것을 확인할 수 있다!

 

---

여기까지 오늘 강의에서 배운
화면과 코드를 연결하는 IBOutlet, IBAction이다!

앞으로 어떤 새로운 기능들을 배우게 될지 궁금하고 기대된다.😄
계속 이어서 배워나가는 것들이 쌓이면서
까먹지 않도록 계속해서 복습하고 정리해야겠다.

---