APP BAR는 서비스에서 주로 내비게이션 역할을 하고 있다. 로고가 담길 수도 있고, 햄버거 버튼(메뉴 버튼)을 두기도 하고, 주요한 기능을 주로 둔다.

⬇️ APP BAR 서비스 예시

1. 중앙 정렬 타입 타이틀 혹은 로고 타입을 중앙 정렬로 사용하는 경우, 두 개 이상의 아이콘을 사용하지 않는다.

2. 좌측 정렬 타입 타이틀을 좌측 정렬로 사용 시 액션 아이콘은 네 개 이상 사용하지 않는다.

컴포넌트 내부요소

1. Container
2. Navigation icon (Optional)
3. Title (Optional)
4. Action icons (Optional)

APP BAR STYLE

1. Standard app bar

2. Extended app bar

3. Contextual action bar ex) 여러 이미지 or 연락처 목록 한번에 삭제 편집하는 경우

APP BAR 그리기 실습

NAVER Cloud 홈페이지에서 API 클라이언트 ID를 발급받을 수 있다.

1. 콘솔 탭으로 들어간 다음

2. AI, NAVER API를 누른 뒤 사용하고 싶은 API를 선택하면 된다.

3. App 이름을 설정하고, Mobile Dynamic Map을 선택하면 아래와 같이 나타난다.

4. Xcode 프로젝트의 'Bundle Identifier'를 iOS Bundle ID에 추가하고 등록하면 완료!

라이브러리 설치

공식 가이드도 참고하고, 구글링을 통해 여러 시도 끝에 성공했다.

1. cocoapod 설치

   sudo gem install cocoapods

• 오류날 때 아래 코드 입력

  brew install cocoapods --build-from-source

2. homebrew 설치

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. git-lfs 설치

   brew install git-lfs

프로젝트 경로에서 진행하기

1. cocoapod 초기화

   pod init

2. git-lfs 초기화

   git-lfs install

3. Podfile을 열고 아래 코드를 추가해준다.

   pod 'NMapsMap'

   

4. pod install 로 라이브러리를 설치

   pod install --repo-update

Xcode에서 클라이언트ID 지정

Info.plist 파일에서 Key: NMFClientId Value: Client ID

발급받은 Client ID는 App 인증정보를 누르면 볼 수 있다.

지도화면 나타내기

viewController에서 아래코드를 입력하여 실행하면 지도화면이 나타난다.

다음에 할 것

• 지도 좌표 설정
• 마커 띄우기

화면 이동을 하기 위해서는 View Controller를 추가해주고 Control을 하여 Present Modaily를 선택한다.

Cell을 클릭했을 때 다음 화면으로 이동하게 만들 것이다.

먼저, 다음 화면 UI를 꾸며준다.

ImageView와 Label을 추가하여 Stack View로 묶어준다.

ImageView와 Label 높이를 설정하고, Stack View로 묶어 위 간격과, Alignment를 Fill로 설정하고, Label 글자크기 설정, X축의 가운데를 설정하면 위치가 조정된다.

View Controller를 코드와 연결하기 위해 Controllers파일에 새로운 파일을 만들어준다.

Assistent를 통해 코드와 연결한다.

하나의 View Controller파일에 연결하기 위해 Control 버튼을 누르고, ImageView와 Label을 연결한다.

ViewDidLoad에서 데이터를 받아오면 데이터를 표시해주면 된다.

setupUI 함수를 만들어 데이터들을 화면에 표시할 수 있게 코드를 설정해준다.

테이블뷰에서 어떤 특정한 셀이 터치가 되면 이 메서드를 실행시키는 것이다. didSelectRowAt : 유저가 n번째 셀을 선택하면 이 메서드를 호출하게 된다.

func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
        <#code#>
    }

Storyboard에서 세그웨이를 만들었을 때 performSegue를 실행시키면 다음 화면으로 넘어간다.

performSegue(withIdentifier: "toDetail", sender: indexPath)

performSegue를 할 때 "toDetail"이라는 문자열을 가진 세그웨이를 실행시킨다.

