📌 개요React Native에서 react-native-image-picker 라이브러리를 이용하여 사용자가 갤러리에서 프로필 이미지를 선택하고 업로드하는 기능을 구현하는 방법을 설명합니다.📥 ImagePicker 설치 및 설정먼저, react-native-image-picker 라이브러리를 설치한다.npm install react-native-image-pickerAndroid 설정 (필요한 경우)Android에서는 AndroidManifest.xml에 권한을 추가해야 합니다.android/app/src/main/AndroidManifest.xml 파일을 열고 다음을 추가합니다.📌 구현 코드아래 코드를 통해 사용자가 갤러리에서 이미지를 선택하고 즉시 UI에 반영한 후, 서버에 업로드하는 기능을 ..

전에 포스팅했던 글에 이어서 이번에는 이 실시간 타이머 모달을 슬라이드 하여 내리거나 올릴 수 있는 기능을 공부하고 포스팅한다.구현 목표 드래그 동작이 중단되었을 때, 모달이 원래 위치로 복귀하거나 화면 아래로 사라지도록 설정한다.이 때에 화면 위로 아예 올라가는 현상은 방지한다.모달 외부 터치 시에도 닫히는 기능을 구현한다.사용된 주요 기술1. PanResponder제스처를 감지하고 처리하기 위한 React Native의 API이다. (별도로 설치 필요 X)사용자의 드래그 동작을 감지하여 Y축 이동 값을 업데이트하는 데 사용된다.2. AnimatedReact Native에서 애니메이션을 구현하기 위한 라이브러리이다.Animated.Value와 Animated.timing을 사용하여 Y축의 위치를 제어...

필자는 헬스관리 어플을 만들고 있다.웨이트경력 7년차로 나름 헬스를 하는데에 있어서 꼭 필요하거나 중요한 기능들을 대강 알고 있었기에 헬스하는 사람들이라면 공감할 만한, 운동 후 휴식시간 조절을 위해 필요한 실시간 타이머를 구현하였고 어떻게 구현했는지와 무엇을 학습했는 지에 대해 포스팅 한다.구현 목표 아래 이미지의 타이머를 구현하고자 했다.시간은 MM:SS 형식 즉, 두자리를 유지해야한다.(3자리로 넘어갈경우에는 해당 자리수만큼 유지)1초씩 감소해야 하고, 바뀐 값이 화면에도 바로 반영되어야 한다.사용자가 일시정지 버튼을 누르면 시간 감소도 멈춰야 한다.재개하면 일시정지 버튼 누르기 전 시간에서 다시 1초씩 감소해야 한다.보통 1분을 기준으로 쉬지만 "스트렝스 훈련"등의 고강도의 운동을 했을 경우 개인..

현재 2인 개발 프로젝트로 프론트엔드 담당으로서 React Native로 개발 중인 워너비핏(WannabeFit) 앱에 Redux를 적용하여 날짜 상태를 전역적으로 관리한 사례를 공유하고, Redux의 기본 개념과 사용법을 복습 겸 간단하게  다뤄보려고 한다.Redux란 무엇인가?Redux는 애플리케이션의 상태(state)를 예측 가능한 방식으로 관리하기 위해 만들어진 상태 관리 라이브러리이다. Redux는 상태(state)를 중앙 저장소(store)에 저장하고, 상태 변경이 필요한 경우에는 액션(action)을 통해 요청하고, 상태를 실제로 변경하는 작업은 리듀서(reducer)가 수행한다.Redux의 주요 구성 요소State (상태):애플리케이션에서 관리해야 하는 데이터예: 선택된 날짜, 사용자 정보..

헬스 관련 앱을 만들면서 로그인을 드디어 구현하려고 여러 블로그들과 깃허브를 참고했고, 잘 알려져있지 않은 부분도 블로그에 기술하였다. 여기서는 react-native, 네이버 로그인 라이브러리, 안드로이드용으로 사용한다.(내가 잘 못 찾은거겠지만 최신블로그와 공식 깃허브에 redirecURL관련(안드로이드용)정보는 정확히 안나와있는것이 한 몫했다. 네이버 로그인 구현 과정1.  네이버 개발자 센터에서 애플리케이션 등록먼저, 네이버 개발자 센터에서 애플리케이션을 등록하자. 네이버 개발자 센터에 로그인하여 새로운 애플리케이션을 등록하고 필요한 정보를 입력해야한다. 패키지 이름 설정: com.wannabefit과 같이 애플리케이션의 패키지 이름을 설정해준다. (ex : com.패키지 이름)이 이름은 앱에서 ..