2. 네 가지 요소를 레이아웃한다.

단순히 정렬을 사용할 수 없습니다. 왜냐하면 화면 중앙에 요소들이 다 있기 때문입니다. 또한 고정을 할 수 있는 수직 공간이 충분하지 않습니다. 그렇기 때문에 몇 개의 컨테이너를 사용하여 화면을 세 개의 동일한 부분으로 분할 합니다.

Object libary 에서 uiimage 받습니다(일부 하위 뷰를 레이아웃하는데 사용) 그 다음 다이스로고를 드래그하여 view에다 집어넣습니다. 똑같은 방법으로 dice image, roll 버튼을 만듭니다. 다른 방법으로는 오른쪽 하단 버튼을 클릭하여 view를 클릭하는 방법이 있습니다. 그 다음 컨테이너을 어떻게 배치 할 것인지, 크기를 어떻게 할 것인지 지정합니다.그렇기 위해서는 StackViews라는 것이 필요합니다. stackview란 뷰를 세로로 함께 쌓을 수 있는 방법입니다.

StackView

TopView를 선택한 다음 command키를 누른 상태에서 middle view, bottom view를 선택합니다. 그 다음 stackview에 포함합니다. 그 다음 상단 또는 하단의 safe area에 들어가지 않도록 제한해야 합니다. 네면 모두 0으로 제약을 하고 stack view.bottom을 safe area.bottom으로 변경하고 constant 을 0으로 변경합니다.

그 다음 dice view를 수평 컨테이너에 넣어서 수평으로 균등하게 정렬하게 만듭니다. 이전과 마찬가지로 두개의 diceimage를 선택하여 stackview에 포함합니다. 스택에 폼함 된 이 세가지 뷰 모두 수직에 따라 동일한 높이를 갖기 원하기 때문에 distribution을 fill equally로 바꿔주고 사이의 공간을 1 로 설정해 줍니다. top, middle, bottom view 에 background을 default로 변경합니다.

iPhone은 각 요소가 서로 다른 화면 비율, 크기를 가집니다. 따라서 이러한 다양한 규칙을 구현하여 각 사용자 인터페이스 요소에 휴대전화의 크기가 변경되거나 화면의 종횡비가 변경되어도 표시되게 해야합니다.

방향을 회전하면 배경의 일부가 완전히 잘립니다. 그리고 로고는 화면 밖에 있기 때문에 완전히 보이지 않는 아래 어딘가에 있습니다.

배경화면이 화면에 꽉차게 만드는 방법

Constraint를 추가할 수 있는 작은 사각형 버튼을 클릭하여 픽셀거리를 다 0으로 바꿉니다. 그러면 배경 이미지가 전체 공간에 맞게 다소 늘어난 것을 볼 수 있습니다. 그러나 배경이 왼쪽과 오른쪽으로 끝까지 가지 않는 이유는 무엇일까요? 여기에 제약조건이 있고 이러한 제약 조건이나 규칙이 사용자 인터페이스에 어떤 영향을 미치는지 확인할 수 있습니다. 배경이 꽉차게 만들고 싶기 때문에 이 제약조건을 바꿀것 입니다. AppBreweryBackground.traling = safe area.trailing 을 super view로 설정합니다. super view 는 view아래에 있는 요소를 포함하는 뷰입니다. 또한 super view controller에 있는 것은 전체 화면을 덮을것입니다. 마찬가지로 AppBrweryBackGround.trailing 도 superview로 설정해줍니다. 그러면 배경이 화면에 꽉차는 것을 볼 수 있습니다.

logo layout

위에 처럼 Constraints를 추가하는 방법은 별로 좋지 않습니다. 왜냐하면 가로방향으로 바꿀때 위에서 300, 아래에서 300이라는 공간이 없기 때문입니다. 그렇기 때문에 constraints을 하지말고 정령 버튼을 클릭하고 수평으로, 컨테이너와 수직으로 설정합니다. 그렇게 한다면 가로로 돌렸을 때 로고가 가운데에 보이는걸 확인할 수 있습니다.

1. // 를 써서 주석을 다는 방법
2. 여러줄을 주석으로 사용하고 싶을때는 /* .....*/을 쓴다
3. 단축기로는 커맨드+슬래쉬 이다.

print 명령

print(something to print)

print 문 중간에 계산 수행하는 방법

print("Text (a+b) Text")

변수

변수는 나중에 참조 할 수 있도록 레이블이 있는 데이터를 포함한 상자이다. 즉 뚜껑이 있는 상자와 같다. 값을 꺼내 새로운 값을 입력하고 원하는 만큼 변경할 수 있다. 변수의 이름은 소문자로 시작