세그웨이를 통해 다음 화면으로 가는 메서드를 실행하는 것이다.

performSegue(withIdentifier: "toDetail", sender: indexPath)

다음화면으로 데이터를 전달하려면? prepare 세그웨이를 실행시키면 된다.

override func prepare(for: segue: UIStoryboardSegue, sender: Any?) {

    }

identifier가 "toDetail"이라면 데이터를 전달하고, 타입캐스팅을 통해 UIViewController타입인 구체적인 타입으로 타입캐스팅한 다음 deatilVC 상수에 foodData를 전달하는 것이다.

배열에서 데이터를 전달하기 때문에 foodDataManager.getFoodData()에서 배열을 받아오고, 배열에서 몇번째인지 꺼내기 위해 IndexPath 파라미터를 전달해줘야 한다. sender 타입을 Indexpath로 타입캐스팅해야 한다.

tableView에 접근해서 delegate 속성에 self를 꼭 설정해야 한다!

tableView.delegate = self

tableView에 View Controller인 내가 대리자가 될 것이다 라는 뜻!

Storyboard에서 Selection - Single Selection이라 설정하면 다음화면으로 넘어가게 된다.

다음 화면으로 잘 넘어가는 것을 확인할 수 있다.

이제, 네비게이션바를 만들어보자. Storyboard에서 View Controller를 선택하고, Navigation Controller를 선택한다.

세그웨이를 누르고, Kind - Show(push)를 선택하면 전체화면으로 변경되고, 전화면으로 돌아갈 수 있다.

Bar Button Item을 선택하면 상단에 버튼이 생긴 것을 확인할 수 있다.

System Item에서 Add를 선택하면 "+"버튼으로 설정할 수 있다.

"+"를 눌렀을 때 Item을 추가할 수 있는 코드를 설정해준다.

음식데이터들을 담고있는 배열에 하나의 데이터를 담는 구조체를 만들어준다. 함수의 이름은 updateFoodData로 설정하였다.

updateFoodData를 호출하면 하나의 음식데이터가 더 추가된다. reloadData() 메서드를 사용하여 데이터가 늘어난만큼 다시 테이블에 표시하게끔 한다.

앱을 실행하여 "+"버튼을 누르면 데이터들이 추가되는 것을 확인할 수 있다. 데이터가 하나밖에 없기 때문에 데이터가 하나만 추가되고 있다.

또한, 네비게이션바에 title을 설정하고 싶으면 UITableView내부에 title = "텍스트"을 설정하면 네비게이션바에 title이 나타나게 된다.

다음에 할 것 여러 데이터 추가하고, 데이터를 수정하는 방법 구현하기

먼저 storyboard에서 Table View를 추가한다.

margin을 체크해제하고, 0으로 설정하여 오토레이아웃을 잡아준다.

하단까지 조정하고 싶으면 Size inspector에 들어가서 Bottom을 클릭한다.

Safe Area가 아닌 Superview로 설정하면 아래끝까지 Table View가 내려가고, Constant를 0으로 설정하면 완전히 내려간다.

Table View에서 control을 끌어 테이블뷰의 속성을 만든다.

Table View를 사용할 때는 프로토콜을 채택해야 하는데 UITableViewDataSource 프로토콜을 채택한다. Table View와 View Controller 간 통신을 할 수 있는 프로토콜이다.

class ViewController: UIViewController, UITableViewDataSource {

테이블뷰를 만들면 이 함수를 반드시 실행시켜야 한다.

1. 몇개의 컨텐츠를 만들면 되는지 ex ] return 5 라고 하면 컨텐츠 5개 생성
2. 테이블뷰의 cellForRowAt 몇번째 셀은 어떻게 표시를 하면 되는지 ex ] return UITableViewCell()

   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }

Tabel View 위에 Tabel View Cell을 올린다.

하나의 프로토타입이 될 수 있는 Prototype Cell이다.

Cell위에 UIImageView를 올린다.

UIImageView 높이와 넓이, 간격을 설정하고, Label을 추가해준다.

