[ TIL ] Code Base UI

스토리보드 삭제

스토리보드 삭제

Info에서 Storyboard Name 삭제

프로젝트의 Build Setting에서 main 검색 후 삭제

 

 

SceneDelegate.swift 파일의 scene 메서드 내용을 지우고 아래 코드 작성

        // UIScene타입인 scene을 UIWindowScene타입으로 타입 캐스팅
        guard let windowScene = (scene as? UIWindowScene) else { return }
        // UIWindowScene타입을 UIWindow로 변환?
        let window = UIWindow(windowScene: windowScene)
        
        // rootViewController 지정
        window.rootViewController = ViewController()
        window.makeKeyAndVisible()  // window 활성화
        
        self.window = window    // 반환

---

NSLayoutConstraint

• NSLayoutConstraint로 Constraint 작성 가능. 
• Constraint는 뷰와 뷰 사이의 제약 조건을 의미. 오토 레이아웃에서 중요한 개념. 
•  leadingAnchor   trailingAnchor   topAnchor   bottomAnchor   widthAnchor   heightAnchor 
•  centerXAnchor : 뷰에 가로 선을 그었을 때 그 중간을 의미. 
•  centerYAnchor : 뷰에 세로 선을 그었을 때 그 중간을 의미. 
•  NSLayoutConstraint.activate([ 제약조건 ]) : 제약 조건을 넣고 코드 작성하면 제약 조건 활성화. 

import UIKit

class ViewController: UIViewController {
    
    let label = UILabel()   // Label 생성
    let button = UIButton()
    let image = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        configureUI()   // 뷰가 실행될 때 설정한대로 UI 구현
    }

    // UI 설정 내용을 담은 함수
    private func configureUI() {
        view.backgroundColor = .white   // 배경 색 = 흰색
        
        label.text = "Hello, World"     // label 텍스트
        label.textColor = .black        // label 텍스트 컬러
        // 오토레이아웃을 적용하기 위해 기존 프레임 기반 레이아웃 해제
        label.translatesAutoresizingMaskIntoConstraints = false
        
        button.setTitle("Button", for: .normal)     // button's Title
        button.setTitleColor(.white, for: .normal)  // button's Title color
        button.backgroundColor = .red               // button's background color
        button.layer.cornerRadius = 10              // 테두리 둥글게
        button.translatesAutoresizingMaskIntoConstraints = false
        
        image.image = UIImage(named: "cat")         // image
        image.backgroundColor = .black              // image's background color
        image.contentMode = .scaleAspectFit         // 늘리기 방식
        image.translatesAutoresizingMaskIntoConstraints = false
        
        // 뷰에 UI 추가
        [label, button, image]
            .forEach{ view.addSubview($0) }
        
        // 제약 조건 설정
        NSLayoutConstraint.activate([
            image.heightAnchor.constraint(equalToConstant: 300),
            image.widthAnchor.constraint(equalToConstant: 300),
            image.topAnchor.constraint(equalTo: view.topAnchor, constant: 120),
            image.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            
            label.heightAnchor.constraint(equalToConstant: 40),
            label.widthAnchor.constraint(equalToConstant: 100),
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.topAnchor.constraint(equalTo: image.bottomAnchor, constant: 30),
            
            button.heightAnchor.constraint(equalToConstant: 50),
            button.widthAnchor.constraint(equalToConstant: 80),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 30)
        ])
    }
}

---

코드베이스 UI 작성 시 액션 함수

button.addTarget(self, action: #selector(buttonAction), for: .touchDown)

// ---------------------------------

@objc private func buttonAction() {
        switch button.backgroundColor {
        case .red:
            button.backgroundColor = .blue
        case .blue:
            button.backgroundColor = .red
        default:
            return
        }
    }

---

SnapKit

• 코드 베이스로 UI를 작성할 때, 조금 더 간결한 문법을 사용하도록 도와주는 서드파티 라이브러리. 
• NSLayoutConstraint를 사용할 때보다 편하게 코드를 작성할 수 있게 도와준다. 
• 현업에서 가장 많이 사용하는 필수 라이브러리 중 하나

프로젝트에서 Frameworks, Libraries, and Embedded Content의 +버튼 클릭

 

 

아래 Add Other을 클릭해 Add Package Dependency를 선택. 

 

 

구글에 사용할 라이브러리를 검색해 github 주소를 복사해와서 우측 상단 검색 칸에 입력 후 Add Package. 

 

 

네비게이터 영역에 SnapKit이 생성된 것을 확인하고 import 해준다. 

 

 

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let label = UILabel()   // Label 생성
    let button = UIButton()
    let image = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        configureUI()   // 뷰가 실행될 때 설정한대로 UI 구현
    }

    // UI 설정 내용을 담은 함수
    private func configureUI() {
        view.backgroundColor = .white   // 배경 색 = 흰색
        
        label.text = "Hello, World"     // label 텍스트
        label.textColor = .black        // label 텍스트 컬러
        
        button.setTitle("Button", for: .normal)     // button's Title
        button.setTitleColor(.white, for: .normal)  // button's Title color
        button.backgroundColor = .red               // button's background color
        button.layer.cornerRadius = 10              // 테두리 둥글게
        
        image.image = UIImage(named: "cat")         // image
        image.backgroundColor = .black              // image's background color
        image.contentMode = .scaleAspectFit         // 늘리기 방식
        
        // 뷰에 UI 추가
        [label, button, image]
            .forEach{ view.addSubview($0) }
        
        // 제약 조건 설정
        image.snp.makeConstraints {
            $0.height.width.equalTo(300)    // 같은 값을 이렇게 한 번에 작성 가능
            $0.center.equalToSuperview()    // 정중앙은 Y, X 안 나누고 그냥 center로 가능
        }
        
        label.snp.makeConstraints {
            $0.top.equalTo(image.snp.bottom).offset(20)
            $0.centerX.equalToSuperview()
        }
        
        button.snp.makeConstraints {
            $0.height.equalTo(50)
            $0.width.equalTo(80)
            $0.top.equalTo(label.snp.bottom).offset(20)
            $0.centerX.equalToSuperview()
        }
    }
}

확실히 가독성도 올라가고 쓰기도 편해졌다. 

 label.translatesAutoresizingMaskIntoConstraints = false 

SnapKit을 쓰면 위 코드는 필요 없다고 한다.

 

 

 

---

---

---

 

---

 

 

 

SnapKit 추가하고 import하고 코드까지 다 짰는데 이런 에러가 뜨면서 계속 빌드 실패한다.

지피티한테 물어보면서 뭔가 해보려 했지만 아무것도 되는 게 없다. 

 

 

어떡하지 하다가 최후의 발악으로 그냥 저거 그대로 복사해서 구글에 쳐봤는데 똑같은 상황인 사람이 올린 글이 있었다.

여기서 둘 중 하나 삭제해주기만 하면 된다고 한다.

하나 삭제하고 하니 바로 됐다.

혹시나 싶어 다시 추가한 뒤에 다른 걸 삭제해도 됐다. 

 

해당 글 작성자는 정적 라이브러리, 동적 라이브러리 어쩌고 하는데

스크롤 내려보니 좀 길어서 이건 내일 정리해봐야겠다. 

---

참고한 자료

https://velog.io/@gyeomsony/UIkit-스냅킷-no-such-file-or-directory-오류-해결-방법-feat.-동적-정적-라이브러리

[ Xcode ] 스냅킷 no such file or directory 오류 해결 방법 feat. 동적, 정적 라이브러리