[FLUTTER 과제] 계산기 만들기(4) : 기록과 변환기

마지막으로 기록(히스토리)과 변환기 기능의 구현 부분을 설명하겠습니다. 

이들 각각의 풀리퀘스트는 아래의 두 링크에서 확인 가능합니다.

 

기록 : https://github.com/zeka0228/calculator/pull/4

History 기능 구현 by zeka0228 · Pull Request #4 · zeka0228/calculator

변환기 : https://github.com/zeka0228/calculator/pull/7

Unit converter by zeka0228 · Pull Request #7 · zeka0228/calculator

 

구현 순서상으론 기록이 수학메모보다 우선 구현되었습니다. 따라서 sqflite 패키치의 환경 구축 건은 이 풀리퀘스트에서 이루어졌습니다. 

 

[FEATURE] 과거 7일간 계산기 기록 기능 기초 구현
 과거 연산 내용 기록과 조회가 가능할 수 있도록, 메모리가 아닌 DB를 불러와 이를 적용해야 했습니다. 파이어베이스와 sqflite 중 고민했으나, 대규모 서비스가 아닌 특성 상, 그리고 무엇보다 로컬로만 동작하게 된다는 점에서 sqflite가 구현 상 보다 합리적 선택지라 판단되어 해당 패키지를 채택했습니다. 동일하게 의존성 관리를 위해 pubspec.yaml에 해당 패키지를 추가, 헬퍼 클래스와 history 스키마를 정의하여 해당 DB를 구축하고 DB에 대한 CRUD 의 기초 기능 메소드도 함께 구현했습니다.(단 기록의 특성상 Update는 필요하지 않아 이를 제외하고, 정확히는 C R D 만 구축했습니다.) 

 

[REFACTOR] sqflite 패키지 이용 했을 때 웹상 정상 구동하도록 오류 수정

 단, 실 구현시(크롬 테스트 시) 해당 데이터 베이스의 로드가 정상적으로 이루어지지 않았습니다. 내용에 대해 조사해보니, sqflite의 경우 웹에서는 별도 지원이 이루어지지 않는다는 점이 해당 버그의 원인으로 파악되었습니다. 별도의 조치 방법을 찾던 중, 별도로 common_ffi~ 와 같은 플랫폼 호환 패키지가 별도로 존재함을 확인하였고, 따라서 모바일과/웹인 경우의 분기점을 설정하여 해당 분기점에 맞는 호환패키지 가 로드되도록 내용을 변경했고, 결과적으로 정상적으로 구축되었음을 확인했습니다. 

 

[REFACTOR] 기록 모드 디자인 1차 수정

 실제 IOS와 동일하도록 폰트와 구성, 색상, 위치 등을 변경하였습니다.

 

[FEATURE] 기록 모드 삭제 기능 구현

 기 구현된 Delete 메서드를 실제 삭제 버튼과 매핑 및 관련 정책을 설정하엿습니다. 관련해서 편집 버튼을 눌렀을 때 체크박스 형성, 해당 선택된 기록들을 삭제하는 기능의 정책 설정이 메인이었고, 실제 삭제 메서드는 초기 커밋에서 함께 구현되었으며, 이 과정에서는 매핑하는 방식으로 기능을 완성했습니다. 

 

 

[REFACTOR] 디자인 2차 수정 및 전체 삭제 기능 구체화

 IOS와 차이가 존재하는 잔여 미수정 디자인을 최종 수정했습니다. 별도의 삭제 정책이 수정된 것은 아니고, 모두 지우기 진행 시 추가 경고창이 팝오버되어 해당 행동에 대한 재확인을 받는 방식의 추가 패턴을 구축했습니다. 

 

이어서 변환기 구현입니다. 

 

[ADD] 변환 모드 추가 및 기초 단위 및 통화 환율 API 연결

 변환기를 생성합니다. 기본 카테고리는 enum을 통해 정의했습니다. 기존 enum 방식을 통한 분기 형성이 상당히 가독성으로도, 보수 시점에서도 효과적으로 느꼈어서 동일하게 설정했습니다.  각 단위는 기초적으로는, 명시적으로 value에 더하거나 뺴거나, 곱하거나 나누는 방식으로 구현했습니다. 단, 통화 카테고리에 대해서만 단위를 동적으로 설정하였는데, API 요청을 통해 받아오는 JSOM 파일을 통한 반영이 필요하기 때문에 이는 예외적으로 구분했습니다. 관련 API는 frankfurter 에 요청하는 방식으로 구축하였습니다. 

 

[REFACTOR] 변환 모드가 기본 계산기 공학 계산기 모드에 덧씌워지도록 수정

 기초 기능 구축 과정에서, 변환모드가 따로 존재하는 것이 아닌, 기본 계산기나 공학용 계산기에 덧붙여져 생성되어야 함을 파악했습니다. 따라서 별도의 화면으로 생성되는 것이 아닌, 디스플레이 위젯으로 수식의 입출력 창에 출력되도록 관련 위젯으로 생성 및 수정하였습니다. 따라서 해당 과정에서, 화면 관련 변수의 대규모 수정도 함께 진행했습니다. 

 

[REFACTOR] 변환 모드 UI 수정

 해당부분에서 대대적인 UI 수정이 이루어집니다. 기능 구현을 위해 미뤄두었던 IOS와 동일한 변환 UI 구축을 위해, 단위 값 카테고리의 위치를 단순 인스턴스에서 모듈로 변환, 별도의 모달창을 띄워 선택할 수 있도록 설정하며, 스와이프를 통해 목록을 넘길 수 있도록 설정합니다. 

 

[REFACTOR] 스왑 기능 추가 / [FEATURE] 기록 기능 구현 완료

양 측 단위를 상하 화살표를 눌러 각 단위 변환을 반전시킬 수 있는 기능을 구현합니다. 별도 swap 함수가 구축되어 정상적으로 전환 기능이 수행됩니다. 그리고 기록에도 단위가 반영될 수 있도록, 그리고 단위로 로딩될 수 있도록 관련 내용을 구축했습니다.

 

이상으로 계산기 프로젝트를 마칩니다.

직접 실습하며 버그가 발생했을 때의 대처, UI/UX에 대한 고민, 보다 좋은 최적화 방법이나, 환경의 중요성, 장단의 비교, 집중 등 정말 많은 부분을 배우고 느낄 수 있는 뜻깊은 프로젝트였습니다.