Label을 Stack View로 묶어 위 Label에 높이를 설정하고, UIImageView의 높이와 맞추기 위해 First Item에서 Image View.Bottom과 Image.View Top으로 설정한다.

Relative to margin도 체크해제 하고, Constant를 0으로 설정한다.

스토리보드와 코드를 연결하기 위해 New File을 선택하고, Cocoa Touch Class 파일을 선택한다.

UITableViewCell을 상속한 셀을 만들고, 이름은 FoodCell이라 하였다.

스토리보드에서 Table View Cell을 클릭하고, Custom Class에 FoodCell이라 입력한다.

스토리보드에서 Assistant를 눌러 파일을 연결할 때 잘되지 않으면 "Option"을 누르고 파일을 클릭하면 연결이 된다!

UIImageView를 control을 끌고 mainImageView라 설정해준다.

Label도 동일하게 설정해준다. (foodNameLabel, descriptionLabel)

@IBOutlet weak var mainImageView: UIImageView!

@IBOutlet weak var foodNameLabel: UILabel!

@IBOutlet weak var descriptionLabel: UILabel!

Models / Views / Controllers 그룹을 만들고, Models 안에 Food 파일을 추가하였다.

Food 파일 안에 데이터를 구축한다. 3개를 하나의 묶음으로 만들었다고 생각하기!

struct Food {
    var foodImage: UIImage?
    let foodName: String
    let foodDescription: String
}

Assets에 이미지를 추가해준다.

음식 데이터의 Array는 아래와 같이 표현하였다.

foodDataArray = [
Food(foodImage: UIImage(named: "6.png"), foodName: "센자이료쿠", foodDescription: "압구정에 위치한 일본라멘 맛집! 가게 입구부터 일본에 있는 라멘집을 통으로 옮긴 것 같은 분위기이다. 간장베이스의 고기라멘인데 면도 생면이라 굵고, 시금치와의 조합이 Good!")]

FoodCell이라는 identifier를 가진 cell을 꺼내서 쓸 것이라는 뜻이다.

foodDataArray에 접근해서 아이템을 하나씩 꺼내서 할당하게 된다.

테이블뷰에 데이터들이 잘 표시되는 것을 볼 수 있다.

다음에 해야할 것

• 네비게이션바 적용
• 상세 페이지 구현
• 데이터 추가하기 기능 구현

먼저 뷰컨트롤러를 생성해준다. 뷰컨트롤러를 먼저 생성하는 이유는 다음 화면으로 넘어가기 위한 것이다.

button을 생성하여 높이, 넓이를 설정하고, X, Y축을 설정하였다.

control을 누르고 view Controller에 내려놓고, Show를 선택한다. (네비바를 위해)

뷰를 선택하고 Navigation Controller를 클릭한다.

Navigation Controller가 왼쪽에 생겼다. 상단 메뉴가 생긴 것을 확인할 수 있다.

Navigation Item을 선택하고, Title명을 메뉴로 수정하였다.

Navigation Bar 클릭 후, Scroll Edge로 설정하여 네비게이션 바의 색깔을 설정할 수 있다.

Navigation Controller 선택하고, Tap Bar Controller를 클릭한다.

왼쪽 끝에 Tap Bar Controller가 생성된 것을 볼 수 있다.

View Controller를 하나 더 추가해준다.

control을 끌어 Relationship Segue의 view controllers를 클릭한다.

탭바가 하나 더 생긴 것을 볼 수 있다.

Tab Bar Item을 선택한 상태에서 title과 image를 수정할 수 있다.

Storyboard로 탭바와 네비게이션바를 제작하는 것은 간편하게 만들 수 있다.

(+) 자판기 메뉴 선택처럼 각 메뉴 버튼을 누르면 상세 페이지로 이동하게 된다.

다음에 해야할 것

• 코드로 네비게이션바/탭바 만들기
• 테이블뷰 적용하기

GoF(Gang of Four) 디자인 패턴

디자인 패턴을 사용하는 이유 재사용을 용이하게 하고, 유지보수에 효율적이다. 이미 검증되고 테스트한 구조이기 때문에 설계 과정의 속도를 높일 수 있다.