상수

let 을 쓴다. 변수와는 반대로 값을 변경할 수 없다.

int(정수의 약자 integer)

소수점 이하 자릿수가 없다. 음수도 정수다.

float(floating point number)

소수점을 표현할 때 사용

double

float 보다 정확도가 2배이다. 소수 자리뒤에 더 많은 숫자를 담을 수 있다. 소수점 아래 15자리 까지의 정보를 정확하게 저장

Character

하나의 문자 (ex..."a","b","김"...)

String 문자열

문자열을 저장 (ex..."안녕하세요", " 반갑습니다", "김동우"..)

bool(boolean)

ture 또는 false의 두가지 가능한 값만 있다.

이 프로젝트는 복제했기 때문에 appimage, appicon 이 다 저장되어 있습니다. 따라서 main.storyboard에서 사용자 인터페이스 구축을 시작할 수 있습니다.

주사위 앱 만들기

1. 앱 이미지 만들기

배경설정

aspect fit - 이미지가 크기에 맞게 채워집니다. scale to fill - 이미지가 화면에 맞게 채워집니다. aspect fill - 특정한 이미지가 화면에 채워집니다.

app image, icon이 저장되어 있기 때문에 스토리보드에서 구축하면 됩니다. ---이미지 복사는 option키를 눌러 드래그 해주면 복사가 됩니다.

2. 코드

코드 작성은 viewcontroller.swift 파일에서 합니다.

_ViewController.swift - 코드 파일 Main.storyboard - 디자인 파일

2-1. Assistant

adjust editor options file -> assistant 를 선택하면

왼쪽에는 디자인 파일이 오른쪽에는 컴패니언 코드파일이 나오게 됩니다.

main.storyboard는 interface builder 라고도 한다

2-2. IB콘센트 만들기

화면에는 나오지 않았지만 왼쪽 다이스를 컨트롤+클릭하여 12행 드래그해서 집어넣을수있다. --오류 코드의 이유을 알고싶으면 화면아래에 있는 디버깅오류(reason: 부터)를 보면 알 수 있다.

2-3. 코드작성 해보기

>(파란색 부분)본질적인 코드 줄

모든 프로그래밍 언어에서 볼 수 있는 서식은 다음과 같다

override func viewDidLoad() {
code goes here
}






>#### 스토리보드에 있는 Dice1 의 이미지를 바꾸려한다.
코드작성 
diceImageView1.image = image.literal 를 사용한다.
who.what = value
who는 누구를, what은 무엇을  value는  무엇으로
who = diceImageView, what = image  value = image.literal

