[FlutterWeb] #5 이미지 복사, 붙여넣기 문제 해결

플러터 웹 개발 시리즈 5번째. 에이블의 고질적인 이미지 복사/붙여넣기 문제 해결을 위한 등판!

이전글

[FlutterWeb] #4 라이팅, 네비게이션

1. Event Listener 문제

에이블에서 이미지 데이터를 복사/붙여넣기 할 때, 제대로 안될 때가 있다. 이 문제의 원인은 붙여넣기 이벤트가 여러 번 발생하는 데에 있었다.

나는 분명 event listener를 만들고, 사용을 종료할 때 remove event listener를 호출했는데, 먼저 remove가 제대로 안되는 문제가 있다는 것을 알게 됐다.

그 원인은 여기에 설명되어 있다.
https://github.com/flutter/flutter/issues/113092

요약해보면, 이벤트 리스너를 만들 때와 삭제할 때 동일한지 체크하는데 문제가 있다고 한다. 그래서 동일하게 되도록 코드를 수정하면 된다는 것이다.

기존에는 이렇게 이벤트 리스너를 생성했었다.

html.document.addEventListener('paste', (e) {
       printError('addEventListener. paste. listened');
       _onImagePasted(e);
     }, true);

여기서 _onImagePasted는 이미지 붙여넣기 했을 때 수행할 함수다. 위 코드에서 문제가 발생하는데, 이벤트 리스너 생성할 때, 실행할 함수를 이름없이 {} 안에 넣어서 사용했다. 이렇게 하면 remove event listener할 때, 동일한 이름이 아니게 된다는 것이 핵심.

그래서, 이름이 동일하도록 이름 없는 람다함수를 사용하지 않고, 함수에 이름을 지정하여 사용하였다.

class _EditorState extends State<Editor> {
  late final html.EventListener _pasteListener;
  ...
  void initState() {
    super.initState();
    _pasteListener = _onImagePasted;
  ...
   html.document.addEventListener('paste', _pasteListener, true);
  } 

그리고, 이벤트 리스너를 삭제하는 부분에 add event listener 때 사용한 함수가 지워지도록 했다.

@override
  void dispose() {
    super.dispose();
    html.document.removeEventListener('paste', _pasteListener, true);
  }

참고로 _onImagePasted 함수는 이렇다.

void _onImagePasted(html.Event e) async {
    html.ClipboardEvent event = e as html.ClipboardEvent;
    ...
}

2. Navigation 문제

위처럼 하면 생성된 event listener가 잘 삭제된다! 그런데 또 다른 문제가 있다. 예를 들어, 포스트 본문에 댓글 입력을 위한 에디터가 있기 때문에 이 때, paste 이벤트가 생성된다. 이 상태에서 포스팅 화면으로 이동하면 여기서 또 다시 paste 이벤트가 추가된다. 즉 paste 이벤트가 2개 등록되어 버린다.

이 문제의 원인은 포스트 본문에서 포스팅 화면으로 넘어갈 때, 에디터의 dispose() 함수가 호출되지 않아서 이벤트가 remove 되지 않기 때문이다.

이것은 라우팅에 관련된 문제다. 화면 전환할 때, 라우트를 stack에 쌓는 방식으로 네비게이션했기 때문에 발생하는 문제다. 이 문제를 해결하기 위해 포스팅 화면으로 이동할 때는 라우트를 stack에 쌓지 않고 네비게이션 하는 것이다.

에이블은 GetX를 이용해서 네비게이션 하는데, 기존과 개선 후의 차이를 보면 다음과 같다.

• 기존

Get.to(() => PostingScreen());

• 개선

Get.off(() => PostingScreen());

포스팅 화면으로 네비게이션 할 때, stack에 쌓지 않고 가도록 했다. 그렇게 하면 editor의 dispose 함수가 호출되고 그 안에서 이벤트가 삭제된다.

정리

에이블 에디터에서 이미지 복사, 붙여넣기 문제는 이벤트 리스너가 중복 등록되어 발생한 문제로, 다음 두 가지 방법으로 해결하였다.

1. 이벤트 리스너가 실행할 함수 이름을 지정하여 사용하지 않을 때, 삭제
2. 포스팅 화면으로 네비게이션할 때, 라우트를 삭제하고 이동하여 dispose 함수가 실행되도록 함

에이블의 에디터 문제를 개선하고 있다. Rich Editor도 현재 문제가 있어 다시 마크다운 에디터 하나만 유지 개선할 계획이다.

Please vote for me as a witness and Resteem this post

Thank you everyone for voting.

https://steemitwallet.com/~witnesses

@steemcurator01, Thank you for Your Support

cc.
@pennsif

Posted through the AVLE Dapp (https://avle.io)