54일차 TIL
모의면접 시뮬레이션 Q&A
Q1. Storyboard를 이용해 UI를 구현하는 방법을 설명해 주세요.
A : UIViewController를 생성해서 UI 요소들을 드래그, 드롭 방식으로 ViewController의 View에 배치하여 구현합니다.
스토리보드에서나 코드에서나 UI를 구현할 때는 오토레이아웃 Constraints를 잘 잡아주는 것이 중요하며,
스토리보드에서 요소들은 IBOulet, IBAction을 통해 코드와 연결하여 여러 가지 작업을 수행할 수 있습니다.
이건 ChatGPT 답변
Storyboard를 사용하여 UI를 구현하는 방법은 다음과 같습니다.
- Xcode에서 새로운 Storyboard 생성: Xcode를 열고, 프로젝트 내에서 Storyboard 파일을 생성합니다.
- UIViewController 추가: Storyboard 내에서 UIViewController를 추가합니다. 이는 기본적인 화면 구성을 나타냅니다.
- UI 요소 추가: 필요한 UI 요소를 Storyboard에 추가합니다. 예를 들어, UIButton, UILabel, UIImageView 등을 드래그 앤 드롭하여 화면에 배치합니다.
- Constraints 추가: UI 요소들 간의 위치와 크기를 조절하기 위해 오토레이아웃 Constraints를 추가합니다. 이를 통해 화면이 다양한 기기와 크기에 대응할 수 있습니다.
- IBOutlets 및 IBActions 설정: UI 요소들을 ViewController 클래스에 연결하기 위해 IBOutlets(화면 요소와 코드 연결) 및 IBActions(화면 요소의 이벤트 처리)를 설정합니다.
- ViewController 코드 작성: UIViewController 클래스를 생성하고, Storyboard에서 추가한 UI 요소들과의 상호작용을 구현하기 위한 코드를 작성합니다.
Storyboard를 사용하면 UI를 시각적으로 설계하고, 요소들 간의 관계를 쉽게 파악할 수 있습니다. 또한, 코드와의 연결을 통해 UI 요소에 대한 작업을 보다 쉽게 처리할 수 있습니다.
면접 방식 답변
"Storyboard를 이용한 UI 구현 방법은 Xcode에서 시각적으로 화면을 디자인하고, 필요한 UI 요소들을 추가하고 배치하는 방식입니다. 먼저 Xcode에서 Storyboard 파일을 생성하고, 그 안에 UIViewController를 추가하여 기본적인 화면을 구성합니다. 이후에는 드래그 앤 드롭을 통해 필요한 UI 요소들을 추가하고, Constraints를 설정하여 화면의 크기와 위치를 조절합니다. 또한, UI 요소들을 코드와 연결하기 위해 IBOutlets와 IBActions를 설정하고, 이를 통해 화면 요소들에 대한 작업을 쉽게 처리할 수 있습니다. Storyboard를 사용함으로써 UI를 시각적으로 구현하고, 코드와의 연결을 통해 보다 효율적으로 작업할 수 있습니다."
수정
Q1. Storyboard를 이용해 UI를 구현하는 방법을 설명해 주세요.
A : Storyboard에 UIViewController를 생성해서 필요한 UI 요소들을 드래그&드롭하여 시각적으로 화면을 디자인하고, 요소들을 추가하고, 배치합니다. 추가한 요소들은 Constraints를 설정하여 화면의 크기와 위치를 조절합니다.
스토리보드에서 UI 요소들은 IBOulet, IBAction을 통해 ViewController 클래스와 연결하여 여러 가지 작업을 쉽게 처리할 수 있습니다. 스토리보드를 사용하면 UI를 시각적으로 구현하고, 코드와의 연결을 통해 보다 효율적으로 작업할 수 있습니다.
UICollectionView
이렇게 생긴 컬렉션 뷰를 만들어보자!
* 코드에서 뷰의 Constraints를 설정해 줄 때 background에 색을 입혀서 맞추면 편하다!
버튼이 좀 더 컸으면 좋겠는데,, 그건 나중에 설정해 보자!
이제 단어장을 추가하는 페이지를 만들어보려고 하는데,,
아무래도 코드를 세분화하니까 버튼 클릭 시 delegate를 사용해서 페이지를 이동해야 하는 것 같다..!
지금 상황을 정리해 보면
UIView에 버튼이 있고, 이 View를 ViewController에 delegate로 해서 버튼 클릭 시 present로 화면 올리는 기능을 추가하려고 한다!
1. 프로토콜 생성
ㄴ 버튼 탭 액션을 처리하기 위한 프로토콜
protocol AddVocaBookHeaderViewDelegate: AnyObject {
func didTapPlusButton()
}
2. Delegate 속성 추가
class AddVocaBookHeaderView: UIView {
weak var delegate: AddVocaBookHeaderViewDelegate?
// 기타 코드 생략...
@objc func plusButtonTapped(_ sender: UIButton) {
delegate?.didTapPlusButton()
}
}
3. ViewController에 Delegate 구현
class AddVocaBookViewController: UIViewController, AddVocaBookHeaderViewDelegate {
let headerView = AddVocaBookHeaderView()
override func viewDidLoad() {
super.viewDidLoad()
headerView.delegate = self // delegate 설정
}
// 기타 코드 생략...
// MARK: - AddVocaBookHeaderViewDelegate
func didTapPlusButton() {
// 버튼 탭 액션 처리 및 화면 이동 코드 작성
let destinationVC = YourDestinationViewController()
navigationController?.pushViewController(destinationVC, animated: true)
}
}
버튼의 이미지 클릭 시 액션이 실행되지 않는 문제 발생
Button의 bottom을 안 잡아줘서...