열정보단 시스템

이번에는 FlatList로 구현해놓은 홈뷰에 새로운 게시글을 넣어볼까 한다. 과정은 다음과 같다. HomeNavigation의 HeaderRight 버튼을 통해 모달뷰 접근 모달뷰에서 선택지를 골라서(카메라/앨범/--) UploadView 접근 UploadView에서 게시글에 들어갈 새로운 이미지소스와 텍스트를 입력 상단 체크 버튼 누를 시 서버로 Post 요청 홈뷰에서 리스트 Refresh할 시, 서버로 모든 게시글 Get 요청 중간에 게시글 텍스트와 이미지소스를 제외한 데이터만 받아오는 에러가 있었는데, 타입형 문제도 아니고 뭐지? 싶어서 어제 하루종일 낑낑대다가 결국 잠들었다.. 오늘 일어나서 터미널창 끄고 시뮬레이터도 다시 실행했더니 해결.. (네?..) 무튼 nodejs 코드는 다음을 추가했다...

사용자가 회원가입하기 위한 정보를 입력하기 전에 앱 권한 설정과 본인 인증 확인이 필요하다. 이번 시간에는 전화번호를 입력하여 본인 인증 기능을 구현하려고 한다.기본적인 화면 UI는 아래와 같이 TextInput과 버튼이 전부이다.이를 좀 더 세부적으로 구현하기 위해, TextInput은 전화번호를 입력하기 위해 11개의 번호만 입력할 수 있도록 제한시켰고, 11개가 입력되었을 때만 버튼의 disabled에 false 값을 주었다. 버튼은 TouchableOpcity로 구현했으며 키보드를 제외한 영역을 터치했을 시 키보드가 자동으로 사라지기 위해 TouchableWithoutFeedback을 사용해서 onPress에 Keyboard.dismiss() 함수를 넣어줬다. 그러나 TouchableWithout..

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

앱 권한에 대해 정리를 해볼 것이다. 최근 번아웃이 오면서 개발 공부에 대한 정리를 조금씩 미뤘었는데 다시 키(舵)를 잡아보려고 한다. 우선 사용자가 어플리케이션 내부로 들어와서 서비스를 이용하기 전에 등록해야하는 로그인/회원가입의 로직부터 정리할 필요가 있다. 필요한 내용을 다음과 같이 리스트업을 해보았다. 소셜 로그인 방식(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..

yarn add react-native-image-picker # RN >= 0.60 cd ios && pod install # RN < 0.60 react-native link react-native-image-picker