본문 바로가기

Firebase9

클론 개발 후기.. 기본에 치중하고 싶어서 타입스크립트 만으로 카카오톡 클론을 만들어봤다. 프레임워크가 없어서 쉽지는 않았지만 node.js도 있고해서 그렇게 힘들지는 않았다. 하지만 만들고 보니 기능만 구현하는데 치중했지 코드 자체는 눈을 뜨고 보기 어려울 정도로 지저분하다는 느낌이 들었다. 일단 링크는 아래다. https://ihan12389.github.io/typeTalk Document ihan12389.github.io 문제점은 여러가지 많다. 타입스크립트의 특성은 전혀 살리지 않았다. 리덕스를 사용하지 않아 데이터의 공유가 원활하지 않다. CSS가 반응형이 아니다. 코드의 변수명이나 함수명이 직관적이지 않다. 모듈화가 잘 안이루어져 있다. 내가 느낀 문제점들은 위와 같다. 기능을 구현시킨다고 다가 아니라는 걸 .. 2021. 9. 10.
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.