'분류 전체보기'에 해당되는 글 2164건

네이버 지도를 아이폰에서 띄우는 걸 테스트 해보다가 완전 맨붕에 빠졌다.

Android 폰에서는 잘 동작하는데, iOS 환경에서 네이버 지도가 화면에 나오지 않고, 에러 메시지는 다음과 같이 나온다.

******** Authorize Error : 잘못된 클라이언트 ID를 지정. 콘솔에서 앱 Bundle Identifier를 잘못 등록함
[ERROR:flutter/shell/common/shell.cc(1015)] The 'flutter_naver_map_sdk' channel sent a message from native to Flutter on a non-platform thread. Platform channel messages must be sent on the platform thread. Failure to do so may result in data loss or crashes, and must be fixed in the plugin or application code creating that channel.
See https://docs.flutter.dev/platform-integration/platform-channels#channels-and-platform-threading for more information.
flutter: Auth failed: NAuthFailedException(code: 401, message: 잘못된 클라이언트 ID를 지정. 콘솔에서 앱 Bundle Identifier를 잘못 등록함)

문제가 된 사항부터 파악하기 위해 순차적으로 적어보자.

https://console.ncloud.com/   에 등록할 때부터 주의를 해야 한다는 걸 확인했다.

안드로이드에서는 com.link2me.flutter.nmap_test 로 등록하면 정상적으로 네이버 지도가 폰에 출력된다.

하지만, 아이폰에서는 네이버 지도가 화면에 출력되지 않으면서, 위와 같은 에러메시지가 나온다.

아예 언더바를 사용하지 않고 테스트를 해봤더니 정상적으로 네이버지도가 출력되는 걸 확인했다.

그래서 다시 com.link2me.flutter.nampTest 로 변경하여 등록했더니 네이버지도가 출력된다.

이것 때문에 몇시간을 삽질했는지 모르겠다. ㅠㅠㅠ

콘솔창에서 open ios/Runner.xcworkspace 를 하면 Xcode 가 실행된다.

여기서 보면 Bundle Identifier 가 자동으로 변경해준 것을 확인할 수 있다.

이 identifier 를 ncloud.com 에 등록해야 한다.

위 이미지에 보이는 Bundle Identifier 를 앱에서 찾는 방법

ios/Runner.xcodeproj/project.pbxproj 파일을 열어서 PRODUCT_BUNDLE_IDENTIFIER 를 검색한다.

그러면 PRODUCT_BUNDLE_IDENTIFIER = com.link2me.flutter.nmapTest; 와 같이 검색된 것을 확인할 수 있다.

아이폰 설정 사항

설정 앱 -> 개발자 -> 신뢰하는 컴퓨터 지우기

이 컴퓨터를 신뢰하겠습니까? 신뢰 선택 -> 설정한 폰 비밀번호 입력

관련이 있을지 없을지 여부는 모르겠는데 나중에 찾는데 도움될 거 같아서 적어둔다.

https://hsdev.tistory.com/entry/iOS-%EC%95%B1-%EB%B0%B0%ED%8F%AC-2-Identifiers-%EC%8B%9D%EB%B3%84%EC%9E%90-App-ID-%EB%93%B1%EB%A1%9D%ED%95%98%EA%B8%B0

News App 은 android 로 구현 테스트 해본 적이 있다.

riverpod 기능을 좀 더 익히기 위해서 검색해보니 https://www.youtube.com/watch?v=HgvKWMrbBe4 에 자료가 있더라.

원 코드 그대로 구현한 것은 아니며, Retrofit 라이브러리 사용, 디렉토리 구조는 Clean Architecture 로의 전환을 위한 걸 고려중이고, WebView 도 추가하여 실제 게시글로 이동하여 볼 수 있도록 했다.

NewsDataResult 클래스로 정의한 아래 코드가 동영상에서는 NewsModel 클래스로 정의되어 있다.

NewsDataResultBase 클래스는 테스트해보니 굳이 정의하지 않아도 되는 거 같다.

NewsDataResult.fromJson 부분이 구현의 핵심이다.

factory 생성자로 구현시 오류 발생 여부를 좀 더 테스트 해본 결과 정상동작됨을 확인했다.

Class 명을 NewsModel 로 변경해서 테스트를 했다. 이 사항도 GitHub 에 3rd버전으로 반영했다.

