React +Firebase로 Twitter clone 만들기

프로젝트 설명

- 트위터 클론코딩입니다

- 구글 및 이메일(인증필요x) 로그인 후 이름 설정 후 실시간 트윗가능(자동로그인)

- 본인 작성 트윗은 수정 및 삭제가능

- 프로필에서 이름변경 및 자신의 트윗 모두 보기

완성본

로그인화면

메인화면

프로필화면(자신의트윗보기)

수정하기

사용한 기술 스택

• React
• Firebase

중점 초점은 무엇이엇는가?

• FIrebase Auth, Firestore실시간연동 사용해보기
• serverless 프로젝트 배포해보기
• 디자인 신경쓰기

이프로젝트를 왜했는가?

웹 공부를 한지가 1년이 넘어가는 시점에서, 수많은 반복을 통해서 실제로 외주업무도 해쳐낼 수 있을만큼 성장했고, 학교 수업시간에 잠시했었던 java를 javascript언어에 대한 이해도만을 의지하여 이번달에 온전한 앱을 만들어 출시했습니다.

스스로에게도 대견하다고 생각했지만, 정작 돌아보니 내가 원하는 서비스가있다면 만들어서 배포까지할 수 있을까? 라는 의심이 많이들었습니다. 이제까지는 공부한다는 핑계로 css도 대충하고, 잔버그도 그대로두고, UX는 어차피 나만해보고 주변지인에게 잠시 소개하는 정도니까 굳이 신경안썼습니다.

 

그런결과 막상 학교에서 팀프로젝트를할때 자신감이 열심히 공부해왔던 것 보다 없었습니다.

또 공부만 계속하는거랑, 실제로 시험을 치뤄본 경험이있는거랑은 큰 차이가있는데, 그것을 간과하고, 완성도는 항상 미룬는 모습이 스스로가 답답하고 화나기도 했습니다.

 

저는 basic 부터 순차적으로 공부하는 방식을 선호하기때문에 이런 결과를 낳았다고 생각합니다.

React를 제대로 공부하기까지도 1년이라는 시간이걸렸습니다. "js도 안되는데 react를?" 이라는 생각으로 말이죠.

 

하지만 그렇다고 공부를 다음단계로 넘어가지 않기엔 지루하기도하고, 개발공부는 단순공부,이해가아니라 경험이라는 영역도 크게 차지한다는 점을 깨닫고서는 큰 흐름을 읽어보기로했습니다.

 

 그제서야 왜 js의 기초가 중요한지 뼈져리게 느끼고 어떻게공부해야할지, 어떤이 부족한지를 잘 알게된것같습니다.

처음 react와 firebase를 접한건 약 8개월정도 전이었던것 같습니다.

그때는 도무지 이해를 못하던것도 이제는 차츰 이해가되고, 공식문서를 보고 나에게 맞게끔 사용할 수도 있게되었습니다.(글이나 영상강의자료들이 옛날인게 많다보면, firebase의경우 module방식으로 문서도수정하고, 라이브러리를 수정했기때문에 최신자료는 잘없었기때문에)

 

그리고 클론코딩에대한 인식이 좋은지 좋지않은지는 잘 모르겠으나, 개인적으로 단순히 클론코딩만 했다고하면 좋게생각하진 않을것같았고, 무작정 따라하는 경우가 많다고 생각했습니다.

그래서 저도 클론코딩이라는 것을 최대한 지양하고 실험적인 결과물을 많이 만들었었습니다.

그런데 또한번 의구심이 들었습니다. "말은 클론코딩이 별로다, 단순따라하기다"라고하지만, 그럼 나는 어떤 강의자료를 따라하는것이아니라 온전히 나의힘으로 똑같이 클론해낼수있나?"라고하면 자신이없었습니다.

 

그렇기 때문에 이런 기본적인 클론코딩부터 시작해보고 저의 아이디어를 차츰 실현해나가고자 다짐했습니다.

저는 절때 제가 이해하지 못하는 코드를 작성하지않고, 더 좋은 알고리즘이있더라도 제가 이해하지 못한 코드는 사용하지않습니다.

 

그런의미에서 내가하는 클론코딩은 온전히 나의 힘으로낸 결과물이다! 라고 자신있게 말할 수 있습니다.

 

느낀 것들

Firebase Authentication

로그인state를 감지하는 함수

firebase의 Authentication의 가장큰 장점으로 꼽고싶습니다.

최초에 한번만 실행하면 앱내에서 login상태를 항상 감지할수있습니다.

login, logout 함수를 어디에서사용하든 동작했습니다.

