지난시간에서

채팅리스트 1편에서 오토레이아웃 설정까지 마무리했다.

오늘은 ChatListCollectionViewCell 을 추가하여 해당 객체가 Main을 담당하게 만들어 볼 것이다.

셀을 추가하면 이렇게 목록에 뜨게 되는데 바로 맨 오른쪽을 봐보자

해당 class가 현재 UICollectionViewCell 로 되어있으니 지정을 해주어야한다. 저 클래스 안에 ChatListCollectionViewCell 라고 적고 적용하기 위해 엔터를 기분좋게 눌러준다.

그리고 여기서 또 한 가지를 해주어야 하는데 cell 같은 경우는 컬렉션 뷰에서 재사용을 하는 녀석이다보니 재사용ID가 필요하다.

바로 Identifier 란에도 ChatListCollectionViewCell를 적용시켜주어야한다. 또 한 번 엔터를 눌러 적용하자.

이렇게 해두는 것이 업계의 관행 같은 거라고 한다 해놓으면 효율적이라고 하니 알고있어야겠다.

cell을 담당하는 파일을 불러오기

Content View 를 클릭 후 상단에 있는 ChatListViewController.swift 를 ChatListCollectionViewCell.swift 로 변경해준다.

그리고 프로필 사진이 들어가는 이미지뷰와 이름, 대화내용, 날짜 등을 모두 연결해준다. 연결하는 법은 간단하다 ctrl 을 누른채로 클릭하여 쭈욱 끌어당겨주면 된다. 그냥 우클릭으로 끌어와도 되더라.

그렇게 하나하나 연결을 시키고 이름을 지정해준다 나중에 데이터를 업데이트를 해야하기 때문에 연결한 다음에 특정 데이터를 받고 업데이트 하는 작업을 한다.

자 이렇게 준비가 되었다면 이제 미리 적어둔 챗 데이터를 받아서 각각의 이미지나 셀에 필요한 정보를 업데이트를 해볼 것이다.

미리 채팅내용을 정리하여 적어보았다. 이름과 채팅내용, 날짜 이렇게 정리를 한 후 다시 cell화면으로 돌아와준다

 func configure(_ chat: Chat) {
        thumbnail.image = UIImage(named: chat.name)
        nameLabel.text = chat.name
        dateLabel.text = chat.date
    }

그리고 해당 코드를 입력하는데 해석하자면 UIImage에 chat의 이름을 가진 이미지를 가져와라 라는 명령.

내가 나중에 보고 싶으니 하나하나 뜯은 해석을 써놓겠다. 나는 비전공자이니, 이해가 처음부터 끝까지 되어야 넘어갈 수 있다.

코드 설명

func configure(_ chat: Chat)

• func : 이건 "함수"를 만들 때 쓰는 말. 함수는 어떤 특정 작업을 수행하는 코드 덩어리이다

• configure : 이건 내가 지정한 함수의 이름이다. " 설정하다 "라는 뜻. 이 함수는 "configure"라는 이름인 셈이다.

• (_ chat: Chat) : 이건 함수가 사용할 데이터를 의미한다. 이 데이터는 "chat"이라는 이름으로 불리고, "Chat"이라는 자료형을 가지고 있다. 이건 마치 레고 블록처럼 특정 모양을 가진 데이터라고 생각하면 된다

thumbnail.image = UIImage(named: chat.name)

• thumbnail : 이건 작은 이미지를 보여주는 상자 같은 거다. 우리가 프로필 사진이나 작은 미리보기 이미지를 볼 때 사용하는 공간이라고 생각하면 된다.

• .image : 이건 " thumbnail " 상자에 실제로 보여줄 이미지를 의미한다.

• UIImage(named: chat.name) : 이 부분은 이미지를 가져오는 역할을 한다.

• named: chat.name : 이건 이미지를 찾을 때 사용할 이름을 의미한다. 예를 들어, 만약 " chat.name "이 " curo "라면, UIImage(named: " curo ")는 " curo "라는 이름의 이미지를 찾아서 가져오겠다는 뜻이다.

nameLabel.text = chat.name

• nameLabel : 이건 화면이나 채팅방의 사람 이름을 보여줄 공간이다.

• .text : 이건 그 상자에 실제로 보여줄 글자를 의미한다.

• chat.name : 이건 채팅방의 이름. 예를 들어, 채팅방 이름이 " 친구들 "이라면, nameLabel.text = chat.name 은 화면에 " 친구들 "이라는 글자가 나타나게 한다. 이 부분은 채팅방의 이름을 화면에 보여주는 역할을 한다.

 dateLabel.text = chat.date

• dateLabel : 이건 화면에 날짜를 표시하는 상자. 메시지를 보낸 날짜나 시간을 보여줄 공간이다.

• .text : 이건 그 상자에 실제로 보여줄 날짜나 시간을 의미한다.

• chat.date : 이건 채팅의 날짜이다. 예를 들어, " 2024년 9월 4일 "이라면, dateLabel.text = chat.date는 화면에 " 2024년 9월 4일 "이라는 날짜가 나타나게 해줄것이다

이렇게 하나 하나 뜯어서 보면 헷갈렸던 부분에 대해 이해가 된다. 아직은 배우는 단계라서 함수들의 사용위치나 순서도 모르는 초짜니까 귀찮더라도 이렇게 확인하는 습관을 들였다. 그러다보니 강의 20분짜리를 듣는데 1시간이 걸리는 날도 있다.

프로토콜로 넘어가면 이제 머리 터지는거다. 현재 가르쳐주시는 강사님이 SwiftUI를 배우기 전 UIkit을 짚고 넘어가는게 좋다고 하여 지금 열심히 공부하고 있지만 프로토콜로 넘어가는 순간 강사님이 순식간에 써버리는 UIkit코드들을 보면 다시 머리가 하얘진다.

그냥 더 해보는 수밖에 없다. 이해가 되지 않더라도 만들면서 이해해 보려고 한다.