단점 객체지향적 설계를 고려하여 진행해야 하기 때문에 초기 투자 비용(시간, 돈)이 많이 들어감

프로그램 구조의 대표적인 디자인 패턴 중 하나인 MVC Structural Pattern

MVC란 Model View Controller의 약자로 에플리케이션을 세가지의 역할로 구분한 개발 방법론이다. 아래의 그림처럼 사용자가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 시각적인 표현을 담당하는 View를 제어해서 사용자에게 전달하게 된다.

Model - 비즈니스 로직 View - UI 사용자 화면 Controller - Model과 View 사이 중재자 역할, 모델의 정보를 어떻게 뷰에 표시할지 해석

View Controller를 구분하여 표현한다면 코드를 업데이트하거나 유지보수를 할때 코드를 용이하게 관리할 수 있다.

서로의 소통 방법

IBoutlet : controller가 view에게 업데이트된 내용 전달 IBAction : view가 controller에게 이벤트 전달 controller가 model에게 말을 거는 방법 - model의 인스턴스 생성 model이 controller에게 말을 거는 방법 - 자신의 데이터가 변화될때 등 필요한데, 변경 사항이 있을 때 Notification 하게 된다.

뷰컨트롤러에서 행위를 판단한다. UITextFieldDelegate 프로토콜을 채택해야 한다. textField와 뷰컨트롤러가 따로 존재하는데 textField 안에 델리게이트 속성이(대리자 속성) 있다.

textField.delegate = self

self는 뷰컨트롤러를 의미한다.

대리자는 메서드를 하나하나 채택해서 메서드를 구현한다.

델리게이트 패턴 == 대리자 어떤객체와 객체간의 의사소통(커뮤니케이션) 의사소통을 하기 위해 프로토콜을 사용

예를 들어, 유저가 아이디를 입력할 때 10글자까지만 허용한다는 상황에서

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {

        let maxLength = 10
        let currentString: NSString = (textField.text ?? "") as NSString
        let newString: NSString =  currentString.replacingCharacters(in: range, with: string) as NSString

            return newString.length <= maxLength

    }

이러한 코드를 작성할 수 있다.

텍스트필드에서 항상 키보드를 나타내고 싶을 때

textField.becomeFirstResponder()

텍스트 입력 후 Done버튼을 누르면 키보드가 사라진다.

textField.resignFirstResponder()

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.view.endEditing(true)
    }

textField에서 기본적인 기능은 델리게이트 패턴 없이 사용할 수 있지만 고급 기능을 구현하고 싶을 때에는 델리게이트 패턴을 적용해 편리하게 사용할 수 있다.

text를 입력할 수 있는 Text Field와 button을 추가하여 Storyboard에서 UI를 설정해준다.

설정 후, storyboard에서 위치와 사이즈를 조정한다.

UI화면 설정 후, 코드와 연결하기 위해 Assistant를 클릭하여 코드를 작성한다. control을 누르고, textField(UITextField)와 button(UIButton)을 연결한다.

함수 setup()을 생성하여 view의 backgroundColor을 gray로 설정하고, 키보드의 타입을 emailAddress로 표현하였다.

키보드의 타입을 numberPad로 설정하면 숫자 키패드가 나타나는 것을 볼 수 있다.

textField.placeholder = "이메일 입력"

textField 안에 "이메일 입력"이라 나타난다.

textField.borderStyle = .roundedRect

textField의 모서리가 둥근 모서리가 된다.

textField.clearButtonMode = .always

텍스트를 입력할 때 모두 삭제할 수 있는 x아이콘이 나타난다.

textField.returnKeyType = .next

키패드의 "return"이 "next"로 바뀌는 것을 볼 수 있다.

응용하기 (textField를 이용하여 다양한 로그인 페이지 구현해보기)

1. 인증페이지 구현

2. 지그재그 로그인 페이지

   

다음 포스팅은 델리게이트 패턴에 대해서 알아보겠습니다!