### 실습
> 첫 번째 주사위가 디자인에 1로 표시되어 있지만 실제로 앱이 시작되면 주사위는 6으로 바뀐다
![](https://images.velog.io/images/9uu_dong/post/baeacc44-c108-4c43-8434-f544ae3bf465/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-16%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%202.50.44.png)![](https://images.velog.io/images/9uu_dong/post/5b4a1cba-e01b-43f3-8f71-fba2c53d3a48/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-16%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%202.48.11.png)

>IBOutlet 코드를 사용하여 이미지를 설정할 수 있다

### 앱을 실행한후 Roll 버튼을 누르면 다이스의 이미지가 바뀌게 코드를 작성해보자
>먼저 다른 종류의 링크를 만든다.
![](https://images.velog.io/images/9uu_dong/post/e3b11e59-52ae-4fc3-8e07-8333187cb847/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-18%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.37.31.png)
28행에 roll 버튼을 컨트롤 클릭하여 드래그해서 가져온다. 
이 코드는 IBOutlet이 아닌 인터페이스 빌더 액션인 IBAction이다.
그 다음 롤버튼을 누르면 다이스 1,2의 이미지가 바뀌게 설정하는 코드를 작성한다.
![](https://images.velog.io/images/9uu_dong/post/075b6cdd-c54e-454d-832b-f6e14adc22b0/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-18%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.41.27.png)

>![](https://images.velog.io/images/9uu_dong/post/e7453cd4-327a-4a30-ba13-27f8e829612f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-18%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.40.03.png)
_1.IBOutlets 오른쪽에서 왼쪽으로 이동한다.
2.코드가 사용자 인터페이스에서 무언가를 변경하기를 원한다.
3.IBAction 은 왼쪽에서 오른쪽으로 이동하지만 사용자 인터페이스와의 상호작용으로 인해 코드에서 어떤 일이 발생한다._

### 롤 버튼을 누를때마다 이미지가 변경
>_-배열이라는 것을 사용
-배열은 단순히 정렬 된 항목 시퀀스
-컴퓨터는 0부터 센다_
![](https://images.velog.io/images/9uu_dong/post/8d6c75a5-db44-445e-9e15-f195023cc9b4/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-03-19%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%201.42.32.png)

var leftDiceNumber = 1 //변수와 값을 생성 var rightDiceNumber = 5
diceImageview1.image = [][leftDiceNumber]//다이스 이미지 1을 6개의 주사위 이미지로 변경, leftdiceNumber = 1 leftDiceNumber = leftdicenumber + 1 // 하나 실행할때마다 1씩 더해준다.

주사위 이미지를 무작위화 하는 방법

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var diceImageView1: UIImageView!
    @IBOutlet weak var diceImageView2: UIImageView!


    @IBAction func rollButtonPressed(_ sender: UIButton) {

        let diceArray = [ #imageLiteral(resourceName: "DiceOne"), #imageLiteral(resourceName: "DiceTwo"), #imageLiteral(resourceName: "DiceThree"), #imageLiteral(resourceName: "DiceFour"), #imageLiteral(resourceName: "DiceFive"), #imageLiteral(resourceName: "DiceSix") ] 


//diceArray 라는 변수를 만들어 코드 쉽게 만들기
        diceImageView1.image =  diceArray.randomElement()// randomElement() ->배열을 살펴보고 내부에 얼마나 많은 항목이 있는지 확인한 다음 임의의 요소 제공
        diceImageView2.image = diceArray[Int.random(in: 0...5)]//int.random(in:0...5)] -> 0에서 5까지 임의적으로 랜덤하게 



    }

}

1. git hub에 들어가 자기가 원하는 코드를 search하여 clone해서 가져온다.

2. 그 다음 소스를 복사하여 source control 에 clone에 들어가 소스를 붙여넣기 한다.

3. 폴더를 저장하고 폴더를 열어 프로젝트를 열고 실행시키면된다.

1. 앱 디자인

libary(+모양)을 눌러 lable, image view 을 클릭하고 화면으로 드래그 합니다. 그다음 label, imageview 속성을 바꿔줍니다.(글자,위치,크기,색상,글꼴...)

2. 앱 이미지

2-1. 네비게이터 창에 있는 Assets.xcodeassets 폴더에 이미지를 드래그 해서 가져와줍니다. 2-2. appicon.co에 들어가 1x, 2x, 3x 이미지를 만듭니다. 그 다음 2-1에 있는 diamond image 를 지우고 새롭게 만든 diamond image를 드래그로 옮깁니다. 2-3. image를 선택하여 imageview에 들어갈 image를 선택합니다.

3. 앱 아이콘

앱 아이콘 슬롯들을 채워주기

3-1. 앱 아이콘 이미지 만들기

canva.com에 들어가 앱 디자인 합니다.

3-2. 앱 아이콘 생성

자신이 만든 앱 디자인을 저장하고 appicon.co 에서 앱 아이콘을 생성합니다

3-3. 폴더 복사

해당 파일의 압출을 풀면 Assets.xcassets 라는 폴더가 생깁니다. 그 폴더안에 AppIcon.appiconset 라는 것이 있는데 그 폴더 안에는 앱 아이콘에 필요한 크기가 모두 있습니다.

3-4. 폴더 교체

그 다음 AppIcon을 오른쪽 버튼으로 클릭하고 Finder에서 표시를 클릭한다음 기존에 있던 폴더 I am Rich->Assets.xcassets->Appicon.appiconset 에 드래그해서 폴더를 교체합니다. 그렇게 하게 되면 AppIcon에 이미지 슬롯이 다 차게 됩니다.

4-1.시뮬레이터 앱 실행.

왼쪽 상단 모서리에 앱 이름을 클릭 한 다음 드롭 다운목록에서 사용하려는 시뮬레이터 모델을 정해줍니다. 제 경우에는 아이폰 12를 선택하고 재생버튼을 눌러줍니다.

실행을 하게 되면 시뮬레이터가 실행이 되어 실제 앱이 표시되면서 실행을 할 수 있습니다.

4-2. 실제 핸드폰에서 앱 실행하기

1. XCODE 버전과 IOS 버전이 같아야 됩니다. ex) xcode 14.1 IOS 13.1 소수점 이하 숫자가 같아야 됩니다. 2. xcode에 preferences 에 들어가 apple id를 추가합니다 3.관리 서명 확인란을 선택하고 팀 드롭 다운 목록을 클릭 한 뒤 방금 추가한 계정을 선택합니다. 4. 자기 아이폰 장치를 선택하고 실행 버튼을 누릅니다. 그렇게 되면 핸드폰에서 자기가 만든 앱이 나오면서 실행 할 수 있게 됩니다.