iOS개발 강의 #5

드디어.. 강의의 마지막 주차에 도달했다.
그동안 제대로 들은 것 같지는 않지만 강의를 다시 들을 수 있기를 바라며 파이널 프로젝트를 신중하고 신속하게 마무리 해보았다.

파이널 프로젝트를 진행하는 방법은 업로드되어있는 파일에 "// TODO: " 에 포함되어있는 글을 읽고 코드를 추가해주기만 하면 되는 것 같아서 아주 쉽게 느껴졌다

import UIKit

struct Message {
    let senderName: String
    let lastMessage: String
    let senderImageName: String
    let lastSentDate: String
    
    
    var senderImage: UIImage? {
        // TODO: Image를 주어진 senderImageName가지고 생성해주세요.
        return UIImage(named: senderImageName)
    }
    
    static var dummyList: [Message] {
        return [
            Message(senderName: "James", lastMessage: "어제 잘들어갔음???", senderImageName: "p2", lastSentDate: "2020/08/20"),
            Message(senderName: "김은지", lastMessage: "아니 도대체 무슨일이야 연락도 안되고... ", senderImageName: "p1", lastSentDate: "2020/08/20"),
            Message(senderName: "토니", lastMessage: "어제 집에가는데 사람을 만났어. 근데 그사람들이 너무 이상한거야.. 무슨말이냐면 말이지 나도 모르겠어", senderImageName: "p3", lastSentDate: "2020/07/19"),
            Message(senderName: "GOT7", lastMessage: "새로 나온 앨범이 너무 잘된다! 대박나자", senderImageName: "p4", lastSentDate: "2020/07/18"),
            Message(senderName: "Allen", lastMessage: "요새 iOS공부한다면서? 잘되고 있어??", senderImageName: "p5", lastSentDate: "2020/07/15"),
            Message(senderName: "유명배우", lastMessage: "iOS 개발자 사람 너무 없어 요새ㅠㅠ 개발자만 되도 취직 보장이다 무조건..", senderImageName: "p6", lastSentDate: "2020/07/10"),
            Message(senderName: "중국에서유명함", lastMessage: "공부만 너무 열심히 하는거 아니야? 나랑 대화좀 하자..", senderImageName: "p7", lastSentDate: "2020/07/08"),
            Message(senderName: "Christina", lastMessage: "실력이 너무 좋으셔서, 해외지사로 이직을 권해드리고 싶어요.", senderImageName: "p1", lastSentDate: "2020/06/10"),
            Message(senderName: "잘생긴친구", lastMessage: "주변얘 주식 대박났데.. 10억을 벌었다던데", senderImageName: "p3", lastSentDate: "2020/06/08"),
            Message(senderName: "주식하지마라", lastMessage: "주식하다가 골로간다..", senderImageName: "p4", lastSentDate: "2020/06/06"),

        ]
    }
}

위에서는 dummyList에서 보내주는 senderImageName을 가지고 senderImage를 매칭시키는 작업을 하는 것이었다 (Text -> Image)

import UIKit

class KakaoChatLandingViewController: UIViewController {
    // TODO: TableView를 만들어서 outlet으로 추가해주세요.

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        setupTableView()
    }

    func setupTableView() {
        // TODO: TableView를 datasource을 설정해주세요.
//        tableView.dataSource = self
//        tableView.delegate = self
    }

    private let list = Message.dummyList
}

extension KakaoChatLandingViewController: UITableViewDataSource {
    // TODO: UITableViewDataSource를 설정해주세요.
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //TODO: list의 갯수만큼 나오게 해주세요.
        return Message.dummyList.count
//        return 7
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // TODO: KakaoChatTableViewCell을 생성해주세요. 생성하고 configure을 불러주세요.
        
//        let cell = tableView.dequeueReusableCell(withIdentifier: "KakaoChatTableViewCell", for: indexPath) as! KakaoChatTableViewCell
//
//        let message = Message.dummyList(at: indexPath.item)
//        cell.configure(message: message)
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "KakaoChatTableViewCell", for: indexPath) as? KakaoChatTableViewCell else {
            return UITableViewCell()
        }

        let item = Message.dummyList[indexPath.item]
        cell.configure(message: item)
        
        return cell
    }
}

이번에는 dummyList의 내용들을 화면에 차례로 나오게 하는 작업이다.

import UIKit

class KakaoChatTableViewCell: UITableViewCell {
    /*
     TODO: senderImageView, nameLabel, lastMessageLabel, lastSentDateLabel를 만들어서 outlet으로 추가해주세요.
     */
    @IBOutlet weak var senderName: UILabel!
    @IBOutlet weak var lastMessage: UILabel!
    @IBOutlet weak var lastSentDate: UILabel!
    @IBOutlet weak var senderImage: UIImageView!
    
    func configure(message: Message) {
        /*
         TODO: Cell이 생성되는 시점에서 메세지를 불러 렌더링해주세요
         
         예를들어..
         senderImageView.image = message.senderImage
         */
        senderName.text = message.senderName
        lastMessage.text = message.lastMessage
        lastSentDate.text = message.lastSentDate
        senderImage.image = message.senderImage
    }
}

다음으로는 화면에 배치되어있는 이미지뷰어, 라벨 등에 넣을 데이터를 매칭시키는 작업이었다 (어느 위치에 어떤 데이터를 넣을지)

위와같은 작업들을 하고 나면 아래와 같은 결과가 나오게된다.

진행하며 어려웠던 부분을 꼽자면 dummyList의 내용이 cell들에 적용되지 않아 꽤 난항을 겪었고,
더 어려웠던 부분은 TableViewCell 안의 내용의 간격을 맞추는 일이었다. (물론 지금도 매우 이상하긴하다)

이것으로 5주간의 학습을 마치고 개인적으로 더 공부한 뒤에 다시 돌아오도록 하겠다.