Retrofit 라이브러리를 활용하면 코드를 더 심플하게 줄일 수 있다(?).

repository 정의 및 repositoryImpl 구현  => GitHub 마지막 버전에서는 삭제 처리

newsProvider 코드

위 전체코드는 GitHub 에 올려두었다.

https://github.com/jsk005/Flutter/tree/main/news_app_riverpod

인터넷(Network)을 통해서 전송된 JSON 포맷 문자열을 Custom Class 로 역직렬화(Deserialization)해서 사용자 클래스로 변환하는 과정을 거쳐야 한다.
사용자 클래스를 네트웍을 통해 전송하기 위해서는 문자열로 변환을 해야 한다.
과거에는 XML 이라는 포멧으로 전송 했으나, 현재는 JSON 포멧 문자열로 전송한다.

Dart 언어에서 역직렬화(Deserialization)하는 과정은 
ㅇ JSON 포맷 String → Map<String, dynamic>
ㅇ Map<String, dynamic> → Custom Class
2단계 과정을 거친다.

Custom Class를 JSON 포멧 문자열로 직렬화(Serialization)하는 과정은
ㅇ Custom Class → Map<String, dynamic>
ㅇ Map<String, dynamic> → JSON 포맷 String
2단계 과정을 거친다.

먼저 서버에 있는 JSON 포멧 데이터를 역직렬화하기 위한 Model Class 를 구현해야 한다.

구현 방법은 Model 클래스를 직접 구현하는 방법과 Code generation 라이브러리를 이용하는 방법이 있다.

1. 직접 구현 방법

- 모델 클래스 내부에 fromJson과 toJson을 정의한다.

2. Code generation 라이브러리 이용방법

- 라이브러리 설치

- 모델 클래스 내부에 fromJson과 toJson을 아래와 같은 규칙으로 정의한다.

와 같이 한 다음에 터미널 창에서 dart run build_runner build 를 하면 자동으로 추가된다.

일반적인 JSON decoding에는 dart:convert의 jsonDecode() 메서드를 사용한다. 

이 방법은 간단하고 빠르게 decoding할 수 있다는 장점이 있지만 decoding된 Map<String, dynamic> 타입을 다시 적절한 Data Type으로 변환하는 부분을 수작업으로 진행해야 한다.

하지만 위와 같은 과정을 처리하지 않고,

서버로 데이터를 보내고 결과를 응답받는 과정을 손쉽게 처리하는 방법은 Retrofit 라이브러리를 이용하면 된다.

Retrofit 라이브러리 동작과정에 대한 설명은 Android 에서 설명한 게시글이 있으니 참고하면 도움된다.

로그인에 필요한 데이터를 POST 방식으로 전송하고, 결과를 LoginResponse 로 받는다.

riverpod 상태관리 패키지 활용 예제

- Dio 라이브러리와 Retrofit 을 처리하는 RestClient 를 보고 활용하면 된다.

- CustLogInterceptor는 필요하면 추가하지만 필요없는 경우에는 추가할 필요가 없다.

- 서버에서 로그인 정보가 일치하면 Session 정보를 생성하고 생성된 Session 정보를 쿠키로 저장하고 다른 URL 전송시 Cookie 정보를 실어서 보내도록 처리하는 로직을 CustLogInterceptor에 구현했다.

LoginView 처리는 View 와 ViewModel를 분리하여 구현한다.

상속받은 BaseView 에 대한 코드는 제가 직접 구현한 것이 아니기 때문에 오픈할 수 없다.

riverpod 기반 BaseView 구현 코드를 얻고 싶은 분은 인프런 사이트 강좌 DevStory님의 "Flutter 앱 개발 실전" 강좌 수강을 추천한다. Flutter 에 대한 기본 개념을 확실하게 잡을 수 있고, 이를 바탕으로 응용하는데 도움이 될 것이다.

위젯 트리가 빌드된 이후에 실행되는 콜백 메서드이다.

함수를 바로 실행하지 않고, 아래와 같이 WidgetsBinding.instance.addPostFrameCallback 함수 이용한다는 걸 알아두자.

WidgetsBinding.instance.addPostFrameCallback((_) {
  // 실행할 작업
});

Class Fruits의 인스턴스를 생성하고 a.list 의 값을 확인해보자.

