리액트 네이티브 2

[React Native]URL 배너 생성 시 re-rendering 속도 최적화

후.. 또 어찌어찌 문제 하나 해결해냈다. 이번 건 꽤나 끙끙 앓았던 문제여서 그런지 해결하고 나니 엄청 속이 시원해지는 magic.. 1. Introduction: What is the problem? 지난 번 만들었던 라이브 커머스 방송에 접속했을 때 화면을 클릭하면 채팅창과 하트 날리는 버튼이 가려졌다 나타나는 기능에 더해, 실제 라이브 커머스 스트리밍에서 꼭 필요한 기능인 배너 이미지(하단 이미지 참조)를 만들었다. 스트리머가 URL을 입력하면 해당 URL로부터 이미지와 타이틀, description에 대한 메타데이터를 크롤링해 아래와 같이 배너가 만들어진다. 이를 해결하기 위해 react-native-url-preview 오픈 소스를 가져다가 사용했다. 문제는 오픈 소스로 제공하는 컴포넌트를 뜯..

React Native 2022.02.18

[React Native] 스크린 터치 시 컴포넌트 hide/show 구현

어쩌다 보니 졸지에 백인데 프론트를 맡아서 하고 있는 처지이나..예전에 디자인도 공부했고 보여지는 것에 관심이 많은지라 프론트도 잘할 수 있을 것이라 생각해 호기롭게 맡았다. 결과는 처참 그 자체..인 것 같았으나! 오늘 드디어 어찌저찌 문제를 해결했다. 엄밀히 말하면 반쪽짜리로 구현했지만, 일단 1차적으로 글을 쓰고 다시 고민해 최종적으로 결과물을 구현해볼 예정이다.(수정 - 문제 해결 완료! 하단에 추가) 현재 우리 팀의 아이템은 이다. 여기서 내가 맡은 부분은 스트리머/뷰어가 라이브 방송을 켰을 때의 화면을 구현하는 것을 맡았다. 관련해서 스켈레톤 코드는 github에서 스트리밍 오픈소스를 참고했다. 참조한 소스코드가 클래스형 컴포넌트로 구성되어 있어 본 코드는 클래스형으로 구현했음을 미리 적는다...

React Native 2022.02.13