(아마 redux와 같이 상태관리를 한곳에서 하도록하면 똑같이 구현할수있을것 같습니다)

 

onSnapshot

소켓없이 실시간으로 디비를 감지할수있다는게 너무 매력적이었습니다.

실시간 디비는 따로 realtime database를 지원하고있지만 굳이 모든것을 socket으로 해결할 필요가없듯이

DB도 실시간으로 변경사항을 받아오고싶지만, 굳이 socket을 쓸만큼은 아닐때가 종종있다고 생각합니다.

그럴때 유용한것 같습니다. 이 함수로 인해서 작성해야할 코드가 줄어들었습니다.

 

자신의 프로필을 수정한다고 생각하면, snapshot을 useEffect를 걸어놓으면 수정하는것만 보내면 거기서 끝인데, 그렇지않다면 수정하고 다시불로오는 로직까지 작성해야되기 때문입니다.

js보다 html,css가 어렵다

리액트에서는 styling하는 방법이 여러가지입니다 . sass를사용하든, styled-component, 내장옵션, tailwind 등등..

아직은 sass로 한파일로 styling하는 방법이 빨라서 선호하는 편입니다. 큰틀을 잡아두고, 약간씩 다르게 적용해야할 style은 jsx의 inline 방식으로 해결하고있습니다.

 

하지만 이번에 적용하던부분이 트윗에서 수정버튼을 누르면 UI를 유지하면서 input 태그를 보여주는것이었는데, div였던것들이 form, input으로 바꾸니 style이 모두깨져서 한번더 섬세하게 css작업을 했습니다. 아주 최악의 반복경우를 경험했습니다.

이부분도 아직은 경험이 부족하다고 생각합니다. 다른살람의 코드를 많이보고 적절한 방법을 익히는 것이 중요할 것같습니다.

 

시간format은 moment.js가 짱이다

사용할때마다 너무편해서감탄하는 momentJS.. 시간 포맷은 크게 어려운 작업이아니다 보니 단순노동처럼 느껴졌습니다.

그런 저에게 MomentJS는 오아시스같습니다. 잘 가져다쓰는 것도 능력이라고....(반성하겠습니다)

 

업데이트된 react-router-dom v6

리액트 라우터가 V6로 정식 릴리즈되면서 조금 바뀌었습니다.

v5는 익숙해졌는데, 지금 router에 정신팔릴 때가 아닌것같다는 생각에 .. 잠시 미뤄두고 익숙한 v5를 사용했습니다.

사실조금 다루어보았는데, 원하는데로 실험을 이것저것해봤습니다. nesting하는 방식이 생각한대로 잘 안흘러가서 잠시 접어두었습니다.

(지금 routing에 시간투자를 하고싶지 않아서)

 

모듈화

보통 DB와 통신하는 firebase를 초기화하고, 데이터베이스든,인증이든 사용하기위해서 Import 해야할 항목이 여러개가있다. 이런것들은 firebaseInstance.js 파일에 몰아넣고자 했었는데 config부분만 별개로 묶어두고, 컴포넌트가 얼마없어서 그냥 하드하게 다 불러와서 사용했습니다.

 

지금은 작업이 다끝나고라서 이렇게 Firebase에서 각 서비스를 이용하기 위해서 Import할 것이 많다것을 알지만, 작업하는중에는 firestore는 firestore만가져오면될거같았고, auth는 auth만 불러오면될줄알았는데 아니었습니다.

 

처음에 코드를 전자처럼 짜다보니 다시수정하기가 좀 그랬고, 다음프로젝트부터는 잘 설계해보자 다짐만 하고 넘어갔습니다.(반성하겠습니다)

 

 

불편했던 것

noSQL의 단점이라 생각하는데, 단순한 쿼리만을 사용하기 때문에, 정렬할때 그냥 값을 가져와서 직접 sort()함수를 사용해서 정렬하였습니다. 사실 안일한 대처방식이긴 합니다. 정렬을 위해서는 모든 트윗을 가져오는것이 기본인데, 에초에 정렬해서 가져와야 pagination을 하든, scroll시 요청을 하든 할수있기 때문입니다.

 

사실 그런 간단한 정렬을 할수도있도록 index기능을 제공하는데, 조금 귀찮은 마음에 이런상황이 온다면 mySQL써야지하면서 우선은 가져와서 따로 저장하는 것으로 해두었습니다.(반성하겠습니다)

 

Github

https://github.com/livemehere/twitter-clone-react

GitHub - livemehere/twitter-clone-react: react 트위터 클론 wirth firebase

배포

https://livemehere.github.io/twitter-clone-react/

Kwitter

 

트윈한번씩 남겨주셔도 좋습니다~~!