[iOS] Swift로 아주 간단한 Todo List 만들기 (1)

 

안녕하세요, 감자입니다. 이번 시간에는 패스트 캠퍼스 강의를 보면서 따라해본 (클론코딩) 간단한 Todo List를 만들어보는 코드에 대해서 리뷰를 해보려고 해요. 처음 배우는 앱개발이다보니, 클론코딩을 하면서도 모르는 부분이 조금 있더라구요. 그래서 프로젝트가 하나씩 끝날때마다 이렇게 간단하게라도 리뷰를 남겨보려고 합니다. 

제가 구현하고, 기능과 설명을 정리해둔 깃허브 링크입니다. (완전한 전체코드를 볼 수 있습니다.)

https://github.com/deslog/TodoList

GitHub - deslog/TodoList

---

0. 준비

우리는 앱개발을 할 것이기 때문에, project를 생성할 때 iOS에서 App을 선택해 주었습니다. 저는 파일명은 TodoList로 설정해주었고, 주 언어는 Swift를 선택해주었습니다.

이렇게 새로운 프로젝트를 생성하면 아래와 같이 파일들(?)이 생성됩니다. 여기서 main.storyboard 에서 사용자 인터페이스를 구현할 것이고, 다양한 버튼, 화면에 기능을 ViewController.swift 파일에서 코드를 작성할 예정입니다.

저는 인터넷 강의를 보고 진행한 것이기 때문에, main.storyboard 에 ui를 만드는 과정은 생략하고, ViewController.swift파일에 작성했던 기능 위주로 코드 리뷰를 해보려고 합니다.

---

1. 완성된 화면

완성된 화면은 다음과 같습니다. 

초기 화면의 오른쪽 상단에는 Edit버튼, 왼쪽 상단에는 할 일을 추가할 수 있는 + 버튼이 있습니다. 할 일 등록 (+)버튼을 누르면, 팝업창에 할일을 등록할 수 있는 alert창이 뜨고, 그 안에 textField가 있습니다. textField에 할일을 입력하고 등록버튼을 누르면, 할일이 생성됩니다. 그리고 사진에는 나와있지 않지만, 할일을 화면에서 클릭하면 오른쪽에 V 표시가 되며 할일이 완료됐다는 표시도 할 수 있습니다.

edit버튼을 클릭하면 할 일 cell 마다 삭제할 수 있는 버튼 (-)이 왼쪽에 생성되고, 오른쪽에는 할일의 순서를 바꿀수 있는 재정렬 버튼이 있습니다. 또한 edit버튼을 누르지 않고, 왼쪽으로 스와이프해서 삭제가 가능하게끔 설정을 해두었습니다.

이제 코드를 어떻게 구현했는지, 다시 살펴보도록 하죠.

---

2. ViewController.swift 코드 살펴보기 (기능 구현)

2.1 할 일을 등록하면 할 일들이 테이블뷰에 표시되게 구현하기

현재 ui는 아래와 같이 만들어놓은 상태입니다. 여기서 table View에 할일들의 목록이 표현되게 만들어주겠습니다. 그러기 위해서는 table View에 할일을 추가하기 위한 edit버튼과 add(+) 버튼의 action기능도 필요합니다.

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet var editButton: UIBarButtonItem!
    var doneButton: UIBarButtonItem?
    var tasks = [Task]()  {
        didSet { // 프로퍼티 옵저버, tasks 배열에 할일이 추가될 때마다 유저 디폴트에 할일이 저장됨
            self.saveTasks()
        }
    }// Task 배열 생성

우선 viewController class에 tableView라는 이름의 IBOutlet 변수를 생성해 주고, editButton IBOulet변수도 생성해 줍시다. editButton은 UIBarButtonItem 형태로 형성해주었습니다. (doneButtonn, tasks 등은 추후 또 해당 기능을 추가할때 리뷰하겠습니다. 우선 아웃렛변수만 집중)

