[iOS] 새싹 프로젝트 (BoxOffice STEP3) #1 코드 베이스 화면 작업

[STEP3] 구현시 고민한 사항

STEP3는 사용자 UI를 개발해야 합니다.

STEP2에서 개발한 API 수신 모델을 사용해 CollectionView의 내부 뷰에 BoxOffice API를 사용해 수신되는 데이터를 연결해야 합니다.

이전 프로젝트에서 진행한 UI 작업은 모두 StoryBoard를 사용하여 개발했기 때문에 코드 기반 화면 작업에 여러 에러? 막히는 부분들이 많았고 이번 글에서는 그 문제가 무엇이고 어떻게 해결했는지를 작성하고자 합니다.

StoryBoard → CodeBase 

이미 스토리 보드를 생성해서 프로젝트를 진행중이라면 이제 설명드리는 작업들을 진행해야 코드 기반으로 UI를 그릴수가 있습니다.

아래 작업은 프로젝트에서 스토리 보드와 연결된 Main 파일을 삭제하고, UIKIT Main Storyboard File Base Name을 지우는 작업입니다.

오른쪽 Storyboard File Base Name을 지우지 않으면 에러와 함께

'Main'이라는 스토리 보드를 찾을 수 없습니다.

라는 문구가 나타나게 됩니다.

왜 에러가 뜨는 것이냐면 이전에 스토리보드에서는 우리가 코드를 작성하는 ViewController와 UI 작업을 진행하는 StoryBoard와의 연결을 프로젝트에서 UIKIT Main Storyboard File Base Name 을 통해서 연결 해주었는데 코드 베이스 구현시 이전 작업이 필요가 없어지기 때문에 이와 같은 작업이 필요하게 됩니다.

다음은 SceneDelege에 보여주고자 하는 뷰컨에 대한 객체를 연결 할겁니다

SceneDelegate는 화면에 무엇을 보여줄지 관리하는 역할을 가지는데

scene(_: willConnectTo: options: )

위 메서드를 사용하여 첫 view(rootView)를 만드는데 사용됩니다.

SceneDelege 설정

 

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: windowScene)
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
    }
}

ViewController 배경 색상 설정

 

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .red
    }
}

결과 이미지

이렇게 되면 코드 기반 UI 작업의 준비가 완료됩니다.