728x90

분류 전체보기 39

[Nodejs/Express] 서버 구축

React Native 안에서 axios 를 사용해서 정보를 업로드(post)하고, 가져오는(get) 방식을 직접 내 눈으로 확인하고 싶어서 간단한 서버를 만들어보기로 했다. 처음에는 어떻게 구현하는 건지 몰랐기에 엄청나게 복잡할 것으로 예상되기도 했었고, 혼자 공부하는 만큼 조언을 구하기 위해 카카오톡 오픈채팅방을 활용하여 업계 선배들에게 물어본 결과 직접 만들어보는 것이 도움이 될 거라고 하셨다. 서버를 만드는 데에 목적은 다음과 같다. 취업 후 백엔드 개발자와의 원활한 소통 RESTful API 설계 보완 구축은 가장 먼저 npm init 과 express 설치를 통해 package.json을 생성하고, VSCode 상에서 폴더를 불러와서 index.js 로 구현한다. package.json 생성 ..

Backend 2022.01.25

휴대폰 본인인증 구현

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

Frontend/Auth 2022.01.20

앱 권한에 대한 것 / react-native-permissions

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

Frontend/Auth 2022.01.19

사용자 유입에 대한 플로우 정리

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

Frontend/Auth 2022.01.19

애플 소셜 로그인(1) / @invertase/react-native-apple-authentication

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

Frontend/Auth 2022.01.19

[React Native] Cropping for Image Picker

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

Frontend/Component 2022.01.11

[React Native] Typescript에서 Navigation 적용하기

화면 전환에 대해 공부를 하면서 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로만 구현을 했기 때문에 타입형에 대한 부분이 추가될 필요가 ..

Frontend/Navigation 2022.01.06

[React Native] iOS 실제 디바이스에서 카메라 접근하기

개발을 하다가 간혹 가상 시뮬레이터가 아닌 실제 디바이스에서 테스트를 해봐야 할 일이 생긴다. 이번에 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..

Frontend/Component 2022.01.01
728x90