전체 글

iframe API - videoID로 연속재생 구현하기 [1편 Index로 된 JSON]

1. 원리 : 현재 FlatList + realtime database + react-native-iframe 을 사용중이다. 따라서 FlatList에서 선택한 항목에 대해 >> realtime database 내에 저장한 유튜브 json데이터에서 videoID를 받아와 >> iframe에 입력해주는 방식을 채택하고 있다. 문제는 이 방법을 이용하면, iframe 자체에선 autoplay를 구동시키더라도(default값임), scr 옵션으로 url을 사용하는 것과 다르게, 다음에 재생할 videoID를 찾지 못해 동작이 멈추게 된다. 즉, 다음에 재생할 que된 videoID를 못찾아 재생할게 없음이란 상태가 된다. 따라서, 다음에 재생될 videoID들을 직접 지정해줘야한다는 뜻이다. 여러가지 방식이 ..

Realtime database에서 지정한 임의의 key값을 얻어 변수 설정 및 CRUD하는 법

1. 목적 (CRUD가 목적이라면, 2번부터 보셔도 무방합니다.) : 알게되는 과정에서 무수한 시도와 시간을 소모했고, 구글링과 StackOverflow에서 찾을 수 없었다. 몇몇 성공 사례는 있었지만, 나같은 초보자가 쉽게 적용하기엔 이해하는 과정부터 어려웠다. 때문에 국내 초보 개발자들이 손쉽게 이해하고 적용 할 수 있는 가이드를 마련하고자 따로 작성하고자 한다. 아래의 파란색 like는 필자가 사용한 최상위 key값이다. 검은색은 필자가 expo-constants로 추가 경로를 만들어 사용하기에 생성된 것이므로, 일반 사용자는 없을 것이니 무시. 빨간색이 얻고자 하는 key값이다. ------------------------------------------------------------------..

Playlist 구현하기 (2편 : 찜 목록)

@ 찜목록 = Likepage = Playlist 등으로 표현 @ 찜 하기를 통해 저장된 data를 가시화 하기 위한 화면(=scr) 렌더링 @ 찜 해제로 데이터 삭제 기능을 넣을 곳 1. 사용조건 ㄱ. 1편의 찜 기능을 구현했다면 별도로 더 없음 ( 찜 하기 링크 : https://radpro.tistory.com/71 ) ㄴ. 3편의 찜 해제 기능을 넣을 화면을 미리 구성하는 것 ( 찜 해제 링크 : https://radpro.tistory.com/72 ) ㄷ. firebase를 연동해두자 ( 이는 ㄱ의 링크에 있는 firebse연동 링크를 참고하자) ㄹ. 만약 데이터가 정상적으로 읽히지 않는다면, 아래와 같이 realtime database의 규칙탭을 확인해보자 read가 true가 되어야 읽힌다...

Playlist 구현하기 (3편 : 찜 해제)

@ 찜해제 = UnLike = UnFavorite 등으로 표현하기도 함 @ 플레이리스트 = 찜 목록에서 삭제기능을 만들기 위해 사용함 1. 사용조건 ㄱ. 1편의 찜 기능을 구현했다면 별도로 더 없음 ( 찜 하기 링크 : https://radpro.tistory.com/71 ) ㄴ. 2편의 찜 목록(=Playlist)에 이어서 작성할 것임 ( 찜 목록 링크 : ) 2. 사용원리 ㄱ.설명 (생략가능) : 이름은 UnLike로 했다. 가장 까다로운 부분중 하나다. realtime database는 user_id 아래로 임의의 키값을 지정하고, 그 안에 데이터를 push한다. 이는 타임스탬프 등의 기능을 하는 임의의 코드를 만들기 위함이다. 문제는 해당 키값에 대응하여 선언할 변수를 제공하지 않는다. 미칠노릇이..

Playlist 구현하기 (1편 : 찜 기능)

@ 찜 = Like =Favorite 등으로 표현하기도 함 @ 플레이리스트 = 찜 목록 등을 만들기 위해 사용함 1. 사용조건 ㄱ. firebase의 realtime database를 연동한 상태 ( 연동 참고링크 : https://radpro.tistory.com/51 ) ㄴ. FlatList 사용중인 상태 ( 상단의 참고링크에 같이 되어 있음 ) ㄷ. expo-constants 설치 yarn add expo-constants 후, 찜하기 기능 사용할 페이지(=scr)에 import Constants from 'expo-constants'; ㄹ. 아이콘 설치 (기호에 따라 기본 제공되는 버튼태그를 사용해도 무방함) yarn add @expo/vector-icons 후, 아이콘 사용을 위해 import ..

realtime database 찜하기 구현

1. 사용조건 ㄱ. realtime database에 저장된 json 데이터가 있다. ㄴ. FlatList가 구현되어 있다. ㄷ. 아이콘 확장 import import { AntDesign } from '@expo/vector-icons'; ㄹ. expo-costants 설치 yarn add expo-constants ㅁ. 찜 기능으로 추가한 리스트를 구현하고싶다면, 다음의 플레이리스트 구현 링크 참고 ( 참고링크 : https://radpro.tistory.com/65 ) ----------------------------------------------------------------------------------------------------------------------------------..

VirtualizedList 사용하기 (진행중)

https://runebook.dev/ko/docs/react_native/optimizing-flatlist-configuration

Pull Down Refresh 구현하기

1. 참고링크 : https://thewebdev.info/2022/02/19/how-to-implement-pull-to-refresh-flatlist-with-react-native/ How to implement pull to refresh FlatList with React Native? - The Web Dev Spread the love Related Posts How to fix the React Native FlatList last item not visible issue?Sometimes, we want to fix the React Native FlatList last item not visible issue. In… How to hide the scrollbar in a FlatLis..

[실패일지] 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..

[개정된 링크 참고] Playlist 만들기 (=Likepage)

@@ 너무 장황해져서 사용법을 찜하기, 페이지만들기, 찜해제 3단계로 나누어 정리함. 각 폐이지 링크는 아래와 같으며 1편부터 보는것이 이해가 쉬움 1편_찜하기(create) : https://radpro.tistory.com/71 2편_찜페이지(read and update) : https://radpro.tistory.com/73 3편_찜해제(delete) : https://radpro.tistory.com/72 ----------------------------------------------------------------------------------------------------------------------------- 1. 목적 : 노래듣기 어플에 사용될 플레이리스트를 구현할 생각이다...