전체 글
FlatList + Iframe 연동
1. 설치파일 ㄱ. iframe을 설치해준다. ( 참고링크 : https://radpro.tistory.com/22 ) ㄴ. FlatList를 만들어준다. ( 참고링크 : https://radpro.tistory.com/51 Firebase와 함께 연동한 것) 2. 목적 : 유튜브 영상을 꽁으로 보려는 수작이다. 유튜브 영상은 프리미엄을 쓰지 않는 이상, 유튜브 앱또는 웹을 통해 봐야하는데, 영상이 이러한 플랫폼을 거치면서 광고가 삽입된다. 그러나 이 방식을 사용하면, 유튜브 플레이어(=iframe)를 사용하여, 유튜브 API를 통해 videoId에 직접 접근하는 방식을 사용하기에, 중간 광고가 없다. (단, 직접적인 유튜브 API 쿼리를 아직 연동하지 않은 상태이기에, 개인적으로 데이터베이스를 따로 관..
[실패일지] FlatList에 iframe 적용하기 (성공완료)
1. 목적 : 이번엔 Firebase와 연동해둔 FlatList에서 얻은 동영상 정보를 iframe을 통해 재생할 수 있도록 연동한다. 2. 실험시작 시도 1 : 를 이용해서 onPress props를 통해 실행시킬것이다. 처음엔 간단하게 onPress를 이용해 videoId가 제대로 들어오는지 확인해보자. 다음과 같이 onPress작동시, 실행 될 함수를 선언해주고, TouchableOpacity에 onPress넣고 실행. 결과 : const로 선언한 함수에서 item이란 인자를 못찾는다. ScrollView에서는 map함수로 재깍재깍 찾았으나, 얘는 map함수로 돌아가는 것이 아니라 못찾나 추측중. const onPress = ({ item }) => { return console.log(item.i..
Infinite Flatlist + Firebase 연동하기
## 추가 작업 할 것들 : 1. SearchBar 연동하기 2. return문 안의 내용구성을 Card.js로 컴포넌트화 시키기 ------------------------------------------------------------------------------------ 1. 설치파일 ㄱ. firebaseConfig.js 만들어주기 ( 참고링크 : https://radpro.tistory.com/37 ) ㄴ. firebase에 프로젝트 만들고, realtime database의 개인 API 받아오기 ( 참고링크 : https://radpro.tistory.com/38 ) ㄷ. iframe.js 컴포넌트 만들어주기 ( 참고링크 : https://radpro.tistory.com/22 ) 2. 기..
[실패일지] ScrollView를 Infinite Flatlist로 대체하기
1. 목적 : Scrollview가 구현은 편하지만, 로딩이 너무 길다. 인스타나 쇼핑앱 같은 무한 스크롤을 구현하는 것이 데이터 관리도 쉽다. 무엇보다도 FlatList에대한 이해도가 떨어진다. 처음부터 다 뜯어보며 이해해보자. (ScrollView와 Flatlist을 상황에 따른 사용목적이 다르기 때문) **중간점검 : 애당초 ScrollView + map함수가 한 쌍이다. FlatList는 map함수를 쓰지 않는다. 즉, 기존에 firebase.js에서 map함수로 firebase의 json데이터를 받아, card.js로 렌더링 하던 것을 다 갈아 엎어야 할거같다. Flatlist의 경우, data=[ ] 로 데이터를 받아, renderItem으로 렌더링 해주는 것. 새로만들게 생겼다. 이것도 다 ..
기본 학습
용어 JSX : Javascript에 XML을 추가한 확장한 문법. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 컴포넌트 : 재사용이 가능한 조립 블록으로 화면에 나타나는 UI 요소. UI역할 뿐만 아니라, 부모로 부터 받은 속성Props나 자신의 상태Status에 따라 표현이 달라지고 다양한 기능 수행. Axios : react, react-native 에서 API 로 부터 데이터를 받아올 때 사용. fetch 에는 존재하지 않는 기능이 좀 더 많다. (공식문서 : https://axios-http.com/docs/intro ) (학습링크 : https://kyun2da.de..
[실패일지] 부모컴포넌트에서 자식 컴포넌트로 props 전달하기
진즉부터 쓸걸 그랬다. 처음엔 막히는 부분도 금방금방 해결하니 시원하게 넘어갔지만, 코드가 복잡해지고, 알량한 배경지식이 밑천을 드러내고, 구글링을 해도 답이 나오지 않는 단계에 들어설수록 시행착오가 늘어난다. 시행착오가 늘어날수록, 시도했던 잘못된 방법을 다시 시도하는게 늘어나면서 시간적 손실도 커지고, 기억도 왜곡되면서 효율이 떨어진다. 이제는 실패일지를 작성하면서 왜 실패했는지, 왜 성공한건지 기록을 하려한다. 1퍼센트의 쾌감만 기억하지 말고, 99의 노력을 기억하자...! ------------------------------------------------------------------------------------------------------------------------ 목표 : F..
map함수 돌리는 화면에서 onPress로 경로열기 (Flatlist완성으로 보류)
이번엔 전에 했던 방식인 [ 부모컴포넌트에서 json데이터를 받아 map함수를 돌려 리스트를 작성하고, 리스트에 들어갈 Card.js라는 자식 컴포넌트를 onPress로 반응함으로서 경로는 여는 방식 ]과 다르게 부모컴포넌트에서 onPress 반응을 받아 경로를 여는 방식을 구현했다. (3일을 공쳤다...) 우선 요약하자면, 1. 자식컴포넌트에서 Card전체를 감쌌던 태그를 태그로 대체해주고, 부모컴포넌트의 map함수 안에 있는 return값에 태그를 씌워준다. 2. 그리고 안에 onPress를 넣음으로서 반응형 구현한다. 3. onPress에 반응할 함수를 작성해준다. 장점 : Card.js라는 자식컴포넌트에선 url밖에 못연다. (즉, webView형식밖에 못연다는 얘기) 그러나 이렇게 구동하면, 부..
유튜브 API로 동영상 Playlist Json 검색 방법 (3분 컷)
1. 유튜브 Channel_ID 구합니다. 1) 원하는 유튜브 채널에 들어가, 주소창의 주소를 복사합니다. 2) 유튜브 RSS 생성사이트로 들어갑니다. https://www.ttmkt.com/kr/tools/youtube-rss-generator/ YouTube RSS URL Generator - TrendTalk YouTube RSS URL Generator - TrendTalk www.ttmkt.com 3) 복사한 URL을 넣고 RSS URL을 생성 4) 생성된 URL을 보면 channel_id= 이 있는데 이 뒤의 문자열이 채널ID입니다. 2. 유튜브 API 검색 >> Search >> List 탭으로 들어갑니다. 3. 쭉 내려가서 검색조건을 걸고 검색합니다. 1) part : snippet 2) ..
컴포넌트화 시키기
1. 컴포넌트를 import할 파일에서 할 일 (상위파일) 1) 해당 컴포넌트를 import해준다. 2) return 안에 원하는 위치에 태그를 걸어준다. 3) 만약 해당 컴포넌트에 대입된 변수 부분에 인자를 대입하고 싶다면, 태그 안에 변수이름={변수이름} 형식으로 추가로 작성해준다. 4) map함수를 돌리고 싶을 경우, key={map함수 돌릴 인자}를 넣어준다. 2. 컴포넌트 파일에서 할 일 (하위파일) 1) export default function 컴포넌트이름( {export하고싶은 변수이름} ) 으로 export 해준다. 참고링크 : https://radpro.tistory.com/12 예시코드 : ScrollView로 만든 리스트 + Card컴포넌트 ㄱ. LikePage.js에서 Scroll..
Hook, useState, useEffect 이해하기
요약 Hook 함수형 리액트 (화살표함수 사용) useState const [getter변수, setter변수] = useState(변경할 값 또는 공식) getter변수 : 실행되는 반환값 setter변수 : update되는 값 useEffect 무조건 렌더링 후 한번은 실행. 혹은 지정값 변경시마다 실행. useEffect(()=> {}, []); 또는 const [name, setName] = useState(); useEffect(()=> {}, [name]); Hook Hook의 개념 : 함수형. 요즘쓰는 화살표 함수는 전부 hook이라 보면 됨 리액트 리액드 훅 형태 클래스형 함수형 로직 복잡함 비교적 단순 컴포넌트 재사용 어려움 용이 코드 긺 비교적 짧음 Hook의 사용 기본 사용형식 imp..