참조변수 b 에 a.list 를 할당하는 것은 shallow copy(얕은 복사)로 같은 메모리 주소를 바라보고 있어 동일한 값을 가진다.

참조변수 b에 새로운 값을 할당하고 나서 a.list 를 출력해보면 새로 추가한 수박이 반영되어 있는 걸 확인할 수 있다.

깊은 복사 방법은

- toList()를 추가하여 새로운 배열을 만드는 방법,

- 전개 연산자(...)를 사용하는 방법,

- map()함수를 활용하는 방법

이 있다.

그리고 copyWith를 활용하는 깊은 복사 방법을 알아보자.

Operator ==

oop라는 명칭이 생겨난 이유는 모든 클래스가 기본적으로 object를 extend 하기 때문이다.
Object라는 최상위 클래스가 제공해주는 모든 파라미터들을 모든 클래스들이 사용할 수 있다는 의미다.
대부분의 언어에서는 이 Object라는 클래스에 A 인스턴스와 B 인스턴스를 비교하는 알고리즘이 정의되어 있다.
Dart 에서는 operator라는 함수에 정의 되어있고, 이를 override 함으로써 값 비교 알고리즘을 자유롭게 변경할 수 있다.


Hash Code

hashcode 함수는 Map 또는 Set에서 키의 역할을 하게 된다.
Map이나 Set은 키가 중복으로 저장될 수 없기 떄문에 Set, Map의 키로 Object가 저장되었을 때 어떻게 키값을 정의할지가 중요하다.

프로퍼티(변수)가 늘어나면 늘어날수록 operator와 hashcode를 작성하는것이 귀찮아진다.
dart에서는 equatable클래스를 상속받아 이 문제를 해결하고 있다.

Equatable 클래스를 상속받고 props 라는 메소드를 override 해주면 된다.

equatable 패키지 설치는 https://pub.dev/packages/equatable 를 참조하면 된다.

Dart 에 cascade notation(.., ?..) 이 있다.

처음 접하다보니 이게 뭔가 싶어서 찾아보고 적어둔다.

아래 예제의 출처는 https://www.educative.io/answers/what-is-dart-cascade-notation  인데, 약간 주석 내용을 포함해서 조금 더 보완했다.

cascade notation(.., ?..) 을 사용하면 같은 객체에 대해 일련의 작업을 수행할 수 있다. 

인스턴스 멤버에 접근하는 것 외에도 같은 객체에서 인스턴스 메서드를 호출할 수도 있다. 

이렇게 하면 임시 변수를 만드는 단계가 줄어들고 더 유동적인 코드를 작성할 수 있다.

하지만 위의 예시는 잘못된 결과가 반환된다.

왜? Custom Class 객체를 생성할 때마다 메모리 주소가 다르기 때문이다.

위와 같이 해야 정상적인 결과를 반환한다.

Flutter 코드 구현시 자주 사용하는 기능이라 적어둔다.

Class Model 생성할 때 key 가 되는 id 가 없이 구현될 경우를 살펴보고자 한다.

값을 수정하거나, 삭제할 때 index 로 삭제해야 한다.

Model 에는 index 가 없기 때문에 asMap 으로 변환하여 index 기준으로 수정, 삭제할 수 있다.

Custom Model 대신에 간단한 테스트를 위해 String 으로 대체했다.

Riverpod 용 Provider 로 구현 시에는 _list 대신에 state 로 변경하면 된다.

asMap()을 사용하면 Map으로 형변환이 가능하다.

Map 에서 .keys를 사용하면 key 값을, .values를 사용하면 value 값을 가져온다.

map.keys 는 Iterable 객체로 반환되기 때문에 .toList()를 사용해서 변형해줘야 List 객체가 된다.

asMap().entries.map 을 사용하면 새로운 리스트가 만들어진다. entry 조건을 비교하여 값을 update할 수 있다.

Riverpod 가 좋은 상태관리 라이브러리 이지만 초보자에겐 어렵다는 것에 공감한다.

하나씩 이해하기 위해서 기록하고 수정 보완하려고 한다.

Flutter riverpod 자동 생성하는 방법이다.

@riverpod 를 어노테이션을 사용하여 riverpod 자동 생성을 할 수 있다.

함수로 정의하는 경우와 클래스로 정의하는 경우가 있는데, 클래스로 정의하는 경우를 더 많이 사용할 거 같다.

