오늘 배운 내용
1. Clone Coding: Nwitter
udemy 강의에서 마지막 단락으로 진행하는 'clone coding' 프로젝트를 React로 리팩토링하는 과정을 진행하고 있었다. 그러던 도중에 실제 React 프로젝트의 디렉트리 구조는 어떻게 짜는지 궁금해졌다. 특히 react-router-dom을 사용할 때 어떻게 페이지를 구성하는 지 감이 잘 잡히지 않았다. 때마침 React와 Firebase를 사용하는 트위터 클론코딩 프로젝트(노마드 코더)가 있어서 수강하였다.
2. Firebase
Firebase는 종종 개발 관련하여 인터넷 서칭을 할 때 마주치는 단어였다. 말만 많이 들었지 솔직히 기술인지 조차도 모르고 있었다. 이번에 클론 코딩을 하면서 Firebase가 원래는 데이터베이스로 시작했다는 사실을 알았다. 이후 구글에 인수되어 데이터베이스, 저장 공간, 인증 등의 백엔드 기능을 갖춘 플랫폼이라는 사실을 알게 되었다. 아마존의 Amplify가 이와 같은 필드에 있으며 서로 장단점이 있다고 한다. 예를 들면 Amplify는 GraphQL을 지원하는 식이다.
백엔드를 잘 알지 못하지만Firebase는 확실히 여러가지 편의를 제공하는 것 같다. 데이터베이스를 구축하고, 해쉬 함수를 통해 사용자 정보를 일일이 저장할 필요도 없다. 몇가지 함수를 호출하면 바로 사용자 인증이 가능하다. 이메일 인증만이 아니라, 구글, 애플, 깃허브 등등 여러 사이트의 사용자 정보를 통한 인증도 가능하다. 그외에도 사진 등의 소스를 저장할 저장공간이나 데이터의 실시간 업데이트도 가능하다. 이걸 직접 구현하려면 어떻게 해야할까도 궁금하다.
TypeScript의 필요성
Firebase라는 거대한 웹 백엔드는 여러 개발환경(IOS, Android, Web 등)에 맞춘 API를 제공한다. 이걸 일종의 프레임워크라고 생각할 수도 있지 않을까. 종종 이렇게 거대한 기술에 수반되는 API를 마주하면 하나의 언어를 새로 배우는 기분이다. 자바스크립트를 사용해서 개발을 진행한다고 해도, 사실 언어로서 사용할 뿐이지 사용 방법은 전혀 다른 것 같다. 알파벳을 사용하다고 해도 영국과 프랑스가 다른 문법 체계와 뉘앙스, 단어의 뜻에서 차이가 발생하는 것과 비슷하달까.
여튼 이런 거대한 문서를 읽을 때 Typescript가 도움이 되는 것 같다. 개인적으로는 어떤 method의 parameter에 어떤 값이 들어가고, 어떤 값이 반환되는지를 타입스크립트를 통하면 보다 쉽게 알 수 있는 것 같다. 이래서 Typescript가 여럿이 함께하는 프로젝트에서 유지성에 도움이 준다더니 사실인 듯 하다.
version 8 vs version9
이번 Firebase프로젝트에서 사용해본 기능은 일단 Auth, Firestore,Storage이다. 강의에서 사용하는 Firebase의 버전은 8이었는데, 그 사이에 9버전으로 업데이트 되면서 사용법에 변화가 생겼다. 버전 8에서는 namespace방식을 사용하고 9에서는 module방식을 사용한 모양인데, namespace가 무엇인지 잘 모르니까 나중에 찾아보기로 한다.
개인적인 이해를 바탕으로 버전 8과 9의 사용법의 차이에서 궁금한 점이 있다. 8에서는 중앙에서 관리를 하는 식이었다면 9에서는 그때그때 module로 불러와 사용하는 방식이라고 생각된다. 그런데 이렇게 그때그때 호출하면 효율성이 과연 좋을까하는 생각이 든다. 이건 firebase만의 문제라기 보다는 내가 import와 export의 작동 원리에 대해 깊은 이해가 없어서 그런 것 같다.
한편 auth함수를 그때그때 호출한다면, 사용자의 정보가 계속 만들어지는 건 아닐까 하는 생각도 든다. 어떤 사용자의 정보 확인을 어떤 식으로 firebase에서 하고 있는 것인지 잘 모르겠다.
Auth, Firestore, Storage
사용할 때 애를 먹은 점은 이러한 기능들을 사용하기 위해서는 특정 구조를 따라서 사용해야 한다는 사실이었다. 이 API들에서 자주 등장하는 개념은 snapshot, query, doc, collection 등이었다. firebase의 자료형은 서로서로 연관되어 있어서 어떤 특정 함수를 호출하고, 다시 특정 자료형을 반환시켜 연관된 형태로 작동했다.
이해되지 않는 개념들
firebase vs @firebase
@(at sign) in npm
namespace(이름공간)
snapshot(스냅샷)
