포스트

3주차 과제 (1)

이번 주차 과제는 2주의 시간이 주어지며

ToDoList App을 만드는 것이다.

Lv.1

Todo List 화면 만들기 (TodoListViewController) 키워드 : UIButton, UITableView

  • Storyboard를 활용하여 기본 Todo List 화면 UI를 구성해주세요.
    • UI는 자유롭게 구성해도 됩니다. 다만, 요구사항을 지켜주세요.
  • UIButton과 UITableView을 활용하여 화면을 구성해주세요.
    • Todo 추가하기 UIButton - Lv2에서 기능을 붙여봅니다.
    • Todo List 보여주기 UITableView
  • Todo에 필요한 데이터를 구성해주세요.
    • 할일에 대한 데이터 구성
      • 할일 데이터의 고유값인 “id (Int)”
      • 할일 제목인 “Title (String)”
      • 완료 여부를 확인할 “isCompleted (Bool)”
    • 그 외 나타내주고 싶은 데이터가 있다면 자유롭게 추가해도 좋습니다.
    • 필요하다면 테스트 데이터를 넣어서 UI에서 확인해볼 수 있습니다.
    • 예시
      1
      2
      3
      4
      5
      6
      
        struct Todo {
        // 고유값 id (Int) - var id: Int와 같은 식으로 구성할 수 있겠죠!
        // 타이틀 (String)
        // 완료 여부 (Bool)
        // 기타 추가로 나타내고 싶은 데이터가 있으면 구성해줍니다.
        }
      

1. Diagram

우선 위와 같은 형태로 되게 하려고 한다.

2. StoryBoard 구성

기본적인 구성은 위와 같이 하였다.

왜 굳이 VC를 하나 더 넣었느냐?

화면전달을 이미 어느정도해서 익숙하지만 그래도 더 써보고 싶어서 그랬다.

3. Model 구성

우선 ToDoModel.swift 파일을 하나 만들어 주었다.

1
2
3
4
5
6
7
8
9
import Foundation

struct ToDoModel {
    
    var id : Int // 게시글 번호
    var title : String // 제목
    var isComplete : Bool // 다 끝냈는지?
    
}

이 파일에서 ToDo에 대한 모든것을 담당 할 것이다.

4. MainVC

MainVC는 굳이 꾸밀게 없어서 최근에 배운걸 접목시켰다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import UIKit

class MainViewController: UIViewController {

    @IBOutlet weak var titleLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let titleText = "📂 MyList📋"
        
        var index = 0.0
        
        for letter in titleText {
            Timer.scheduledTimer(withTimeInterval: 0.1 * index, repeats: false) { timer in
                self.titleLabel.text?.append(letter)
            }
                index += 1
            }
        }
   
}

확인 완료.

5. TableVC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import UIKit

class TableViewController: UIViewController {

    @IBOutlet weak var tableView: UITableView!
    
    @IBOutlet weak var doneSwitch: UISwitch! // 연결 끊어주었음.
    
    var lists : [ToDoModel] = [
        ToDoModel(id: 0, title: "test", isComplete: false)
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.dataSource = self
        tableView.delegate = self

    }
    
    @IBAction func addListBtn(_ sender: UIBarButtonItem) {
        
    }
    
}

extension TableViewController : UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        return lists.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TodoList", for: indexPath)
        
        cell.textLabel?.text = lists[indexPath.row].title
        
        return cell
    }
    
    
}

extension TableViewController : UITableViewDelegate {
    
}

일단은 이렇게 기본틀을 잡아주었다.

시작하려고하니 에러가 발생한다.

에러의 내용은 다음과 같다

1
2
 The doneSwitch outlet from the TableViewController to the UISwitch is invalid.
 Outlets cannot be connected to repeating content.

아무래도 반복적으로 생성이 되는곳이다보니 VC에 연결하지 말라는 것이다.

일단은 연결을 끊어주고 작동확인을 먼저 해본다.

굿.

오늘은 여기까지.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.