실전! CleanSwift 바로 써먹기 -1 (세팅 및 scene, payload 모델 생성)

오늘은 제목 그대로! CleanSwift 아키텍쳐를 바로 써먹도록 무작정 시작해보겠습니다! 

세팅 

먼저 세팅부터 합시다! 

템플릿 설치

https://drive.google.com/file/d/1BIj7j_4UZikdwVtIkoBZEgeijrWTNMP4/view

CleanSwift_v3.0.2 (1).zip

어떤 친절하신 분께서 CleanSwift 템플릿 코드를 올려놓으셨더라구요. 다운로드 받아주시고 

 

 

압축을 풀어보면 다음과 같이 파일들이 있습니다. 이제 터미널로 가셔서 해당 폴더의 위치로 접근해주세요!! 

그래서 make 명령어로 템플릿을 설치해 줄겁니다. 

 

cd CleanSwift
make install_templates

저는 다운로드 폴더에 받았습다!!

잘 받아졌는지 확인하려면 ~/Library/Developer/Xcode/Templates/File Templates 요 경로로 들어가보시면 

이렇게 잘 들어가 있는 걸 볼 수 있습니다😊

 

 

템플릿 수정(* 필수 아님) 

 

자 그럼 프로젝트를 하나 생성해봅시다. 

 

 

command + N 으로 파일도 추가해볼건데요. 여기서 제일 밑으로 스크롤 해주세요 

 

짠! 그럼 이렇게 아까 설치한 Clean Swift 템플릿 파일들이 생성됩니다. 우선 viewController 파일을 아무거나 하나 만들어볼게요. 

 

일단 오류나는 건 둘째치고, 혹시 뭔가 걸리는 점 없으신가요??? 

 

 

protocol TestDisplayLogic: class
{
  func displaySomething(viewModel: Test.Something.ViewModel)
}

 

 

좀 더 자세히 봅시다.. 걸리는게 없나요?!!?!? 

전 상당히 거슬리는 점이 하나 있는데요,, 

 

바로 괄호 컨벤션입니다 😭😭 

protocol TestDisplayLogic: class {
    func displaySomething(viewModel: Test.Something.ViewModel)
}

물론 사람마다 다르겠지만 전 보통 이런식으로 쓰거든요 ㅠㅠ 이게 아주 상당히 거슬립니다.

게다가 잘 보시면 아시겠지만, 이 템플릿에서 기본 탭 단위가 스페이스바2칸으로 Xcode 기본 설정인 스페이스4칸과도 다릅니다 ,,,

 

후,, 전 도저히 못 참겠어서 이 템플릿을 먼저 고쳐야겠습니다 ^^ 

 

아까 저희 템플릿 잘 설치되었는지 확인한 경로있죠?

~/Library/Developer/Xcode/Templates/File Templates 여기요 여기 

글로 다시 들어가줄게여 

 

 

 

 

Clean Swift 폴더 들어가보면 이렇게 템플릿 파일들이 있는데요, 지금부터 조금 귀찮은 작업을 할 겁니다 ..ㅎ 

폴더 보시면 interactor, models, presenter, router, scene, unit tests, viewController, worker 이렇게 8개가 있습니다. 

 

사실 얘네 다 바꿔야하긴한데,, 귀찮으니까 우선 scene 폴더 안의 파일만 바꿔줄게요. 

 

scene 폴더 들어가시면 TemplateIcon, TemplateInfo 파일들이랑 또 폴더들이 있네요,, 

여기서 UIViewController 폴더로 들어가 줄게요 

 

그럼 이 안에도 이렇게,,, interactor, models, presenter, router, vc, worker 파일들을 볼 수 있습니다 ㅎㅎ 

얘네 다 바꿔줄거에요 ㅎ 아까 젤 첨에 밖에 있던 각 폴더들에도 얘네가 다 있었기 때문에 우리는 그냥 여기서 한번에 다 바꿔서 쓸겁니다. 

 

인터렉터 파일 여니까 이렇게 나오네요. 방법은 간단합니다. 그냥 위 파일에서 마음에 안드는 컨벤션 다 하나씩 노가다로 바꿔주면 됩니다 ㅎ

이렇게요! 

 

근데 그 스페이스 칸 2개까지 바꾸기 너무 귀찮다! 싶으시면 xcode의 기본 탭 설정을 바꾸셔도 됩니다. 

Xcode에서 command + , 로 환경설정 들어가셔서 Text Editing > Indentation으로 가주세요.

저기 Tab Width랑 Indent Width 가 기본 4인데 둘다 2 spaces로 바꿔줘도 됩니당. 근데 전 그냥 템플릿을 바꿀게여,,ㅎ 

생각보다 그렇게 오래 걸린진 않습니다😊

 

 

 

실전! VIP 사이클 돌아보기 

자 그럼 세팅은 끝났어요! 

이제부터 본격적으로 시작해볼텐데요 먼저 어떤 작업을 할 지 usecase 부터 정해볼게요.

사용예제라고도 하는데 그냥 시스템이 수행할 하나의 동작! 이라고 생각해보겠습니다. 

 

아주 간단한 usecase를 하나 설정할게요.

사용자가 이름을 입력하면 현재 시간에 따라 아침, 점심, 저녁 인사를 표시해주는 동작을 해보겠습니다. 

이 내용 잘 기억해 두세요! 

 

