열정보단 시스템

앱 권한은 사용자가 특정 화면에서 이용할 수 있는 서비스에 대한 권한을 의미한다. 앱 권한은 사용자가 앱에 정보를 입력하면서 모든 권한에 대한 허용 메세지를 띄우거나, 특정 서비스를 직접 접근했을 때 메세지를 띄우기도 한다. 필자가 보기에는 카메라/앨범/위치 추적 관련 서비스를 이용하기 직전에 권한 허용 메세지를 띄우는 것이 합리적으로 보이나 최근에 살펴본 여러 앱에서는 회원가입할 때 모든 권한에 대한 메세지를 연달아 띄우는 것도 보았다. 어느 것이 더 효율적이냐는 사용자 입장에서 굉장히 세부적인 차이로 어느게 더 편리하고 접근성이 좋은지에 따라 결정하면 된다. 앱 권한에 대한 구현을 다루기 앞서, 사용자의 대응 방식에 대해서도 생각해볼 필요가 있다. 위 패턴은 사용자가 앱 권한에 대해 허용하지 않거나,..

앱 권한에 대해 정리를 해볼 것이다. 최근 번아웃이 오면서 개발 공부에 대한 정리를 조금씩 미뤘었는데 다시 키(舵)를 잡아보려고 한다. 우선 사용자가 어플리케이션 내부로 들어와서 서비스를 이용하기 전에 등록해야하는 로그인/회원가입의 로직부터 정리할 필요가 있다. 필요한 내용을 다음과 같이 리스트업을 해보았다. 소셜 로그인 방식(Google/Apple) 유저 정보 처리 토큰 처리(Local Storage 저장) SignIn/SignOut 회원가입시 필요한 로직 휴대폰 인증 구현 필요한 정보 정리(이메일, 이름, 지역, 나이 ~ ) 앱 권한 1번은 처음 공부했을 때와는 달리 대략적은 틀과 구현 방법에 대해서는 알고 있기 때문에 큰 걱정은 없다. 가장 먼저 소셜 로그인을 통해 받아온 유저정보/토큰 중에서 필요..

이번에는 애플 소셜 로그인 기능에 대해 구현해보려고 한다. 2020년 04월 Apple 신규 가이드라인에 따르면, 소셜 로그인 서비스를 사용하는 앱은 필수적으로 Apple 로그인 역시 제공해야한다고 한다. 그렇기 때문에 기존에 구현했던 구글에 애플 버튼도 추가하여 로그인 서비스를 구현해야 하고, 추가적으로는 이를 백단에 어떤 분기점을 준 상태로 넘겨줘야 하는지도 고민해봐야할 것 같다. (애플 개발자 계정(Apple Developer)에서 내 계정에 'Sign In With Apple' 기능을 추가하여 Xcode 상에 적용하는 과정은 생략하겠다.) Apple Social Login 애플 로그인은 iOS 디바이스에만 구현이 될 것이며, 의존성 라이브러리는 다음을 사용할 계획이다. (https://github..

기존에 적용했던 react-native-image-picker에 crop 기능이 필요하여 추가 구현을 진행했다. 그러나 react-native-image-picker로는 도저히 cropping 기능을 포함시킬 수가 없어서 결국 의존성 라이브러리를 교체하였다. 교체된 라이브러리는 react-native-image-crop-picker이며 사실상 설치 및 구현 과정을 전과 유사하다. + useState 로 editProfileView 안에서 이미지 교체로 적용하였다.

화면 전환에 대해 공부를 하면서 Typescript 상에서의 네비게이터 설정이 생각보다 복잡하여 정리가 필요하다. 가장 먼저 Navigation을 사용하기 위하여 의존성 라이브러리 설치가 먼저 필요하다. yarn add react-native-gesture-handler react-navigation yarn add react-native-safe-area-context react-native-screens yarn add @react-native-community/masked-view yarn add @react-navigation/native @react-navigation/stack Typescript를 사용하기 전에는 JavaScript로만 구현을 했기 때문에 타입형에 대한 부분이 추가될 필요가 ..

머리 아픈 sticky header 구현.. 화이팅 프로필 페이징 구현은 react-native materialTopTabNavigator 로도 안되고.. react-native-tab-views로도 안되니.. UI 하나하나 다 짠 다음에 TouchableOpacity로 감싸주고 버튼마다 페이징으로 넣어줘야하려나? //추후 정리 예정

개발을 하다가 간혹 가상 시뮬레이터가 아닌 실제 디바이스에서 테스트를 해봐야 할 일이 생긴다. 이번에 react-native-image-picker를 사용해서 카메라/앨범 접근 권한 및 파일 불러오는 기능을 구현해보는데 앨범 접근은 시뮬레이터에서 가능하지만 카메라는 실기기에서만 테스트가 가능하다는 것을 확인했다. 이를 위해 'react-native run-ios'을 통해 시뮬레이터 돌리던 것을 추가 명령어를 돌려줬다. 우선 ios-deploy를 설치한다. npm install -g ios-deploy 그다음, 추가 명령어는 간단하다. 'react-native run-ios' 뒤에 '--device '나의 device 이름' --configuration Release'만 추가해준다. react-native..

ModalView 를 만들기에 앞서 라이브러리를 사용할지 아니면 react-native 에서 기본으로 제공해주는 기능을 활용할지 선택을 해야한다. 구현을 하면서 모달뷰만큼은 Swift가 조금은 그리웠..는데 RN에서는 홈뷰와 페이징이 쉬웠다면 swift에서는 모달뷰 전환과 네이게이션 제어가 간편한 것 같다. npm i react-native-modal // or yarn add react-native-modal //추후 정리본 추가

구글 로그인 구현을 iOS, Android 모두 완료했다. 구글 로그인을 마치는 순간, 구글 서버로부터 유저 정보와 토큰이 날라올 것이고, 우리는 여기서 필요한 정보를 저장하여 백으로 보내줄 것이다. Swift를 공부할 때엔, 받아온 token을 KeychainWrapper를 활용하여 안전하게 보관을 하고 필요할 때마다 꺼내서 인터셉터를 통해 헤더에 얹어서 API를 쏴주었다. RN 스터디 순서는 다음과 같다. 토큰을 어떻게 저장할 것인지 Axios 상에서 Interceptor는 어떻게 구현하는지 헤더에 얹어서 token을 .post하였다면, refresh Token 갱신을 어떻게 하는지 Token 저장하기 보통 State와 같은 Component의 상태 관리를 위해서는 Redux를 사용한다. 하지만 우리..

Restful API 는 내가 개발이 재미있다고 느낀 첫 번째 관문이다. 화면 상에 시각적 요소들을 배치하는 것도 중요한 장치이지만 눈에 보이지 않는 서버 자원들을 화면으로 옮겨담는 것은 굉장히 흥미로운 일이라고 생각한다. Swift의 Alamofire 라이브러리로 API의 개념을 처음 공부했을 때에는 그 개념을 이해하는 데에만 며칠이 걸렸던 것 같다. 문장을 읽어도 '이게 무슨 말이지?' 싶었고 API 개념, 구현뿐만 아니라 generic type과 @escaping, closure, json parsing, codable & decodable, 비동기(DispatchQueue.main.async), 싱글톤과 같이 얽히면서 서로 구현에 들어가는 것들에 대한 공부도 필요했다. 그 결과, 짧은 개발 독학 ..