[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기

앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성할 예정이다.

 

이번 글에서는 파이어베이스와 리액트를 연동하는 것에 대해 다루겠다.

 

우선 리액트 프로젝트를 만들어 준다.

npx create-react-app test

 

그리고 파이어베이스에 접속하여 로그인 후에 콘솔로 이동하여 "프로젝트 추가"를 누른다.

 

 

 

프로젝트 이름을 입력하고 넘어간다.

 

그 다음으로는 Google 애널리틱스 사용 설정이 나오는데, 나는 그냥 설정에 체크하고 넘어갔다.

 

Google 애널리틱스 사용 설정을 했다면 Google 애널리틱스 구성이 나오는데, Default Account for Firebase를 선택한 후 넘어간다.

 

 

"프로젝트 만들기"를 누르고 프로젝트 생성을 완료한다. 그러면 아래와 같은 창으로 넘어오는데, 우리는 웹사이트를 만드는 것이므로 아래 빨간 박스를 클릭한다.

 

 

앱 등록에 자신의 서비스 이름을 입력한 후 "앱 등록"을 누른다. 호스팅은 배포를 위한 설정인데, 이는 마지막 글에서 다루도록 하겠다. 지금은 체크하지 않고 넘어간다.

 

 

위에 나온대로 firebase를 설치해준다. 그리고 위에 있는 코드를 복사하면 되는데, src 폴더 내에 firebase-config.js 파일을 만든 후에 위 코드를 붙여넣는다. 참고로 저 정보들은 자신만 알고 있어야 하므로, 깃허브에 올리는 등의 공유 활동을 하게 된다면 여기를 참고하여 환경 변수 설정을 하길 바란다.

 

이렇게 하면 React에서 파이어베이스를 사용하기 위한 기본 설정은 끝났다. 이제 다음 글에서 회원가입 및 로그인 기능을 구현해보자.