<aside>
🌳 옛날부터 하고 싶었지만 “만들만한 것이 없다”는 핑계(실상은 잘 모르는 영역에 대한 막연한 두려움)로 진행하지 못했던 리액트 네이티브 라이브러리를 만들어봤다
</aside>
https://evanw.github.io/thumbhash/
먼저 내가 만들려고 하는 라이브러리의 모태가 되는 thumbhash에 대해서 얘기를 할 필요가 있다. 먼저 thumbhash를 만든 사람은 이렇게 얘기한다
이미지 플레이스홀더의 매우 컴팩트한 표현입니다. 데이터와 함께 인라인으로 저장하고 실제 이미지가 로딩되는 동안 표시하여 더 부드러운 로딩 경험을 제공합니다. BlurHash와 비슷하지만 다음과 같은 장점이 있습니다.
- 같은 공간에 더 많은 세부 정보를 인코딩합니다.
- 종횡비도 인코딩합니다.
- 보다 정확한 색상을 제공합니다.
- 알파 채널이 있는 이미지를 지원합니다.
ThumbHash는 이러한 모든 추가적인 기능을 수행함에도 불구하고 코드 복잡성은 BlurHash 코드와 유사합니다. BlurHash에 비해 잠재적인 단점은 알고리즘의 매개 변수를 구성할 수 없다는 점입니다(모든 것이 자동으로 구성됩니다).
데모와 자세한 정보는 여기에서 확인하실 수 있습니다: https://evanw.github.io/thumbhash/.
위의 thumbhash라는 것을 알게되기 불과 얼마 전에 https://github.com/mrousavy/react-native-blurhash에 대해서 알게되었다. RN 생태계에 오래 있으면서 이제야 알게 된 것이 참으로 안타깝지만, 이걸 알게되고 내 앱에도 무조건 녹여내고 싶었는데 그것보다 더 컴팩트한 알고리즘인 thumbhash가 있다는 것을 알게된 순간 RN에 thumbhash를 적용시키고 싶어졌다.
다만 아쉬운 정은 thumbhash는 따로 RN의 패키지가 없었고, 그 말인 즉슨 직접 만들어야 한다는 뜻이었는데, 마침 시간이 많이 남는 터라 직접 네이티브 모듈로 구성해보기로 하였다. 여태까지 찾아 해매던 “만들만한 것이 없다” 는 핑계에 대한 적절한 대답이기도 하고 말이다.
그래서 이제 어떤 식으로 만들었는지 알아보겠다. 만들면서 동시에 작성하는 것이 아니고 어떤 식으로 구성했는지 대략적인 가이드라인이므로 자세한 내용은 https://github.com/Lucky-pear/react-native-thumbhash 레포지토리에서 직접 코드와 구성을 보는 것이 좋다.
RN에서 라이브러리를 만드는 가장 좋은 도구가 아닐까 생각이 든다.
npx create-react-native-library@latest thumbhash
해당 명령어로 생성을 했고, 마지막 단계에서 ObjectiveC & Java 기반의 Fabic View(구 아키텍쳐 지원)로 프로젝트를 생성했다.
참조하기가 맞는지는 모르겠지만, new architecture 때문인지 개인의 한계인지 새롭게 느껴지는 부분들이 많다고 느껴져서 거의 복제하다싶이 react-native-blurhash의 코드들을 참고했다.
iOS의 경우에는 Blurhash~~~.확장자 파일들 중 View와 관련된 녀석들을 먼저 하나하나씩 가져오고 example에서 실행해보면서 대충 감을 찾았고, Android도 마찬가지로 그런식으로 진행했다. 개인적으로는 안드로이드가 조금 덜 헷갈렸다.