개발일지

[PhotiCase] 4주

사과먹는사람 2022. 9. 26. 22:14
728x90
728x90

 

9월 19일

Swift

  • 현재는 데이터 관리를 디바이스 내부에서 Realm 데이터베이스를 사용하고 있기 때문에, 사용자가 이 앱을 이용하면서 인터넷 연결이 필요할 때는 네트워크에 검색을 요청했을 때뿐이다. 그 때 네트워크 연결이 되어 있지 않다면 AlertController를 띄우도록 수정했다.

플러터

  • 프로젝트를 만들었다. 플러터는 거의 반년만에 하는 건데 그 새 업데이트가 돼서 버전 3까지 나왔다. 구글이 플러터를 아직 열심히 밀고 있는 모양이다. 님아 플러터를 버리지 말아주오

 

 

9월 20일

Swift

  • 앱 아이콘을 마지막으로 수정했다.
  • 심사에 제출할 요령으로 소개, 프로모션 텍스트, 미리보기 등을 준비했다. 미리보기는 5.5, 6.5형으로 똑같은 내용이라도 2개 이미지로 준비를 해야 하는 거였다.

플러터

  • 개인적으로 커스텀 글꼴을 쓸 수 있다면 NotoSans KR이나 스포카한산스를 사용하는 것을 선호하는 편이다. 써봤을 때 가독성이 제일 좋으면서도 묘하게 세련된 맛이 있는 폰트라고 생각한다. 플러터 프로젝트에는 스포카한산스를 쓰기로 하고 Assets에 추가해줬다.
  • Swift가 SPM이나 CocoaPods 등을 이용해 의존성을 추가해준다면 플러터는 pubspec.yalm 파일을 수정하고 Pub get 하면 바로 받아올 수 있는 방식이다. 달력을 사용하기 위해 table_calendar 패키지를 추가하고, 날짜와 시간 표기를 위해 intl 패키지도 추가했다. 
    • 달력 패키지의 경우 flutter_calendar_carousel과 table_calendar 이 2가지가 제일 유명한 것 같은데 table_calendar 쪽이 조금 더 사용자도 많고 문서도 잘 되어 있어서 table_calendar를 사용하기로 했다.
  • 홈 탭에 달력을 표시하기 위해 패키지를 받고 스크린에 띄워봤다. 여기서 또 개조가 시작됐다. 나의 개조 본능은 어딜 가도 멈추지 않는다... 사실 개조라고 해봐야 별 건 없지만 예제에 없거나 인터넷에 비슷한 실례를 찾아보기 힘든 것들을 구현했다. 문서가 잘 되어 있으면 문서 뒤지면 다 바꿀 수 있게 나오니까 편리하다.
  • 그래서 iOS 달력과 아주 흡사하게 만들었다. 플러터 table_calendar 토, 일요일 색깔 바꾸는 거 궁금하지 않으신가요? 제가 또 글을 써보겠습니다.
  • 옛말에 일장일단 양념반후라이드반이라는 말이 있듯이 swift에서는 어려웠던 것이 플러터에서는 아주 간단하게 되기도 하고, 반대로 swift에서 쉬웠던 것이 플러터에서는 까다로운 경우가 있다. "이게 왜 안 돼?!" 하는 경우가 꽤 있다는 말. 하지만 한 번 칼을 뽑았으면 무라도 썰어 생채라도 담가야 한다. 개발은 계속된다.
  • BottomNavigationBar를 달아서 탭바 비슷하게 만들었다. 플러터에서는 appBar 아래쪽에도 탭바를 달 수 있는 모양이다.

 

 

9월 21일

swift

  • 점심쯤 앱스토어에 앱을 등록했고, 심사 대기가 떴다.

플러터

  • swift는 Color 역시 Assets에 등록해서 관리할 수 있다. 쉽게 말하면, 내가 어떤 색을 쓰기로 결정했다면 Color set을 Assets에 추가해주면 RGB값을 코드에서 직접 하드코딩하지 않고도 상수값으로 쓸 수 있다는 말이다.
  • 그런데 플러터는 pubspec에서는 그런 것을 지원하지 않기 때문에, 빠레뜨(Palette) 다트 파일을 만들어서 primary 색상을 만들었다. 
