내가 작성하지 않은 코드를 건드리는 게 늘 조심스러웠지만 중복되는 코드는 하나의 코드로 관리하는 것이 디버깅을 위해서도, 유지보수를 위해서도, 미래의 나를 위해서도 훨씬 좋기 때문에 작은 것부터 하나하나 코드를 통합시키고 그 외에도 내가 할 수 있는 개선 사항을 틈틈이 적용시켰다.
신입인 내가 프로젝트를 책임지며 나름대로 개선한 사항에 대해 적어 보려고 한다.
(*꾸준히 업데이트 예정)
1. fromModel 메서드 추가하기
기존에는 formModel 메서드 없이 타입 변환이 필요한 곳마다 요소에 값을 일일이 대입하고 있었기 때문에 중복되는 코드도 많고, 값을 잘못 대입하는 실수가 일어날 것 같았다. 따라서 fromModel 메서드를 추가해 통합으로 관리했다.
2. AppBar 통합하기
기존에는 앱바가 스크린마다 따로 설정되어 있어서 그림자 같은 옵션이 스크린마다 따로 놀았다. 위젯을 공통으로 관리하기 위해 DefaultAppBar라는 위젯으로 따로 뺐다.
참고로, AppBar는 PreferredSizeWidget 타입이기 때문에 PreferredSizeWidget를 implements 해야 한다.
3. Dio BaseOptions, Interceptor 정의하기
공통으로 들어가야 하는 파라미터는 BaseOptions의 queryParameters로 정리해 주고, connectTimeout, receiveTimeout 시간을 늘렸다.
이전에는 print()가 API를 호출하는 메서드마다 작성되어 있었다. 그러다 보니 출력되는 값들이 공통적이지 않았다. (예를 들어, 어쩔 때는 response, 어쩔 때는 response[result]가 출력되고 있었다.)
Dio의 Interceptor 기능을 활용하여 print를 한 곳에서 작성하니 곳곳에 산재된 print 코드도 줄이고, 어떤 데이터가 출력될지 예상할 수 있었다.
4. 중복되는 메서드를 mixin으로 통합 관리하기
앱의 기능 중에 API를 호출하여 문제를 채점하고 결과를 보여주는 기능이 있다. 이 기능의 메소드는 우선... 꽤 길었고(150 라인 정도) 이 긴 메소드가 테스트의 유형에 따라 각기 다른 페이지에서 따로 작성되어 있었다.
해당 메소드만 재사용할 수 있으면 되므로 mixin을 사용했다.
유형에 따라 달라지는 부분과 행위에 따라 세부 메소드로 분리했는데 구조는 대충 아래와 같다.
테스트_완료 (테스트_유형) {
답안을_모델로_변환;
API로_통신해_채점;
채점결과를_로컬에_저장;
}5. 폴더 구조를 기능 우선으로 변경하기
이전의 폴더 구조는 아래와 같았다.
‣ core
‣ model
‣ provider
‣ utils
‣ pages
‣ test
‣ siginin
‣ menu프로젝트의 모든 프로바이더는 provider 폴더에, 모든 모델은 model에 속하는 형식이다. 프로젝트의 초반에는 사용이 간편했을 수 있으나 provider 파일이 50개가 넘어가면서 기능마다 파일을 확인하기가 쉽지 않았다.
따라서 기능 우선(feature-first) 폴더 구조로 변경하기로 했다.
‣ features
‣ test
‣ presentation
‣ provider
‣ domain
‣ signin
‣ presentation
‣ provider
‣ domain
‣ menu
‣ presentation
‣ provider
‣ domain기능을 기준으로 해 폴더를 정리함으로써 연관된 파일을 더욱 쉽게 확인하고, 수정사항이 있을 때 한 폴더에만 집중할 수 있게 되었다.
6. ListView 최적화
내가 맡은 프로젝트는 의학 용어 학습 플랫폼이다. 앱 자체에 엄청난 양의 데이터가 있기 때문에 단어를 검색하면 많게는 10,000개가 넘는 단어를 한꺼번에 불러왔다. 이 경우 성능 저하의 위험이 있으므로 ListView.seperate로 작성되어 있던 기존 코드를 ListView.builder로 교체해 주었다.
ListView.builder는 화면에 보여지는 아이템만 렌더링하므로 성능 최적화에 도움을 준다.
∙ 24.03.26 | 4번 항목 프로바이더 -> mixin으로 수정