함수처럼 정의하여 사용하는 경우와 Class 로 정의하여 사용하는 경우를 예시하고 있다.

자동으로 생성하지 않고 직접 구현하는 경우의 코드.

자동으로 생성한 코드

아래 코드와 위의 코드는 서로 같은 결과를 반환한다.

UI에 출력하여 결과를 확인해보자.

최상위에 ProviderScope를 지정하여 project 전반에 프로바이더 선언/접근을 가능하게 한다.

Riverpod를 읽기 위해서는 ref 객체가 필요하다.
ref 객체는 일반적으로 사용하는 StatelessWidget 에서는 얻을 수 없고, ConsumerWidget을 사용하거나 사용하고 싶은 위젯 부분에서 Consumer 위젯으로 감싸면 ref 객체를 얻을 수 있다.
build() 메서드 내부에 선언한 listOfString 변수는 ref 객체의 watch 메서드를 사용하여 myNotifierProvider의 List<String> 타입의 상태값을 받아온다.
myNotifierProvider의 상태가 변할 때마다 감지할 수 있고 위젯을 리빌드 할 수 있다.

자동으로 생성하는 CRUD 예제를 더 보강할 예정이다.

Riverpod 를 생성하는 기본 사항을 알고 나면, Dart 언어를 잘 다루는 것이 중요하다는 걸 많이 느끼고 있다.

Dart asMap 에 대한 Dart 문법은 https://link2me.tistory.com/2372 를 참조하면 도움된다.

Flutter 프로젝트 신규 생성 시 기본적으로 가장 먼저 추가할 라이브러리를 정리해봤다.

기본적으로 서버의 JSON 포멧 자료를 파싱처리를 자동으로 하기 위해서 Retrofit 라이브러리를 같이 추가해준다.

상태관리 라이브러리는

riverpod 로 된 강좌도 있고, provider 로 된 강좌도 있다.

주로 provider 상태관리 라이브리를 활용한 강좌가 많다.

http 로 서버 통신 강좌 설명을 하기도 하지만 Dio 라이브러리를 활용하는 것이 더 좋다.

header 에 cookie 정보를 실어서 Session 처리를 하기도 좋고, JWT 토큰 인증시에도 활용하기 좋다.

flutter test
00:08 +0 -1: C:/Workspace/Flutter/note_app/test/data/data_source/note_db_helper_test.dart: db test [E]
  SqfliteFfiException(error, Invalid argument(s): Failed to load dynamic library 'sqlite3.dll': error code 126}) DatabaseException(Invalid argument(s): Failed to load dynamic library 'sqlite3.dll': error code 126)
  package:sqflite_common_ffi/src/method_call.dart 125:9  responseToResultOrThrow
  package:sqflite_common_ffi/src/isolate.dart 33:12      SqfliteIsolate.handle

윈도우 환경에서 테스트 하니까 위와 같은 메시지가 출력되었다.

프로젝트 root 폴더에 sqlite3.dll 파일을 복사하여 넣으면 해결된다.

Flutter Provider로 작성된 상태관리 ViewModel이다.

ViewModel 로 클래스명을 정의하기도 하고 Service로 정의하기도 한다.

View 에서 코드를 분리하여 ViewModel에 코드를 대부분 구현하고, View에서는 UI중심으로 코드가 최소화되도록 구현하는 것이 중요하다.

ViewModel 에서는 UI에서 직접적으로 수정할 수 없도록 변수를 선언하는 것이 매우 중요하다.

그래서 위 예제에서는 Class 내부에 있는 변수에 언더바(_)를 붙여서 Private로 정의했고, 외부에서 접근하는 것은 Getter를 추가했다.

기능을 추가할 때 ViewModel 안에 선언한 변수를 외부에서 직접적으로 접근할 수 없도록 신경써야 한다.

CustLogInterceptor는 Interceptor를 상속받았고 특별하게 코드를 추가한 것은 없다.

아래 코드를 잘 활용하면 유용하게 사용할 수 있다.

HomePage UI 클래스

플러터를 구현하다가 만나는 팁 정보를 하나씩 모아서 적어두려고 한다.

List<String>.from(item['name']),

    - 'List<dynamic>' is not a subtype of type 'List<String>' 에러 메시지를 만났을 때의 해결 방법