import 'package:flutter/material.dart';
class Palette {
  static const MaterialColor primary = const MaterialColor(
      0xffF6384F,
    const <int, Color>{
        50: const Color(0xffF6384F),
      100: const Color(0xffF6384F),
      200: const Color(0xffF6384F),
      300: const Color(0xffF6384F),
      400: const Color(0xffF6384F),
      500: const Color(0xffF6384F),
      600: const Color(0xffF6384F),
      700: const Color(0xffF6384F),
      800: const Color(0xffF6384F),
      900: const Color(0xffF6384F),
    }
  );
}
  • 이런 방식으로 써주면 된다.
  • 이번에는 API 키 관리를 조금 일찍부터 시작하기 위해 플러터 프로젝트에서는 어떻게 키 관리를 하는지 조사해봤다. flutter_config 패키지를 이용해서 키 관리를 하고 있다. .gitignore에도 당연히 키 파일을 등록했다.
  • 검색 탭 작업을 시작했다. API에서 데이터를 받아와서 리스트로 예쁘게 보여주는 게 별 거 아닌 거 같지만 가장 많이 하는 작업들 중 하나라고 꼽을 수 있기 때문에 꽤 신경써야 하는 작업이다.
  • API를 받아와서 리스트뷰로 보여주는 방법으로는 FutureBuilder, 혹은 평범한 ListView.builder가 있다. 첫 시도에서는 일단 ListView.builder를 사용했다. 데이터를 받아와서 레이아웃이 잘 되는지 확인하려고 했기 때문에 무한스크롤, 데이터가 없을 때의 처리 등은 하지 않았다.

 

 

9월 22일

플러터

  • 리스트뷰 부분을 다른 파일로 분리했다. 이 때는 몰랐다. 이것 때문에 생고생을 하게 될 줄은...

 

 

9월 23일

swift

  • 한국 시간 새벽 3시쯤 심사를 통과했고, 앱스토어에 검색하면 앱이 나온다! 내가 앱스토어에 앱을 등록한 개발자라니... 미쳤다...

플러터

  • 출가한 리스트뷰는 하루만에 다시 본 페이지로 통합하게 되었다. 나중에 리팩토링할 때 분리하고, 일단은 빠르게 개발하는 것을 목표로 한 군데 모으기로 결정했다. ^^
  • FutureBuilder를 사용했다가 결국에는 ListView.builder로 돌아왔는데, 이유는 어차피 데이터 받아와서 JSON 디코딩한 다음에 모델로 변경해서 리스트에 넣을 거였기 때문이다. Future로 받는 그 데이터를 그대로 사용하는 데에는 위험이 따르기 때문에 안전하게 모델로 만들어서 쓰기로 했다.
  • 미래를 위해 미리 드롭다운도 만들었다. 처음에 텍스트필드를 어떻게 위에 sticky header로 붙일 방법이 없나 했는데 그냥 appBar에 붙이면 됐다. (...) 불편한 점은 텍스트필드의 크기를 지정해주지 않으면 텍스트필드가 부모 위젯의 너비를 뛰어넘어서 가출해버린다는 점이었는데 드롭다운의 크기가 대충 이 정도 되겠지... 예상해서 기기 가로 사이즈에서 그만큼 빼주고 가운데 정렬해줬더니 볼만해졌다.
  • 플러터에서 또 하나 기묘..했던 건 Row나 Column에 spacing 옵션이 없다는 거였다. 이건 스위프트로 따지면 StackView horizontal이나 vertical과 마찬가지인데 spacing이 없다니 도대체?
    • 그래서 사람들이 어떻게 spacing하나 봤더니 중간에 SizedBox 넣어서 여백을 주고 있었다(...). 로마에 가면 로마 법을 따르라고 했던가.. 나도 그렇게 하고 있다. 
  • 데이터가 없는 경우에 대해 iOS 앱과 마찬가지로 결과가 없다는 레이블을 띄워줬다.
  • 마지막 데이터가 나타나는 경우 더 이상 API에 요청하지 않도록 했다. 이로써 검색해서 나타날 수 있는 문제들은 얼추 해결했다. (단, 아직 네트워크가 불안정할 때의 에러는 해결하지 않았음. 이 부분도 추가적으로 해결해야 할 문제다)
  • 사진이 나타나지 않을 경우 placeholder를 둬서 그 이미지를 표시하도록 했다. 안드로이드 이미지를 다운로드받아놓지 않아서 일단 갖고 있는 세르반 사부 그림을 assets에 추가했다가 나중에 뺐다.

 

 

