react-native-multiple-image-picker라이브러리를 사용해 사용자 앨범에서 이미지 선택 후 formdata 처리하여 fetch/axios HTTP 통신으로 서버에 전송 시 Network request failed 문제가 발생하였다. 더욱 골치 아팠던 것은 해당 에러가 간헐적으로 발생한다는 것이었다. 성공하면 항상 성공하고 실패하면 항상 실패하는 것이 지금까지 당연한 진리였는데 이렇게 간헐적으로 문제가 발생하니 원인을 파악하기 더 어려웠다. Network request failed의 대표적인 원인으로 3가지가 있는데, 1. URL 잘못입력한 경우 2. 서버 보안 문제 3. 클리어텍스트 트래픽 문제 위 3가지 모두 나에게 해당하는 원인은 아니었다. axios, fetch 이외에 XMLH..

리액트 네이티브에서 Hook을 사용하던중 Only Call Hooks from React Functions Don’t call Hooks from regular JavaScript functions. Instead, you can: ✅ Call Hooks from React function components. ✅ Call Hooks from custom Hooks (we’ll learn about them on the next page). 위와 같은 hook 규칙을 보고 이번 기회에 functional component와 class component의 차이에 대해 한번 짚고 넘어가야 겠다고 생각했다. [선언방식] 1) Class component import React from "react"; clas..

현재 진행하고 있는 리액트 네이티브 앱 개발 프로젝트에서 음악 스트리밍등 여러가지 기능을 구현하기 위해 Spotify를 연동하는 것은 핵심 과제 중 하나였다. 기존에 RN이 아닌 Java로 개발할 당시에는 spotify developer 공식문서를 포함하여 참고할 레퍼런스가 많았기에 어려움 없이 진행되었다. 하지만 RN에서 원격으로 spotify를 컨트롤 할 수 있는 방법은 검색 결과 react-native-spotify-remote 라이브러리를 사용하는 것이 유일했다. react-native-spotify-remote 라이브러리를 사용하는 과정에서 다양한 잇슈에 직면했고 꽤 많은 시간이 소요 됐기에 이 과정을 기록하고자 한다 1.spotify developer 앱 생성 https://developer...

이전글에서 Multiple-Image-Picker 라이브러리를 사용하기 위한 준비를 마쳤다. 이제 실제로 라이브러리를 사용하여 사용자 앨범에 접근 및 여러개의 사진을 선택하여 가져와 보도록 하자. 소스코드 import React from 'react'; import {View, Button} from 'react-native'; import styled from 'styled-components'; import MultipleImagePicker from '@baronha/react-native-multiple-image-picker'; const Profile = () => { const openPicker = async () => { try { const response = await Multiple..

이전에 image-picker를 사용하여 사용자 앨범에서 사진을 선택하고 선택한 이미지 파일을 S3에 업로드하는 내용을 정리하였다. 이번글에서는 사용자 앨범에서 여러개의 사진을 가져오는 방법에 대해 소개하고자 한다. IOS의 경우 image-picker의 default 0 으로 설정되어 있는 selectionLimit 옵션을 바꿔주어 여러개의 사진을 가져올 수 있지만 해당 옵션이 안드로이드에서는 지원되지 않아 react-native-multiple-image-picker(RNMIP) 라이브러리를 사용해야 했다. react-native-multiple-image-picker(RNMIP) 설치 https://www.npmjs.com/package/@baronha/react-native-multiple-ima..

React-native로 앱 개발을 진행하던 중 아래와 같은 오류가 발생하였다. Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a colllection of children, use an array instead. 오류가 발생한 소스코드 const Profile = async () => { const [images, setImages] = useState([]); const openPicker = async () => { try { const response = await MultipleImagePicker.openPicker({ usedCameraB..

이전글에서 image-picker 라이브러리를 사용하여 사용자 앨범에 접근하는 방법에 대해 정리하였다. 이제 image file을 form-data 처리해주어 HTTP(axios | fetch)으로 서버에 전송해야 한다. 처음엔 axios를 사용하였는데 Network Error(Failed to connect)부터 서버쪽에 res.body undefined 까지 여러가지 문제가 발생했다. 1.Formdata 처리 image등의 파일을 HTTP 통신으로 전송할때는 반드시 formdata처리를 해주어야 한다. const UploadImage = async() => { const image = { uri: '', type: '', name: '', }; await launchImageLibrary({}, (r..

리액트 네이티브 앱 프로젝트를 진행하면서 image-picker를 이용한 사진 업로드를 구현한 과정을 기록하고자 한다. 개발 환경은 아래 이미지로 요약하고자 한다. 본 글에서는 image-picker를 사용한 사진 업로드가 주된 내용이므로 AWS 백앤드 구축 관련한 내용은 생략한다. image-picker로 사용자 앨범에서 선택한 사진을 S3로 업로드 하는 로직을 간단하게 요약하자면 아래와 같다. 1.client : image-picker의 launchImageLibrary메소드를 통해 사용자 앨범에 접근하여 사진을 선택하고 객체를 반환한다. 2.반환 받은 객체를 HTTP 통신으로 서버에 전송하기 위해 Formdata 처리를 해준다. 3.fetch를 사용하여 API 서버에 formdata를 post re..

앱개발 진행 중 카카오 소셜로그인을 사용하기로 했고 이를 위해 카카오 디벨로퍼에 내 앱을 등록하는 과정을 기록하고자 한다. 1.먼저 https://developers.kakao.com/ 에서 카카오 계정으로 로그인한다. 2. 상단에 내 애플리케이션으로 이동한다. 3.애플리케이션 추가하기를 누르고 앱 이름과 사업자 등록명 등을 자유롭게 입력한다. 4.플랫폼 설정으로 이동하여 자신의 패키지명과 키해시를 등록해준다. 패키지명은 본인 프로젝트의 AndroidManifest.xml 패키지명과 일치시켜줘야한다. 참조 : https://develop-writing.tistory.com/33 5.카카오 로그인을 구현할 방식에 맞춰 필요한 KEY값을 따로 저장한다.(내 경우 REST API KEY) 6.왼쪽 카카오 로그..