그리고 edit과 add 버튼에 대한 액션함수도 추가해주겠습니다. (@IBAction함수)

 @IBAction func tapeditButton(_ sender: UIBarButtonItem) {
        guard !self.tasks.isEmpty else { return }
        self.navigationItem.leftBarButtonItem = self.doneButton
        self.tableView.setEditing(true, animated: true)
    }
    
    
    // alert; 제목, 메세지, 하나이상의 버튼 및 입력을 수집하기 위한 텍스트 필드로 구성되어 있다.
    @IBAction func tapAddButton(_ sender: UIBarButtonItem) {
        let alert = UIAlertController(title: "할 일 등록", message: "할 일을 입력해주세요.", preferredStyle: .alert)
        let registerButton = UIAlertAction(title: "등록", style: .default, handler: { [weak self] _ in
            guard let title = alert.textFields?[0].text else { return }
            let task = Task(title: title, done: false)
            self?.tasks.append(task)
            //등록버튼을 눌럿을때 텍스트필드에 있는 값을 가져올 수 있다.
            // textFields는 배열인데, 우리는 하나만 넣어놧기 때문에 [0]로 접근했음.
            self?.tableView.reloadData() // add된 할일들을 테이블뷰에 새로새로 업로드해주는 것
        })
        let cancelButton = UIAlertAction(title: "취소", style: .cancel, handler: nil)
        alert.addAction(cancelButton)
        alert.addAction(registerButton)
        alert.addTextField(configurationHandler: { textField in
            textField.placeholder = "할 일을 입력해주세요." })
        self.present(alert, animated: true, completion: nil)
    
    }

 

▶ tapAddButton 먼저 살펴보겠습니다.

앞에서 설명했듯이 Add 버튼을 누르면 alert창을 띄워 추가할 수 있도록 만들 예정입니다. 따라서  alert 상수를 선언해서 UIAlertController를 이용해서 alert이 표시되게 만들었습니다. title은 "할일 등록", message는 "할일을 입력해주세요", preferredStyle 에는 .alert을 설정해주었습니다.

preferredStyle 에는 alert와 action시트 두가지가 존재하는데, 두가지의 차이는 다음과같습니다.

그 다음 registerbutton이라는 상수를 선언한후, UIAlertAction 기능을 활용하여 alert에 버튼이 추가되게 만들어줬습니다. Title은 등록, style은 디폴트로, handler 파라미터에는 클로저를 정의했습니다. 사용자가 알럿 버튼을 눌렀을때, 실행해야하는 행동을 클로저안에 정의해주면 됩니다. 등록버튼을 누를때마다 할일을 추가해줘야하기 때문에 이 기능을 담은 클로저를 정의해주면 됩니다.

그 이후 alert 창에는 cancle 버튼도 추가해주기 위해서 canclebutton 을 선언해주었고, style은 cancle, 행동해야할 파라미터를 정의하는 handler에는 nil로 정의해주었습니다.

그리고 alert.addAction 메서드를 통해 방금 만든 uibutton을 넣어주면됩니다. 또한 우리는 alert창에서 할일에 대한 입력을 받을 것이기 때문에, textField를 추가해주어야합니다. textField를 추가하는 방법은 간단합니다. 위 코드처럼 alert.addTextFields 메서드를 통해 간단하게 추가할 수 있습니다. configurationhandler 파라미터에는 클로저를 넣어주어야 하는데, 알럿을 표시하기 전에 텍스트필드를 구성하기 위한 클로저입니다. 이 클로저는 반환값이 없고, textField 객체에 해당하는 단일매개변수를 사용합니다. 한마디로 알럿에 사용하는 텍스트필드를 설정하는 클로저라고 생각하면됩니다. 그래서 우리는 , "할일을 입력해 주세요" 라고 placeholder로 표시되게 만들었습니다.

 

이제 이렇게 액션을 설정완료했으니,

▷ 사용자가 진짜 입력한 할일을 tasks 라는 배열에 저장해줍시다. (테이블뷰에 표시하기 위해 저장이 필요)

task라는 구조체를 추가해주었습니다. New File을 만들어서, task.swfit파일을 만들었습니다. 그 안에 task를 정의해주었습니다.

//
//  Tesk.swift
//  TodoList
//

import Foundation

struct Task {
    var title: String // 할일 내용 저장
    var done: Bool // 할일이 완료 되었는지 여부 저장
}

title 프로퍼티에는 할일 내용을 정의해줄것이고, done이라는 프로퍼티에는 완료 되었는지에 대한 여부를 정의할 예정입니다.

그리고 이제 할일들을 저장하는 배열을 만들어줍시다.

viewController 파일로 돌아가서, class에  tasks변수를 생성해주었습니다.

