본문 바로가기

Expo11

EXPO INSTAGRAM CLONE 만들기 (4) 서론 이번 인스타그램 클론 만들기 유튜브 강의를 모두 수료했다. 3일 걸렸구나... 그런데 기능은 구현했는데 UI는 전혀 만지지 않는다. 완성된 결과물의 디자인은 내가 스스로 만져야한다. 그리고 결과물이 인스타의 완전한 기능을 구현하는 것도 아니다. 정말 핵심적인 기능 3, 4가지만을 구현했지 그 외의 부수적인 기능은 엉성하거나 생략되었다. 하지만 그럼에도 불구하고 이건 정말 좋은 강의다. 디자인이야 내 마음대로 하면 되는 거고 자잘한 기능들이야 손쉽게 추가 가능하다. 내가 제일 맘에 든건 파이어베이스의 데이터베이스를 활용하는 방식이다. 이 강의를 보고 나서 나는 전 프로젝트의 데이터베이스 사용법이 너무 난잡했다는 걸 알았다. 강의를 보고나서 느낀점이 참 많다. 심지어 함수의 모듈화도 상당히 우수하다. .. 2021. 8. 6.
EXPO INSTAGRAM CLONE 만들기 (3) 서론 연속으로 업로드하는 인스타그램 클론 만들기 게시물! 아침에 배운 내용에 이어 낮에 배운 내용을 추가하도록 한다. 유저 검색하기 user를 검색하는 방법에 대해서 알아보자. 먼저 user의 정보는 두 군데에 저장되고 있다는 사실을 이해하자. 1. database 2. store database는 내가 앱을 꺼도 유지되는 정보들이지만, store는 내가 앱을 끄면 삭제되는 정보들이다. 그렇다면 우리는 당연히 로그인할 때 데이터베이스에서 user 정보를 얻어올 것이다. 그런 처리를 하는 action 함수가 fetchUser다. export function fetchUser() { return (disaptch) => { firebase .firestore() .collection("users") .doc.. 2021. 8. 4.
EXPO INSTAGRAM CLONE 만들기 (2) 서론 인스타그램 클론 만들기 두번째 시간이다. 오늘은 사진을 업로드하는 방법에 대해서 알아봤다. 이건 저번 프로젝트에서도 다뤘던 내용이다. 하지만 지금 보고 있는 유튜버가 사용한 방법이 훨씬 세련되고 간편하다. 특히 충격이었던 부분은 BLOB 생성 부분이다. 나는 엄청 고생하며 생성한 BLOB 타입 데이터를 여기에서는 엄청 간단하게 만든다... 부조리함 마저 느껴질 정도였다. 아무튼 오늘은 새롭게 배우는 내용이라면 저번에는 다루지 않았던 카메라 접근 정도가 되겠다. 그럼 시작해보자. 접근 권한 요청 저번에도 똑같았지만 EXPO에서 사진을 찍거나 선택하는 작업은 Image Picker로 진행한다. npm install expo-camera npm install expo-image-picker 우선 작업에 .. 2021. 8. 4.
EXPO INSTAGRAM CLONE 만들기 (1) 서론 이번 프로젝트는 간단하게 인스타그램 클론을 만들어볼 생각이다. 코드에 대한 소스는 유튜브에서 찾았다. 인스타그램 클론에 대해 한국어로 써있는 포스트도 있었지만 아무래도 3년 전 자료다보니 좀 더 최신의 내용을 참조하고 싶었다. 그래서 영어지만 유튜브의 강의를 찾아서 한번 똑같이 따라해보기로 했다. 기술 스택은 내 전 프로젝트와 완전히 동일하다. FIREBASE EXPO REDUX 그러다보니 아무래도 내 전 프로젝트와 겹치는 부분이 많았다. 그래서 여기에는 클론 강의를 따라하면서 새롭게 알게된 사실만 적으려고 한다. 내 블로그의 모든 포스팅은 이런 지식과 개념도 있다는 걸 잊지 않기 위해 나를 위한 참조용으로 만든 것이다. 혹시라도 이 글을 클릭한 사람들에겐 불친절한 글의 내용에 대해 사과하고 싶다... 2021. 8. 3.