SwiftUI 문서 구조화 해보기 - 초급

1. 이름의 중요성

 

개발 공부를 하면서 많이들 놓치는 부분이 바로

내가 작성한 코드 문서에 필요한 모든 내용을 한 파일에 쏟아 붓는 것이다.

 

기능 구현을 위해서 코드를 작성하다보면 이것도 필요하고, 저것도 필요하고 다 필요하다고 생각되어

한 문서에 모든 것을 다 때려넣는다.

 

SwiftUI를 공부하면서 가장 어려운 것은 문서 작성 시 문서 이름과 내용이 일맥상통해야한다는 것이다.

이는 변수명, 함수명, 사용자 정의 타입명을 지정할 때도 똑같다.

 

제 3자가 혹은 나중에 본인이 본인이 작성한 코드를 읽을 때, 함수명 혹은 변수명을 어떻게 지었느냐에 따라

코드를 분석할 때 이해도가 달라진다고 한다.

 

문서를 구조화 할 때도 문서마다 이름을 달리 지을 것이고

그 이름에 맞는 내용이 문서에 담겨있어야 전체적인 프로그램을 이해하는데 어려움이 없을 것이다.

 

 

2. 열할 구분

프로그램의 문서는 역할에 따라 구분을 지어야한다.

그 문서에는 함수만 들어갈 수도 있고, 데이터 구조체가 들어갈 수도 있다.

SwiftUI에서는 View 컴포넌트에 해당하는 것들과 클래스, 구조체 등을 나눌 수도 있을 것이다.

이름을 적절히 짓고, 그 이름에 맞게 역할을 나눠서 문서를 작성하는 것이 유지보수와 확장성이 용이해질 것이다.

 

3. 적용

 

나도 아직 배우는 단계라서 처음부터 이름과 역할을 확실히 구분짓고 문서를 나누고 문서를 구조화하지는 못했다.

하지만 조금씩 내용을 채워나가면서 중간중간 반복적이게 사용되는 객체와 뷰 컴포넌트들이 보이다보니 이를 구조화해서 정리해야겠다는 생각이 들었다.

 

나의 계산기 어플의 문서는 한 파일에 작성되었으며, 'CalculatorView'라는 파일이름으로 저장되어있다.

해당 문서의 전체적인 구조를 소개하면 다음과 같다.

 

계산기 어플의 문서 구조

사실 이렇게만보면 엄청 간단해보이지만 그렇지 않다.

일단 이 파일의 이름은 'CalculatorView'이다.

그러면 View에 대한 내용이 있어야 할터인데, 지금 다양한 상태변수, 계산함수까지 한 파일에 포함되어있다.

 

어플을 만들면, 다양한 뷰가 존재하고, 다양한 로직이 필요하게되어 한 어플에 많은 수의 문서 파일을 생산하게된다.

이 때, 각 데이터의 흐름을 파악하고 프로그램을 관리할 때 내가 수정하거나 참고해야할 코드를 확인할 때, 해당 코드가 어디에 있는지 쉽게 파악하기 위해서는 위에서 언급한 대로 이름을 잘 지정해줘야한다.

 

근데 내가 작성한 계산기 어플 문서처럼 문서에 문서명과 연관없는 내용들이 있거나,

역할의 구분없는 문서파일이 있다면 데이터 흐름 파악이 어려워지고 나중에 오류 수정과 같은 프로그램 관리가 굉장히 어려워진다. 

현재 상태를 보자,

 

CalculatorView 상태변수 선언 영역

CalculatorView 함수 선언 영역

이렇게 CalculatorView에 상태변수와 함수가 다 들어가있다.

이는 좋은 문서가 아님을 계속 얘기해왔으니, 그럼 개선을 해보도록 하자.

 

 

개선된 CalculatorView 파일

개선된 CalculatorView 파일

기존 CalculatorView 파일은 위와같이 View 컴포넌트만 자리하게 됐다.

(물론 View 구조체 내에 필요한 함수도 있긴 하지만 구조체 내에서 꼭 필요한 데이터 관리에 필요한 함수이다.)

그리고 반복적인 컴포넌트는 하위 뷰와 modifierView로 정리해줬는데 이 과정은 이전 게시글을 참조하면 된다.

 

그럼 나머지 코드는 어디로 갔을까?

이를 구조화하고 정리하기 위해서 다음과같이 CalculatorData라는 파일을 생성해줬다.

 

Calculator 관련 그룹

Calculator와 관련된 파일끼리 그룹화를 해주고

개선된 CalculatorData 파일

위와같이 문서명에 맞는 상태변수 데이터와, 이 데이터를 처리하는 함수가 있게 됐다.

이제 유지보수하거나 오류를 수정할 때 어디에 문제가 있고 어디를 고치면 되는지 직관적으로 알 수 있게 되었다.

일의 능률뿐만 아니라 조금의 주석만 추가한다면 제 3자가 봤을 때 코드 해석도 수월하게 할 수 있을 것이다.

 

---

 

내가 밟아온 과정

 

코드 문서화를 하기까지, 먼저 시간이 없어서 한 파일에 모든 내용을 다 작성했다.

그리고 시간이 될 때마다 프로젝트 파일을 열어서 수정 및 보완해줘야할 사항들을 찾아서

틈틈이 고쳐나갔다.

 

하지만 그렇게 계속 보면 볼면 볼 수록 내가 작성한 것이지만 내가 원하는 코드를 찾는데 계속 스크롤을

오르락 내리락 하고, 바로바로 찾기가 어려웠다.

그래서 문서를 정리하기로 결심!

 

문서 구조화에 고려한 내용은 다음과 같다.

1. View 파일은 View 관련 컴포넌트만 있을 것.

2. 한 스크린을 구성하는 View 컴포넌트의 내용이 많다면 이것도 적절히 분리해서 별도 파일로 관리할 것.

3. 변수, 객체, 데이터를 다룬다면 객체 정의를 위한 파일을 따로 생성할 것.

4. 함수가 많다면 함수만을 따로 파일로 저장할 것.

 

위 네 가지를 고려하면서 문서를 수정했다.