시작하며

  • 트위터 서버를 먼저 구축하며 클론코딩을 시작해보자 !! 💪
  • 책의 자세한 코드나 설명 등은 저작권 문제가 발생할 수 있어 모든 부분을 상세히 올리지는 못하겠지만 기록할 수 있는 부분은 기록하고자 한다 ! 🙏

서버란?

  • 데이터 송출, 검색, 업로드, 다운로드, 수정, 삭제 같은 기능을 수행함.
  • 트위터라는 서비스를 만들기 위해서는 꼭 필요한 기능이므로 파이어베이스를 활용하여 트위터 서버를 구축해 보려고 한다!

파이어베이스 Firebase를 사용하는 이유?

  • 가장 큰 이유는 무료이다. 많은 양의 데이터를 사용하려면 유료 요금을 지불해야 하지만, 테스트 용도로 사용할 정도라면 무료인 범위 내에서라도 문제가 없다.
  • 이용이 편리하다! 구글 계정만 있다면 쉽고 빠르게 사용할 수 있다.

사전작업

  • node.js 설치
  • npx 설치
  • react 설치

firebase 설정

  • 파이어베이스 사이트에서 프로젝트를 Vwitter2.0이라는 이름으로 생성해주었다.
  • 이후 firebaseConfig 값을 firebase.js 값에 복사하여 firebase와 react 앱을 연동해 주었다.

    1


  • react앱과 firebaseApp이 연동되었음을 확인한 페이지. console.log 함수로 App.js 내의 “<div>App</div>” 이라고 입력한 부분을 출력해 보았다.
  • 이후 비밀키(firebaseConfig 값) 숨기기 작업까지 완료하였다. .env 파일에 key 값을 따로 빼주고 gitignore 파일에 .env를 추가하였다.

마무리하며/느낀점

  • 버전이 바뀌다 보니, firebase 연동에서 문제가 많았다. 실제로 예전에 클론코딩을 했을 때에도 저자 집필 당시 firebase 버전과 출판 이후 firebase 버전이 달라 firebase 연동에 한참 애를 먹었었던 기억이 있다. 하지만, 공식 docs와 오류 log를 참고하여 차근차근 오류를 수정하다 보니 생각보다는 빠르게 디버깅할 수 있었다.
  • 예전에 일주일씩 같은 오류를 붙잡고 있었던 걸 떠올리면 많은 발전이 이루어진 것이라고 생각한다!! 😆
  • 다만 node.js에 대한 지식이 부족하다고 느껴 이 부분을 따로 공부하여 보완해 볼 생각이다. 나중에 넣고자 하는 기능을 추가하기 위해서도 심층적인 자바스크립트 공부는 필수적인 부분이라고 생각한다.

댓글남기기

참고