9월 24일

swift

  • 코드를 Rx로 변경하고 싶었다. 어떤 부분을 Rx로 변경할 수 있을까 생각해보는데, 일단 API 요청을 하고 데이터를 받아오는 부분을 Rx로 변경할 수 있을 것 같았고, RxCocoa를 이용하면 추가 탭에서 제목과 다음 버튼을 바인딩해서 제목이 비면 다음 버튼이 disabled되고, 제목에 뭔가 있다면 enabled되게도 만들 수 있을 것 같았다.
  • API 요청을 하고 받아오는 부분을 Rx로 변경하는 건 생각보다 쉽지 않았다. 강의를 들으면서 꽤 잘 이해하고 있었다고 생각했는데 Observable, Subject가 헷갈렸다. Relay는 뭐고 Driver는 또 뭔가! 아직도 모르는 게 너무 많다는 생각이 들었다.
  • 데이터를 prefetch하는 부분만 Rx로 변경해봤다. 테이블뷰의 dataSource 자체를 Rx스럽게 바꿀 수 있나 했는데 그럼 prefetch가 안 되고, prefetch가 되면 데이터소스가 안 되고... 고통받고 있다. ㅜㅜ 의외로 prefetch해서 계속 가져오는 Rx 예제가 많이 없었다. 애초에 이게 불가능한 건지 뭔지는 잘 모르겠다. 하지만 꽤 흔한 예제일 텐데 왜 없는 건지.. 내가 검색을 잘못한 건지 의문이 든다.

플러터

  • 네트워크가 끊기거나 약한 것 외에 검색이 잘 됐을 때 리스트뷰에서 나타날 수 있는 문제를 모두 해결했다고 생각했는데 그렇지 않았다. 어떤 검색어를 입력하면 RangeError가 나면서 리스트가 끊기는 에러가 생겼다.
  • 왜 그런가 하고 데이터를 살펴봤는데 중간에 누락된 프로퍼티가 있으면 그 인덱스가 비어있어서 인덱스 접근이 안 되는 거였다. 받아온 데이터를 토대로 모델 객체를 생성하고, 그 모델 객체들을 리스트에 넣어서 리스트를 사용함으로써 이 문제를 해결했다. 
  • flutter analyze에서 권고하는대로 파일 이름 등을 변경하고 주석 처리를 하는 등 몇 가지 간단한 수정을 했다. swift 개발하면서는 xcode에서 warning으로 띄워주는 걸 여기서는 flutter analyze로 한 번에 볼 수 있나보다.

 

 

9월 25일

플러터

  • 영화 상세페이지 스크린 디자인을 하고 구현까지 했다. 이 날 한 큐에 다 끝내서 기분이 좋다. 물론 데이터베이스와 연동해서 보여줘야 하는 별점이나 기록 부분은 구현하지 못했지만, DB 연동하면 금방 구현하면 되니 문제없다.
  • 탭을 이동하면 항상 상태가 초기화되는 문제가 있었다. 예를 들어 달력을 6월로 넘겼다가 다른 탭으로 이동하고, 다시 홈 탭으로 돌아오면 오늘 날짜인 9월로 표시되는 문제였다. 이 문제를 해결할 방법을 찾아 변경했고, 이제 탭을 이동해도 상태가 초기화되지 않는다.

 

 

 

728x90
반응형
저작자표시 비영리 변경금지