그리고 앞서 registerButton handler 클로저 부분에 tasks 배열에 할일이 추가될 수 있도록 캡쳐목록을 정의해주었습니다. 클로저 선언부분에서 캡쳐목록을 정의해주는 이유는, 클래스처럼 클로저는 참조타입이기 때문에 클로저의 본문에서 self로  클래스의 인스턴스를 캡쳐할때 강한 순환참조가 발생할 수 있다고합니다. 강한 순환참조란, 두개의 객체가 상호 참조하는 경우 강한 순환참조가 만들어지는데, 이렇게 되면 순환참조와 연관된 객체들은 레퍼런스 카운트가 0에 도달하지 않게 되고, 결국 메모리 누수가 발생하게 됩니다. 그래서 이 강한 순환참조를 해결하는 방법은 클로저의 순환부에서 캡쳐목록을 정의함으로써 해결할 수 있습니다. 우리는 [weak  self]를 작성하므로써 캡쳐목록을 정의했다고 생각하면 된다. (이후 또 다룰 예정이라고 합니다 . 그때 자세히 설명하도록 하겠습니다 ㅠㅠ ) 클로저의 선언부에 weak나 unknown 키워드로 캡쳐목록을 정의하지 않고, 접근하게 되면 강한 순환참조가 발생하게 되어 메모리 누수가 발생할 수 있다는 점만 알아두자.

다시 코드로 돌아가서,

textfield는 옵셔널로 반환되기 때문에 guard로 바인딩을 해주었습니다. 그리고 tasks 에 방금 만들어준 task 인스턴스를 추가해주면서 알럿창에 할일을 등록할떄마다 tasks에 할일들이 추가되도록 만들어주었습니다.

 

▷ 다음으로 tasks 배열에 저장되어있는 할일들을 tableView에 나타내어봅시다.

uI table View 데이터소스 프로토콜을 viewController에 채택해주었습니다. 

    override func viewDidLoad() {
        super.viewDidLoad()
        self.doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneButtonTap))
        // Do any additional setup after loading the view.
        self.tableView.dataSource = self
        self.tableView.delegate = self
        self.loadTasks() // 유저디폴츠에 저장된 할일을 앱을 껏다 켜도 다시 불러와주는것
        
    }

이렇게 viewDidLoad 함수에 dataSource와 delegate를 self로 채택해주었습니다. 이렇게 작성하고 나면, UITableViewDataSource를 채택하라는 경고가 뜨게 됩니다. 따라서 class 외부에 extension을 이용해서 datasource를 채택해보도록 하겠습니다.

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.tasks.count
        }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        // 사용하지 않는 메모리를 낭비하지 않기 위해서 dequeueResusableCell을 이용해서 셀을 재사용 하는 것
        let task = self.tasks[indexPath.row]
        cell.textLabel?.text = task.title
        
        // 셀 표시됐을 때 체크마크 표시되게 하는 코드
        if task.done {
            cell.accessoryType = .checkmark
        } else {
            cell.accessoryType = .none
        }
        return cell
    }

cell.textLabel?.text = task.title 코드 부분에서 task에 입력된 title들을 cell에 담아주고, return cell을 통해 반환해주었습니다. 그러면 할일을 등록할 때마다 테이블뷰를 갱신하여 보여주어야하기 때문에 tapAddButton 함수로 다시 돌아가서, self?.tableView.reloadData() 메서드를 통해 테이블뷰에 있는 내용들을 reload 해줄 수 있도록 만들어줍니다.

여기까지 완료하면, add 버튼을 누를 때마다, 테이블뷰에 데이터가 로드되는 것을 볼 수 있습니다. 하지만 여기까지만 완료한다면, 문제점이 있는데 앱을 종료하게 될 경우 데이터가 저장되지 않고 입력했던 할일들이 모두 삭제된다는 것인데, 이를 해결하기 위해서는 userdefaults를 이용해서 우리가 입력한 데이터들이 앱을 재실행하더라도 모두 살아있도록 따로 처리를 해주어야합니다.

다음글 에서는 userDefaults를 이용한 코드 리뷰에 대해서 업로드 하겠습니다.

설명하고, 제가 알아듣게 문서화하느라 코드가 뒤죽박죽인데, github.com/deslog/TodoList에 방문하시면 전체코드를 보실 수 있습니다.