-Preview-
| Change Label |
|---|
 |
-Code Review-
1. Change Label
오늘은
UIKit을 사용하여 버튼을 누르면 텍스트가 바뀌는 것을 구현해보았다.
SwfitUI로는 간단히 구현할 수 있지만, UIKit으로는 구현해본적이 없기 때문에 전혀 감이 잡히지 않았고, 인터넷 등을 찾아보며 방법을 익혔다.
1) Label, Button 선언하기
먼저 ViewController내에서 레이블과 버튼을 선언한다.
이 때, viewDidLoad()는 뷰 컨트롤러의 뷰가 메모리에 로드된 후 호출되는 코드로, 레이블과 버튼 선언은 이 코드 이전에 해야한다.
import UIKit
class ViewController: UIViewController {
let label: UILabel = UILabel()
let button: UIButton = UIButton()
override func viewDidLoad() { ... }2) 제약조건 설정하기
다음으로는 레이블과 버튼의 크기나 폰트, 색 등의 제약조건을 설정해 주어야 한다.
이는 viewDidLoad() 내부에서 처리해주어야 한다.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
view.backgroundColor = .white // 화면의 배경색을 흰색으로 설정
// 레이블 설정
label.text = "Hello, UIKit!!" // 레이블의 텍스트
label.textAlignment = .center // 레이블의 정렬
label.font = UIFont.systemFont(ofSize: 24) // 레이블 사이즈
label.translatesAutoresizingMaskIntoConstraints = false // Auto Layout 사용을 위한 설정
view.addSubview(label) // 레이블을 View에 추가
// 버튼 설정
button.setTitle("Change Text", for: .normal) // 버튼의 모양 설정(텍스트, 노말)
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside) // 버튼의 타겟 설정
button.frame.size = CGSize(width: 100, height: 50) // 버튼 크기 설정
button.backgroundColor = .blue // 버튼의 배경 색 설정
button.translatesAutoresizingMaskIntoConstraints = false // Auto Layout 사용을 위한 설정
view.addSubview(button) // 버튼을 View에 추가
// Auto Layout 설정
NSLayoutConstraint.activate([
label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 20),
button.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])
}
// 버튼을 눌렀을 때 호출되는 메서드
@objc func buttonTapped() {
label.text = "Text Changed!!"
}3) Preview 만들기
원래 UIKit을 사용할 때는 StoryBoard로 UI를 구성하고 빌드를 통해 UI의 구현 상태를 확인하는 것이 보통이다.
그러나 이번에는 스토리보드를 사용하지 않고, SwiftUI를 사용하여 Preview를 만들어 뷰의 구현 상태를 확인해 보았다.
import SwiftUI
import UIKit
struct PreviewTest: PreviewProvider {
static var previews: some View {
ViewControllerPreview {
// 프리뷰에 뷰 컨트롤러 표시
ViewController()
}
// 뷰 컨트롤러 표시 영역을 전체로 설정
.edgesIgnoringSafeArea(.all)
}
}
struct ViewControllerPreview<ViewController: UIViewController>: UIViewControllerRepresentable {
let viewController: ViewController
init(_ builder: @escaping () -> ViewController) {
self.viewController = builder()
}
func makeUIViewController(context: Context) -> ViewController {
return viewController
}
func updateUIViewController(_ uiViewController: ViewController, context: Context) {
// UI 업데이트 필요시 여기에 작성
}
}4) 구현 결과물
2. Custom Fonts 추가하기
팀원들과 미니 프로젝트를 진행하며 시스템 폰트가 아닌 새로운 폰트를 적용하기로 하였다.
에셋을 이용해 컬러를 추가해본 적은 있었지만, 폰트를 추가하는 것은 처음이었는데, 생각보다 방법이 어렵지 않아서 금방 끝낼 수 있었다.
1) Font 파일 추가하기
우선 앱에 사용할 폰트를 다운받고 프로젝트에 Fonts 파일을 새로 생성하여 내부에 다운받은 폰트 파일(otf,ttf)을 삽입한다.
그 뒤 프로젝트의 info에서 Fonts provided by application를 key로 추가하고, item의 value에 다운받은 폰트의 이름을 작성해준다.
이렇게만 해도 프로젝트 내부에서 다운받은 폰트를 사용할 수 있지만, 편의를 위해 extension으로 UIFont에 값을 추가하여 커스텀 폰트를 보다 쉽게 적용할 수 있도록 하였다.
import Foundation
import UIKit
extension UIFont {
static func dmSans(size fontSize: CGFloat, weight: UIFont.Weight) -> UIFont {
let familyName = "DMSans"
var weightString: String
switch weight {
case .bold:
weightString = "Bold"
case .regular:
weightString = "Regular"
default:
weightString = "Regular"
}
return UIFont(name: "\(familyName)-\(weightString)", size: fontSize) ?? .systemFont(ofSize: fontSize, weight: weight)
}
}
// 사용: label.font = UIFont.dmSans(fontSize: 16, weight: .Bold)3. GitHub 팀 프로젝트 연결하기
오늘은 미니 프로젝트의 일환으로 GitHub에 팀 repository를 생성하고 연결을 하는 작업을 진행하였다.
연결 과정에서 너무 많은 문제가 있었는데... 팀으로서 Git을 활용한 프로젝트를 진행하는 것이 거의 처음이니 모르는 것도 많고 헷갈리는 것도 많은 탓에 발생하는 문제들이었다.
이 과정 또한 성장을 위한 발판이라고 생각하며... 열심히 공부해서 극복해야겠다.
1) Git Clone
팀원분께서 팀 프로젝트의 repository를 만들어 주셔서 나는 clone으로 레포지토리를 연결하였다.
$ git clone그 뒤에는 내가 도맡아 폰트와 컬러를 추가하고 push를 진행하여 다른 팀원들이 pull 하면 되게끔 하려고 했는데,
그만 main 브랜치에 push를 해버려 commit이 꼬이고 conflicts까지 발생했다.
거기에 더해 프로젝트를 진행할 파일을 만들고 제작을 진행하려고 했더니 'DS_Store'파일이라던가, 쓸모없는 파일들이 추가되는게 거슬렸다.
이를 해결하고자 .gitignore를 사용하기로 했는데...
이 과정에서 merge를 잘못했는지 push를 잘못했는지 또 문제가 생겨서 결국 레포지토리를 버리고 새로 만들기로 했다...
2) GitHub Tokken
미니 프로젝트에 변경사항을 push하기 위해 터미널을 통해 push 코드를 입력했다.
$ git push그랬더니 갑자기 GitHub의 유저 네임과 비밀번호를 입력하라는 메세지가 생겼다.
한번도 그런적이 없었는데 너무 갑작스러웠다...
아무리 답을 입력해도 유저네임이나 비밀번호가 틀렸다는 대답만 돌아올 뿐 push가 진행되지 않았다.
이와 관련된 내용을 찾아보니 유저의 GitHub 엑세스토큰을 입력하면 된다는데, 꽤 오래전에 만든 탓에 엑세스토큰을 어디에 저장했는지 기억이 나질 않았다.
다행히 맥북의 키체인 접근에 값이 저장되어 있어서 무사히 push를 마칠 수 있었는데, 결국 어떤 상황에서 이런 문제가 발생하는건지는 명확히 알지 못했다.
-Today's lesson review-
오늘은 특강을 통해 Git의 이론에 대해서도 배우고, 과거에 배웠던 지식들을 활용하여 팀 프로젝트를 GitHub로 통합하려고 했는데 잘 되지 않았다.
여전히 Git은 활용하기가 너무 어렵고, 특히나 여러명이 같이 사용하다보니 더 어려운 것 같다.
앞으로 팀 프로젝트를 하면 자주 사용해야 할텐데...
익숙해지려면 그만큼 많이 써보고 공부해야겠다고 생각했다.