Nomad Coder 트위터 클론코딩
프론트 엔드 기반으로 만 생각하고 있었는데 면접 당시 aws등 클라우드 데이터 서비스에 관해 많이 면접이 나오길래
경험은 한번 해봐야 겠다고 생각하고 노마드코더의 firebase의 기초부분 트위터 클론코딩에 대해 프로젝트를 진행하였다.
🔥 why firebase?
이전 회사에서도 클라우드 데이터 서비스는 aws를 많이 이용하고 요즘 추세가 aws인것 같은데 왜 firebase인가 하니
2년 정도 된 강의 영상이긴 하였지만 firebase가 aws보다 초보자들에게 구축하기 더 쉽다고 니꼬쌤이 알려주었다.
aws 도 지금 보면 더 개발 하기 편할것 같게 변한것 같기도 하다. 이전 회사에서 aws에 대해 간략하게 인프라팀에서 강의를 해줘서
배울수 있었다. 당시 내용이 어렵기도하고 공부를 최근에 안해서 잘 기억이 안나지만 추후에는 aws로 배포 해보도록 할 예정이다.
firebase 첫인상
기존 회사를 다닐때도 블록체인으로 web3 개발을 진행한 적이 있었다. truffle.js 기반으로 Nft 기능을 만들었는데
당시에도 백엔드의 큰 지원 없이 페이지를 구축할수 있었고 추후에는 백엔드가 필요 없이 클라우드 서비스를 이용하여
프론트 혼자 페이지를 구축할수 있겠다 라는 생각을 가지게 되었다. 하지만 그에 맞는 api 를 공부를 하긴 해야 할터..
추후에는 프론트, 백 구분없이 프론트에서도 클라우드 기능으로 기능을 가져와서 사용하면서 업무를 진행할것 같았는데
실제 firebase 로 프로젝트를 진행하니 다시한번 백엔드 구축이 쉽게 되어서 이게 잘 된 코드인가 어리둥절 하기도 하였다.
리액트 100%에 firebase api 만 이용하여 데이터를 저장하고 가져오고 하니 백엔드 없이 개인프로젝트를 잘 완성할수 있었다.
개인적인 욕심이라면 firebase를 더 공부해서 다양한 기능들에대해서 추가할때 사용해보고 싶다.
회고
일단 2년 전 영상이었기 때문에 라우터도 5 버전, firebase도 8버전 으로 제작이 되어있어서 API가 많이 변화되어 있었고
라우터도 확 바뀌어서 기존 영상 그대로 적용하기에는 어려웠다. 그래도 강의 마다 적용하신 분들이 댓글로 도움을 많이 주어서
쉽게 적용하고 공부도 많이 할수 있었다. 독학보다 단체로 공부하는게 훨씬 낫기도 한것같다.
댓글을 보면서 에러를 접한 사람들의 예시와 해결 방안들을 확인하면서 나도 같은 에러가 나왔다면 쉽게 해결할수 있었고
또한 그들의 에러를 확인하면서 나는 에러가 없었지만 추후에 저런 에러가 나면 어쩌지 생각하며 방어코드를 세울수 있었다.
실제로 강의를 보면서 프로젝트를 구현하는 것은 일주일 정도 걸린것 같다. 나도 에러를 만났는데 댓글에도 없었던 에러를 직면하여서
에러 해결에 큰 시간을 쏟았다. (물론 나도 댓글에 에러 해결방안을 적어두었다 뿌듯.)
깃허브 커밋 잔디 누락 이슈도 있었다 ㅠㅠ
돌려줘요 내잔디
배포
특히 배포 과정에서 큰 에러를 만났는데 배포를 진행했는데 흰화면만 나오고 어떠한 반응이 없어서 난감하기도 하였다. 다른사람들의 해결방법을 보고
수정하기도 하고 직접 검색 해서 문제를 해결하고자했는데 다들 해답이 엉뚱하기도 하고 여러번 다른 사람들이 해결했던 방안들을 반복해서 진행했다.
결국 배포했던 사이트를 지우고 다시 배포하고 지우고 배포하고를 반복 10번 정도 넘게 하니 페이지가 배포가 잘되었다..
무슨 문제인지 모르겠다.
배포에 관해서도 직접 코드를 입력하며 내 api 접근 키 값등 고유 키값, 즉 알려지면 안되는 코드 들에 대해서 방어에 대해서 방법을 배울수 있었다.
간단하게 환경변수를 사용하기도 하였고 api사용자 인증 센터에서 주소값들을 방어해주고 firebase에서 방어 코드를 작성하면서 방어할수 있다는 것을 깨달을수 있었다.
면접을 볼때도 배포해본 경험이 있는가 했을때 이전에 혼자서 진행했던 벽돌 깨기 게임에 배포를 진행했었다고 말했는데 최근 배포 경험도 다시 생기게 되었다. aws 프로젝트도 진행하면 배포 경험에 대해 잘 말할수 있을것 같다!
🛠 기능 구현
🔑 로그인 기능
로그인을 할때 데이터 베이스에 각 로그인 정보들을 저장해놓고 가입할때 인증 정보가 있으면 에러 코드를 받아오게 했다. 그리고 다양한 에러코드들을 받아올수 있도록 지정했다. 비번 정할때 특수문자를 넣고 등등 까다로운 것은 프론트단에서 할수 있는데 백엔드에서도 할수 있는지 의문이다.
추후에 개선할때 특수문자도 포함해서 비번을 설정하도록 개선할것이다.
또한 OAuth를 활용하여 구글, 깃허브 로그인 까지 구현할수 있었다.
-
기본 아이디 로그인
-
구글 로그인 (물론 깃허브 로그인도 가능하다)
🗑 트윗 삭제 기능
왼쪽 오른쪽 다른 계정이다. 다른 계정일 경우 트윗도 즉시 올리면 즉시 반영되도록 제작하였으며
글쓴이 본인만 삭제, 수정이 가능하다
- 추후 게시 시간 및 글쓴이 정보까지 추가해야겠다.
📤 이미지 업로드 (트윗)
트윗을 게시할수 있다. 뿐만 아니라 이미지 업로드 까지 가능하다
✏️ 닉네임 변경
프로필 관리창에서 닉네임 변경이 가능하다.
- 추후에는 프로필 이미지까지 변경하도록 구축할 예정이다.
📚 정리
강의를 보며 간단하게 기능 구현및 사이트 배포까지 완료할수 있었다. 추가적인 기능들을 추가하는것이 또한 큰 공부가 될것 같다.
타입스크립트적용 및 전역변수관리 등 눈에 보이는 간단한 업데이트를 추후에 할 예정이다.
업데이트를 하고 다시 회고록 작성을 할 것이다.
아래는 배포된 사이트와 깃허브 주소이다. 깃허브에도 기술에 대한 정리를 해놨다.
