Neoself의 기술 블로그

iOS 앱개발에서 사용자의 정보를 안전하게 관리하기 위해 Apple이 제공하는 매커니즘은 2가지가 있습니다.바로 UserDefaults와 Keychain입니다. 먼저 이 두 매커니즘의 차이를 비교해보도록 하겠습니다.UserDefaultsKeychain키-값 쌍으로 데이터 저장데이터베이스가 암호화됨앱이 삭제되면 데이터도 삭제됨앱이 삭제되어도 데이터 유지보안수준 상대적으로 약함보안수준 높음간단한 사용자 설정 및 비민감 정보 저장에 적합비밀번호, 인증토큰 저장에 적합사용용도: 언어, 최근 검색어, 앱 실행 횟수 ...사용용도: 인증 토큰, 암호화 키 ... 제가 제작한 앱인 TyTE에서는 아래와 같이 KeychainManager 클래스를 따로 만들어 Keychain 관련 작업을 정리 및 추상화하였습니다.먼..

기존에 출시한 TyTE 어플리케이션의 성능 최적화를 위해 인스턴스의 생성 및 해제 시점을 파악하고자 각 ViewModel 및 서비스 레이어에 print문을 배치시키고 홈화면에 진입한 결과, 아래 로그 내용을 볼 수 있었습니다.MainTabView initializedTodoService initializedSharedTodoViewModel initializedTodoService initializedHomeViewModel initializedTodoService initializedHomeView initialized... 로그인 및 회원가입을 완료하게 될 경우, 가장 먼저 진입하는 뷰인 MainTabView, 하위 뷰들에게 주입하고자 MainTabView에서 초기화를 거친 SharedTodoVie..

ARC(Automatic Reference Counting)은 Swift에서 메모리 관리를 자동화하는 시스템입니다. 이름에서 짐작할 수 있듯, ARC는 각 객체가 참조되는 횟수를 추적함으로써, 객체가 필요하지 않을때 자동으로 메모리에서 객체를 해제하는 시스템인데, 이때 참조 횟수의 기준은 강한 참조를 의미합니다. 아래 코드에서는 몇번의 강한 참조가 발생하고 있을까요?? class HomeViewModel: ObservableObject { private let todoService: TodoService init( todoService: TodoService = TodoService() ) { self.todoService = todoService } ..

SwiftUI에서 MVVM (Model-View-ViewModel) 패턴을 어떻게 효과적으로 구현할 수 있는지, 제가 이전에 진행했던 프로젝트인 "TyTE"를 예로 들어 설명해드리고자 합니다. MVVM은 사용자 인터페이스 로직을 비즈니스 로직과 분리하여 개발하는 아키텍처 패턴입니다. 이 패턴은 다음과 같은 세 가지 주요 구성 요소로 이루어져 있습니다.Model: 데이터 담당View: 사용자 인터페이스를 표현ViewModel: View와 Model 사이의 중개자 역할, UI 로직 처리TyTE 프로젝트의 경우 위 MVVM 패턴에서 데이터 처리, 네트워크 통신과 같은 데이터접근 함수들을 담당하는 서비스 레이어을 추가적으로 분리하여 전체 프로젝트 구조를 정립하였는데요. 이 구조는 다음과 같이 도식화 해볼 수 있..

네이버에 자동차를 검색하면, 아래와 같이 드래그 동작으로 원하는 각도에서의 이미지 확인이 가능한 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이라는..