React-native

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