AppBar 배경 그림자 없애기

elevation : 0 으로 설정

검색창 코드

이미지 위에 또다른 이미지를 겹쳐서 보이도록 하고 싶을 때는 Stack 위젯을 사용한다.

온라인 강좌를 듣고 Provider 상태관리를 Riverpod 로 변경해보고 있다.

구글 검색으로 많이 나오는 Todo 에 예제와 비슷한 예제이다.

Riverpod Notifier로 구현한 코드와

Provider 로 구현한 BucketService 코드를

비교해서 보면 도움이 될 거 같다.

로그인 구현 함수를 별도로 구현하지 않고, Retrofit 라이브러를 활용하여 간단하게 로그인 하는 코드로 변경했다.

로그인 함수를 추가하고 터미널창에서 dart run build_runner build 를 다시 해서 rest_client.g.dart 파일을 업데이트 한다.

login_screen.dart 파일 코드

PHP Session 을 처리하는 핵심코드를 구현하느라고 하루종일 삽질을 엄청했다.

구글링을 해도 제대로 된 것을 찾기가 어려웠고, CookieJar 커스텀으로 해결하려고 했으나 실패했다.

인프런 유료강좌 "[코드팩토리][중급] Flutter 진짜 실전"  강좌에서 언급된 코드가 생각이 나서 Access_Token 처리 대신에 Cookie 를 실어보내는 코드로 구현해보면 되겠다 싶어서 테스트해봤더니 성공했다.

플러터에서 로그인은 시도하는 코드를 살펴보자.

Android APP 개발시에는 서버 세션을 처리하기 위해서 CookieJar를 Custom 으로 implements 하여 해결을 했다.

Flutter 에서 이 방법으로 해결 시도해보다가 실패하여 포기했다.

아래 주석처리한 CustLogInterceptor 파일을 활용하여 PHP Session 을 FlutterSecureStorage 에 저장하고 Load하여 보내는 방법으로 해결했다.

dio.interceptors.add(CookieManager(cookieJar)); 코드는 사용되지 않으므로 삭제하면 된다.

최근에는 2차 인증은 기본으로 적용하고 있다. PHP Session 생성을 하는 위치가 매우 중요하다.

1차 인증 로그인 이후 2차 인증(Google OTP, SMS OTP 등)을 성공하고 난 이후에 PHP Session 을 생성해야 한다.

아래 코드는 1차 인증 후 PHP Session 을 생성하는 예제로 구현했다.

로그인을 위한 코드와 로그인 화면은 위와 같다.

로그인을 시도하고 로그인은 성공하고 난 이후의 로그를 살펴보자.

위의 코드에서 일부러 loginChk.php 에서 로그인 성공이 되더라도 APP에서 서버의 Session 값을 저장하지 않았다.

로그를 보면 loginChk.php 파일에서 set-cookie 값이 넘어온 값과 ContactList.php 에서 넘어온 set-cookie 값이 서로 다르다는 걸 확인할 수 있다.

APP에서는 서버에서 전달받은 set-cookie 값을 저장해서 이 값을 header 정보에 다시 실어보내야 서버에서 생성한 Session 일치 여부를 확인할 수 있다.

loginChk.php 파일은 어떻게 구성되어 있는지 살펴보자.

- 서버와 APP간에 키 정보가 있는지 확인하고, 키가 일치해야만 다음 단계로 진행된다.

- 어떤 userID로 로그인을 시도하는지 모르도록 AES256 암호화/복호화 처리를 했다.

- 비밀번호는 반드시 RSA 암호화/복호화를 해야 보안검증에 통과된다. (기업 사용 용도)

- 아래 예시코드는 완벽한 예제는 아니다.

  개발 테스트용으로 구현한 코드이기 때문에 필요한 사항만 넣었다.

- APP에서 폰 번호를 획득하여, 서버 DB에 있는 인사정보 휴대폰번호와 불일치하는 경우에는

  사용하지 못하도록 처리하는 서버 함수를 구현하면 된다.

ContactList.php 파일 코드

- 세션 정보가 일치하는지 여부를 체크하는 로직이 추가되어 있다.

- 세부 설명은 아래 코드에 포함된 주석 정보를 보면 이해될 것이다.

여기까지 1단계 과정을 적어둔다.