React-native/실패일지

[실패일지] 유튜브 API Search 연동하기

1. 그동안은 firebase에 직접 저장해 놓은 데이터에 한해서만 검색이 가능했다. 그러나 이제 유튜브에 직접 검색하여 json데이터를 받아오고자 한다. 시도 1. youtube-api-search dependancy 사용 ( 참고 링크 : https://mesonia.tistory.com/125 ) yarn add youtube-api-search 후 import YTSearch from 'youtube-api-search'; 하여 사용 export default function Test() { const [state, setState] = useState(); const [keywords, setKeywords] = useState(); ... const params = { key: "Yout_AP..

[실패일지] favorite(좋아요) 구현하기

1. 목적 : Likepage나 Playlist를 만들기 위해 구현하고자 한다. 2. 실험 시도 1. 실패 : 한 번 클릭하면 모든 좋아요버튼이 실행된다. 원인 : Flatlist 내 좋아요(Like=favorite) 버튼은 구현했으나, 단순 반복되버림. 때문에, 렌더링 된 것이라 각 카드(View)별로 구분이 없어 모든 return값에 실행되버리는 것. return ( ... ( ... {favorite ? UnLike()}> : Like()}> ... ) 시도 2. 실패 : 구분값으로 index값을 넣어 map함수로 반복함수를 돌렸으나, 한 카드 안에 무한 하트 구현... {state.map((item, idx) => { if (setFavorite(false)) { return ( Like({ it..

[실패일지] iframe에서 연속재생 반복재생 구현하기

1. 목표 : iframe에서 반복재생(Loop)기능과 연속재생(Autoplay)기능을 구현하고자한다. 2. 실험시작 시도 1 : 공식문서에서 제공하는 iframe의 props인 loop와 autoplay를 사용해봤으나, 안된다. 나만 그런게 아니고 모두가 안된다. 공식문서상의 방법은 다음과 같다. 먼저 loop의 경우,initialPlayerParams안에 속해앴는 props로 default값은 false로 되어있으니, true로 할당하라한다. autoplay의 경우 0이 연속재생true, 1이 연속재생false 값이라고 한다. initialPlayerParams를 제외하고 loop를 할당해보기도 하고, boolen으로 할당되어있던 타입스크립트도 교정하여 0으로 할당해보기도 했다. autoplay도 밖..

[실패일지] realtime database에 여러 파일 올려 관리하기

1. 목적 : 한 개의 프로젝트 내 여러 페이지에 나타낼 json데이터를 따로 관리하고 싶었다. 2. 실험시작 시도 1. firebase의 한 프로젝트 안에 앱 추가하기 결과 : SDK 중복으로 오류 시도 2. firebase에 여러 프로젝트를 만들어 따로관리하기 결과 : firebaseConfig.js를 한 프로젝트 안에 여러개 import할 수 없다. 이름을 바꿔도 안된다. 시도 3. 기존에 업로드 한 json데이터를 수정하기 (최상위 키값을 여러개로 설정하기) 결과 : 가능하다. 각각의 스크린을 구성하는 js파일에 items라고 설정해 놓았던 기존의 최상위 키값을 import하고싶은 키값으로 변경해기만 하면 된다. 단, 이 경우 한 개의 JSON파일 안에서 모든 데이터를 관리하므로 용량도 커지고, ..

[실패일지] Search bar 연동 중 쿼리문제

1. 목표 : Flatlist에 Searchbar를 구현했다. 여기에 내가 지정한 database에서 쿼리가 정상 작동해야 한다. 또한, 현재 searchBar에 입력하면, 문자 하나 받을 때마다 키보드가 자꾸 내려간다. 이 또한 같이 고친다. 2. 현재 코드 : 컴포넌트화 안해놨더니 짱짱 길다. import React, { useState, useEffect, useCallback } from 'react'; import { ActivityIndicator, FlatList, View, Text, Image, StyleSheet, TouchableOpacity, Button, Alert, TextInput } from 'react-native'; import { firebase_db } from '....