[HUT] 7/13 개발일지

티스토리 뷰

HUT 개발일지

[HUT] 7/13 개발일지

정글잠수함 2021. 7. 14. 11:26

지금 내가 속해 있는 팀 언밥에서는 다양한 프로젝트를 진행중이다.

그 중 가장 밀고 있는 프로젝트가 있는데, 그것은 플러터와 파이어베이스를 사용하는 앱 프로젝트이다.

정확히 뭐를 만들고 있는지는 차근차근 알아가는 것으로 하고, 개발 내용을 한번 조금씩 적어보려고 한다.

사실, 프로젝트 기획 단계에서부터 블로그를 꾸준히 적었다면 좋았겠지만, 이미 기획은 거의 마무리가 되었고 개발 단계에 있다. 하지만, 본 개발은 사실 안되어 있는 상황이라서 차근차근 적어보도록 하겠다.

사실 많이 적어뒀는데 컴퓨터가 튕기는 바람에 초기화가 되었다. 역시 자동저장 믿을게 못된다.

플러터 개발환경을 Visual Studio 으로 갈아타다

지금까지 나는 친구가 추천해준데로 Android Studio (이하 안스) 를 활용하여 플러터를 개발하고 있었다. 하지만, 그 전까지 각종 웹앱을 만들면서 Visual Studio Code (이하 VSCode) 에 이미 손이 익어있었고, 익숙해져있었다. 메모장으로도 개발을 할 수 있다지만, 안스는 너무 음... 너무 달랐다.

대표적으로 Ctrl + 뒤로가기 (맥은 Cmd - Backspace) 를 누르면 어떠한 반응을 생각하는가? 위도우 같은 경우 한 단어 지우기, 맥은 한 그 커서 위치로 부터 한줄 지우기를 생각한다. 하지만, 안스는 그 줄 자체를 지워버린다. 이것 때문에 실행 취소의 경험이 한두번이 아니다.

VSCode 으로 갈아타는 과정은 그럽게 어렵지 않았다. Flutter 확장프로그램을 추가하니 Dart 확장 프로그램도 추가가 되었고 추천 설정을 설치하니 개발을 바로 할 수 있었다. 다만 다른점은 실행을 하기 위해 플레이 버튼을 누르고 Run Without Debugging 을 눌러야 했다.

아! 하지만, 새로운 프로젝트를 만들 때는 안스를 사용할 거 같다. UI 로 가이드가 잘 되어있기 때문이다.

GetX 을 활용한 개발 시작

내 주변에는 플러터를 진짜 진지하게 배우는 친구가 있다. 그 친구가 톡방에서 "GetX 써봐써봐" 해서 알고만 있었지 그때 당시에는 굳이 플러터에 내 시간을 투자하고 싶지 않았다.

프로젝트를 진행하고 있는 지금 GetX 를 사용하면 새로운 세상이라고 한 친구의 말이 떠올라서 자문을 구하고 본격적으로 공부해보기 시작했다.

GetX 을 설치하는 방법은 어렵지 않다. 다른 플러터 모듈처럼 먼저 pubspec.yaml 파일에 추가한 후에 MaterialApp 을 GetMaterialApp 으로 바꿔주면 된다.

추가하고 든 생각인데 아직 메인 페이지를 만드는 과정이여서 라우팅을 신경쓸 필요는 없는 것 같다. 따라서 메인 페이지 디자인을 바로 들어가기 시작했다.

메인 페이지 작업

친구가 코딩해 둔 것을 조금 정리한 후에 메인 페이지를 다시 디자인 하기 시작했다.

기존에 있던 매칭 화면은 나중에 레퍼런스 할 수 있도록 Old 으로 돌려두었고, 새로운 prematch 폴더를 만들어 작업을 시작했다.

이때 친구가 만들어둔 코딩의 미스터리가 해결이 되었는데 지금까지는 Scaffold 안에 Scaffold 를 넣을 수 없는 줄 알았다. 넣을때마다 오류가 났고 오류가 나서 안겹치게 하려고 이상한 짓을 지금까지 계속 해왔다. 검색을 해본 결과 안되는 이유는 친구가 사용했던 'SingleChildScrollView' 위젯 때문이었다. 애초에 지금까지 앱은 스크롤뷰가 필요 없었는데 암튼 있어서 스크롤뷰 안에는 스케폴드를 추가를 못하는 것 같다.

이게 중요했던 이유가 TabView 를 넣으려면 Appbar 도 들어가야하는데 넣을때마다 충돌이 일어나서 실행이 안됐다.

암튼 탭뷰도 구현하고 기본값인 스와이프 기능을 빼고 비활성화 탭을 만드는 작업까지 완성하고 하루를 마무리 했다.