그럼 우선 화면이 하나 있어야겠죠? 아까 만들었던 testViewController 파일은 지워주고 새로 scene을 추가해주겠습니다. 

cleanSwift는 한 화면을 scene 이라는 단위로 설정합니다.

이름을 Hello라고 입력해주면 밑에 알아서 view controller, interactor 등등을 설정해주죠?

쟤네가 하나의 신을 이루는 컴포넌트들이에요

생성된 파일들을 Scenes > Hello 라는 폴더를 만들어서 정리해줬어요

자 이제부터 저 Presenter, Worker, Router, Models, ViewController, Interactor 요소들을 하나씩 살펴볼건데요. 

젤 먼저 핵심 컴포넌트인 V(iewController) - I(nteractor) - P(resenter) 들을 보겠습니다. 

 

VIP 사이클 

clean Swift는 VIP 로도 많이 불리는데요, 아까 설정한 하나의 usecase가 저 ViewController -> Interactor -> Presenter 사이클을 거쳐서 이루어지기 때문입니다. 

 

ViewController는 사용자의 입력을 받아 Interactor에게 넘겨주고, Interactor는 비즈니스 로직을 수행합니다. 

Interactor는 로직 수행의 결과를 presenter에게 넘겨주고, presenter는 받은 결과를 사용자에게 보여주기 위한 format으로 변경하는 presentation 로직을 수행합니다. 

마지막으로 presenter는 변환 결과를 viewController에게 넘겨주면, viewController는 해당 결과를 사용자에게 디스플레이하는 로직을 수행합니다. 

 

뭔가 구구절절하지만 VIP는 딱 저 내용이 핵심입니다! ㅋㅋㅋ

따라서 제어의 흐름이 v->i->p->v 식으로 단방향으로 흐른다는 걸 알 수 있어요.

또한 각 컴포넌트들의 역할이 명확히 나눠져 있기 때문에 어느 한 곳에 역할이 집중되는 것을 방지하고, 오류가 난 부분을 쉽게 찾을 수 있다는 장점이 있죠! 

 

쨌든 쟤네들이 뭔가 자신들이 수행한 결과를 다음 컴포넌트에 계속해서 넘긴다는 것을 알 수 있는데요.

이 넘기는 모델들을 결정해 주는게 제일 먼저 usecase를 수행해주기 위해 할 일이에요! 

 

payload 모델 설정 

이 모델들을 payload 모델이라고 합니다. 뭔가 짐을 실어 나르는? 느낌인가봐요? 

자 그럼 다시 파일로 돌아가서 HelloModels.swift 파일을 한 번 볼게요 

 

 HelloModels.swift 

enum Hello {
    // MARK: Use cases
    enum Something {
        struct Request {
            
        }
        struct Response {
        
        }
        struct ViewModel {
        
        }
    }
}

젤 기본 템플릿 내용입니다. 제일 먼저 현재 Scene의 이름인 Hello enum이 있고 그 안에 Something enum이 있고, request, response,viewModel 구조체들이 있네요! 

 

 

주석에도 쓰여있듯이 Something은 우리가 설정한 usecase를 써주면 됩니다. usecase는 하나의 동작이라고 이해하자고 했죠? 

우리는 인사를 하는 동작을 해줄거니까 SayHello 라고 설정해볼게요. 

 

enum Hello {
    // MARK: Use cases
    enum SayHello {
        ...
    }
}

자 그럼 request, response, viewModel은 뭘까요? 

 

위 그림을 보면 이해가 쉬우실텐데요!

viewController에서 Interactor로 자신이 사용자에게 받은 입력을 전달할 때의 모델을 request,

interactor에서 로직 처리 후 presenter로 해당 결과를 넘겨줄 때의 모델을 response,

presenter에서 포맷 변환 후 viewController로 결과를 넘겨줄 때의 모델을 viewModel 이라고 명명합니다! 

 

그럼 우리는 어떤 모델들을 설정하면 될까요? 

다시 우리의 동작을 상기해봅시다.

 

1. 사용자에게 이름을 입력 받고

2. 현재 시간에 따라 아침, 점심, 저녁 인지 선택합니다.

3. 해당 시간대에 맞는 인사말을 보여줍니다. 

 

크게 3단계로 나눠봤어요.

그럼 request에는 입력받은 사용자의 이름을 담고, 

response에는 아침, 점심, 저녁 여부를,

view model에는 인사말을 전달하면 되겠네요! 

 

HelloModels.swift 

enum Time {
    case morning, afternoon, evening
}

enum Hello {
    // MARK: Use cases
    enum SayHello {
        struct Request {
            let name: String
        }
        struct Response {
            let time: Time
        }
        struct ViewModel {
            let greeting: String
        }
    }
}

이렇게요! 시간대를 표현해주기 위해서 Time 열거형을 추가해주었어요.

 

이제 이 모델들로 VIP 사이클을 타 볼 시간인데...!!! 

그건 다음 글에 계속 해보겠습니다...ㅎㅎ

뭔가 세팅만 하다가 끝난거 같네요,, 빠른 시일내로 다음 글 올려볼게요 🚀

 

 

 

혹시 이해가 안가거나 이상한 부분있으면 댓글로 꼭 알려주세요 :) 

 

 

참고 자료

https://medium.com/swift2go/installing-the-clean-swift-template-in-xcode-6b4367006827