문제 상황 Flutter에서 iOS 빌드 시 다음과 같은 에러가 발생하였다. Launching lib/main.dart on iPhone 15 Pro in debug mode... Running Xcode build... Xcode build done. 6.2s Failed to build iOS app Uncategorized (Xcode): Command CodeSign failed with a nonzero exit code Could not build the application for the simulator. Error launching application on iPhone 15 Pro. Uncategorized (Xcode): Command CodeSign failed with a nonz..
Token Login / Auth 구현하기 https://nx006.tistory.com/64 Session VS Token Authentication - feat. JWT 기술 Authentication 앱을 만들 때 회원가입/로그인 기능을 구현해야 할 때가 있습니다. 인증 및 인가된 사용자에게 앱의 기능을 사용할 수 있게 하기 위해서는, 로그인이라는 Authentication(인증) 기능을 거 nx006.tistory.com 이전 글에서 Session 로그인과 Token Login 방식에 대해서 알아봤습니다. 이번 글에서는 어떻게 하면 Flutter에서 Token 로그인 방식을 관리할 수 있는지, 클라이언트 관점에서 구현해보겠습니다. 이 방법은 코드팩토리 님의 Flutter 강의를 듣고서 정리한 글입..
BottomNavigationBar 사용하기 위와 같은 화면을 구성할 때 BottomNavigationBar를 많이 사용하게 됩니다. BottomNavigationBar은 TabBarView와 같이 사용하게 되는데, 사용자의 입력에 따라서 두 위젯의 index가 잘 맞아야 하기 때문에 은근히 구현하기 어려운 부분입니다. 이 글에서 TabBarView와 BottomNavigationBar를 이용해서 위와 같은 UI를 구현해보겠습니다. BottomNavigationBar와 TabBarView 이용해서 화면 전환 구현하기 StatefulWidget 만들기 우선, BottomNavigationBar를 담는 View부터 만들어야 하는데, 이를 TabView라고 하겠습니다. 당연히 사용자의 입력에 따라서 UI가 달..
최근, 한 작은 Flutter 커뮤니티에서, 코드 제너레이션(Code Generation)에 대한 논쟁이 있었습니다. 그래서 이번 글에서는 이 논쟁에서 제시된, 코드 제너레이션을 사용해도 되는지에 대한 갑론을박을 간단히 정리하고, 제가 왜 코드 제너레이션을 쓰기로 결정했는지 작성합니다. 코드 제너레이션이란? 코드 제너레이션(Code Generation), 혹은 코드 젠(Code gen)이나 코드 생성이라고 부르기도 합니다. 말 그대로 코드를 자동으로 생성하는 행위입니다. 그리고 코드를 자동으로 생성해 주는 도구를 Code Generator라고 합니다. 코드 제너레이션은 주로 반복되는 구조의 코드를 자동으로 생성할 때 많이 사용됩니다. 그래서 코드의 복잡성과 반복성을 줄여주고, 개발자가 매 반복되는 구조의..
Debounce와 Throttle 디바운스(Debounce)와 쓰로틀(Throttle)은 둘 다 함수의 연속적인 실행을 제한하는 목적을 갖고서 설계되었습니다. 그 중 Debounce는, 특정 기간 동안 함수의 실행을 모두 취소하고, 마지막 실행만 수행합니다. 반대로 Throttle은 함수 실행 후 특정 기간 동안 추가적인 함수의 재실행을 모두 취소합니다. 이 둘은 매우 비슷해보이지만 서로 다른 특성을 갖고 있는, 정해진 시간 동안 얼마나 많은 함수의 실행을 허가할 것인가에 대한 테크닉입니다. Debounce와 Throttle은 특히 Future와 Stream에 관련된 함수에서 자주 볼 수 있습니다. API 요청 시에 Debounce와 Throttle이 특히 유용하게 사용됩니다. 불필요하게 API 요청이 ..
이전 글 페이지네이션(Pagination) Flutter로 Cursor Pagination 구현하기 - 1. 상태 모델 및 Provider 구현 Flutter로 Cursor Pagination 구현하기 - 2. Pagination View 구현 실제로 적용해보기 지금까지 Pagination에 필요한 Provider 및 CursorPagination 상태, 그리고 View를 제작했습니다. 지금까지 만든 것들은 모두 일반화를 위한, 추상화된 클래스들입니다. 이러한 추상화 과정을 통해서, 많은 양의 중복된 코드를 줄일 수 있습니다. 그러나 이를 실제로 적용하는 것은 또다른 문제입니다. 실제로 Paginate를 하기 위해서는, http Request 등 서버로의 요청을 보내야 합니다. 추상화된 코드에서는 IBa..
이전 글 페이지네이션(Pagination) Flutter로 Cursor Pagination 구현하기 - 1. 상태 모델 및 Provider 구현 Pagination Common View (ListView) 이전 글에서 Pagination Provider를 구현하였습니다. 사실 이것으로 페이지네이션의 본질적인 부분은 끝이 난 것이 맞지만, 실제로는 View를 구현해야 하는 일이 남아 있습니다. 페이지네이션의 뷰가 모두 비슷하다고 가정을 한다면 이 역시 추상화할 수 있습니다. 여기서는 ListView 형태로 페이지네이션 뷰를 직접 구현하겠습니다. 참고 사항 본 글에서 코드를 보여줄 때, 일부러 앞 코드의 일부(함수 시그니처라든지, 중요 포인트 등)를 포함시켜서 보일 예정입니다. 코드의 전문을 보여주지 않아 ..
Flutter에서 Cursor Base Pagination 구현하기 이전 글: 페이지네이션(Pagination) 이전 글에서 페이지네이션의 개념에 대해서 알아보았고, 모바일에서는 주로 커서 기반 페이지네이션이 많이 사용된다는 것도 배웠습니다. 이제 직접 Flutter에서 커서 기반 페이지네이션을 구현해봅시다. 본 글은 코드팩토리 님의 플러터 중급 강의를 듣고 이를 저의 방식을 곁들여서 정리한 글입니다. 본 글은 페이지네이션을 일반화시킨 방법으로 적용할 것입니다. 그래서 모든 클래스와 메소드들이 굉장히 높은 차원으로 추상화되어 있습니다. 그렇기 때문에 왜 이렇게 되어 있는지 추적하기가 어려울 수 있습니다. 다음 글에서 이를 직접 각 모델에 맞추어서 적용함으로써 왜 이렇게 설계되었는지를 확인한다면, 좀 더 ..
Pagination의 개념 Pagination이란, 많은 데이터를 부분적으로 불러오는 기술을 의미한다. 우리가 일반적으로 데이터를 불러올 때, 만약에 모든 데이터를 불러오게 되면 매우 비효율적일 것이다. 데이터가 1억 개가 있다고 한다면, 사용자의 입장에서는 이 데이터를 모두 보지도 않는데 1억 개의 데이터가 모두 불러와질 때까지 기다려야 한다. 또한, 모든 데이터를 불러오게 되면 데이터를 보내는 데 드는 시간과 비용이 더 올라가게 되며, 이는 둘째치고 클라이언트 단에서 모든 데이터를 저장하기에 메모리가 부족할 것이다. 때문에 UX적 측면이나, 비용 효율화의 측면이나, 기술적인 한계의 측면에서 모든 데이터를 불러오기보다 일부의 데이터만을 불러오는 게 훨씬 효율적이다. 이것이 바로 Pagination의 개..
Flutter GetX에 대해 이해하기 GetX란? GetX는 Flutter에서 사용 가능한 StateManager이다. GetX를 사용하는 방법 중 가장 많이 보았을 방법은 바로 page route 관리이다. 우리가 페이지를 이동하려 할 때, 다음과 같은 route 기반 코드를 볼 수 있다. Navigator.of(context).push(MaterialPageRoute( builder: (_) => NextPage(), )); Navigator를 사용하는 방법도 좋긴 한데, GetX를 사용하면 더 편리하게 할 수 있다. Get.to(NextPage()); 이런 식으로 처리가 가능하다. 그러나 단순히 페이지 라우팅 기능 외에도, GetX는 상태 관리에 있어 강력한 기능들을 제공한다. 상태 관리란? 상태..