Neoself의 기술 블로그

네이버에 자동차를 검색하면, 아래와 같이 드래그 동작으로 원하는 각도에서의 이미지 확인이 가능한 360도 이미지 뷰어를 본 적이 있을 것이다. 해당 뷰어는 실제로 3D모델을 사용하기보단, 다각도에서 촬영한 여러 사진들 중 하나를 드래그 제스처에 맞춰 렌더하는 방식으로 동작한다. 라이브러리를 사용하지 않고, React Native 프레임워크에서 해당 기능을 구현해보자. 우선 새로운 기능 구현을 할때마다 항상 그래왔듯 유사한 라이브러리의 깃허브 레포지토리를 확인해 동작방식을 분석해보았다. 구현목표와 가장 근접한 라이브러리는 react-native-360-image-viewer 라이브러리였다.https://github.com/phuochau/react-native-360-image-viewer GitHub -..

React Native 앱의 경우 대표적으로 react-native-splash-screen 라이브러리를 통해 초기 SplashScreen 구현이 가능하다. 하지만 라이브러리들을 일괄적으로 업데이트할때마다 각 라이브러리의 네이티브 코드끼리 충돌이 생기는 이슈를 겪으면서, 라이브러리들을 자체적으로 모듈화하는 것이 유지보수에 더 용이할 것이라는 판단 하에, react-native-splash-screen 라이브러리의 대체방안을 모색하게 되었다. 가장 먼저 시도한 방안은 iOS가 기본 제공하는 LaunchScreen으로 SplashScreen을 구현하는 것이였다. 하지만, React Native로 구현된 앱의 경우 네이티브 앱과 달리 앱 초기 로드 간에 추가적인 단계가 필요하기에 일반적으로 더 많은 시간이 소..

React Native 앱의 경우 대표적으로 react-native-splash-screen 라이브러리를 통해 초기 SplashScreen 구현이 가능하다. 하지만 라이브러리들을 일괄적으로 업데이트할때마다 각 라이브러리의 네이티브 코드끼리 충돌이 생기는 이슈를 겪으면서, 라이브러리들을 자체적으로 모듈화하는 것이 유지보수에 더 용이할 것이라는 판단 하에, react-native-splash-screen 라이브러리의 대체방안을 모색하게 되었다. 가장 먼저 시도한 방안은 iOS가 기본 제공하는 LaunchScreen으로 SplashScreen을 구현하는 것이였다. 하지만, React Native로 구현된 앱의 경우 네이티브 앱과 달리 앱 초기 로드 간에 추가적인 단계가 필요하기에 일반적으로 더 많은 시간이 소..

어느 순간부터 React Native에서 라이브러리들을 업데이트하고, pod install을 실행할때 아래와 같이 PrivacyInfo.xcprivacy 파일이 슬며시 ios 폴더 내부에 생성되는 것을 확인할 수 있다. 이는 2024년 5월 1일부터 변경된 Apple의 개인정보 보호 정책 내용에 따라 앱스토어 등록 시 같이 지참해야하는 파일이며, 앱으로 수집하는 사용자 데이터의 유형, 그리고 데이터 수집 사유의 명시를 위한 파일이다. 해당 파일의 위치는 iOS 프로젝트의 경우 프로젝트 루트, React Native 프로젝트의 경우 ios 폴더 내부여야 인식이 가능하다. 5월 1일부터 해당 파일 없이, 사용자 데이터를 수집하는 앱을 등록하려 할 경우, 앱 스토어에서 심사가 거부될 수 있다고 하니, 그저..

모바일 앱 개발에서 사용자 경험은 매우 중요하다. 특히 데이터를 불러오는 동안 사용자에게 적절한 피드백을 제공하는 것은 필수적이다. 이 글에서는 React Native 환경에서 효과적인 로딩 UI를 구현하는 방법, 특히 스켈레톤 UI를 최적화하는 과정을 다루고자 한다. 서버로부터 데이터를 불러오는 작업은 비동기로 진행되는 경우가 많다. 즉, 데이터를 불러 이를 처음으로 렌더하기까지에는 적지않은 시간이 소요될 수 있다.  이때 적절한 로딩 UI를 제공하지 않으면 다음과 같은 문제가 발생할 수 있다.사용자 혼란: 화면이 비어 있거나 변화가 없으면 사용자는 앱이 멈췄다고 생각할 수 있음잘못된 상호작용: 로딩 중임을 알리지 않으면 사용자가 불완전한 데이터로 작업을 시도할 수 있음부정적인 사용자 경험: 기다림의 ..

본 게시글은 iOS에서의 Native 모듈 연결과정을 담고 있으며, 사용할 예시로 이전에 구현하였던 파노라마뷰 모듈을 사용할 것이다. 네이티브 UI뷰 파일이 React Native에 렌더되기까지 일반적으로 필요한 파일 구성은 다음과 같이 도식화 해볼 수 있다. 우선 네이티브 뷰 자체를 구현하는 UI View 파일을 ViewManager 파일로 감싸 React Native에서 읽을 수 있는 인스턴스 형태로 변환시켜준다. 일반적으로 2개 성격의 파일이 조합되어 네이티브 모듈이 구성되지만, View Manager 파일에서 구현되는 인스턴스 생성 및 반환 로직을 UI View 파일로 이동해 하나의 파일로 구성하여도 무방하다. 마지막으로, Objective C 클래스 파일에서 RCT_EXTERN_MODULE이라는..

현재까지 프로젝트root/android 폴더 내 파일들을 설명하자면 다음과 같다.React Native 초기 생성 때 기본으로 추가되는 MainActivity.kt, MainApplication.ktgvr-android-sdk를 모듈화하여 RN에 연결하기 위한 PanoramaViewManager.java 및 PanoramaViewPackage.java 파일gvr-android-sdk가 제공하는 패키지 및 함수가 호출되고 사용되는 파일들이 위치한 video360 폴더MediaLoader.java = 렌더되는 파노라마 이미지 처리 및 관리 관련 클래스가 구현되어있는 파일VideoUiView.java = 렌더 대상을 이미지와 비디오 사이에서 토글하기 위한 Ui 구현에 필요한 파일MonoscopicView.ja..

Android에서의 Native UIComponent 모듈 연결과정은 다음 순서로 진행된다.Android 환경 설정1.1 build.gradle 설정1.2 레이아웃 XML 파일 생성1.3 AndroidManifest.xml 설정Native Module or View Manager 파일 생성Package 파일 추가MainApplication.kt 파일 수정base레벨의 Native View가 ReactNative에서 호출될 수 있도록 연결React Native 단에서 네이티브 모듈 연결1. Android 환경 설정1.1 build.gradle 설정먼저 app/build.gradle 파일에 필요한 패키지를 추가한다implementation "androidx.core:core-ktx:1.12.0"impleme..

1. 구현 방향 설정초기에는 react-native-panorama-view 라이브러리를 import하여 앱 내부에 파노라마 뷰를 추가하려고 하였다.https://github.com/lightbasenl/react-native-panorama-view 파노라마 뷰를 다루는 라이브러리들 중 100개를 넘는 깃허브 스타를 갖고 있는 라이브러리였음도 불구하고, ios, android 두 네이티브 플랫폼 다 정상동작하지 않았다,,, 확실히 앱에 자주 사용되지 않는 기능의 경우 활성화된 라이브러리를 찾기 힘든 것 같다.. 라이브러리 코드를 분석한 결과, 대부분이 네이티브 코드로 작성되어 있었다. iOS의 경우, JavaScript와 네이티브 코드 간의 변수명 불일치로 인해 터치 제스처 관련 이벤트가 제대로 전달되..