[firebase] firebase 시작하기(2)

저번 글에 이어 이번 글에서는 프로젝트 생성 및 실행에 대해 진행하려 한다.

 

 

로그인이 끝나면 프로젝트를 생성해 줘야 하는데 해당 프로젝트 폴더에서 명령 창에 firebase init이라는 명령어를 실행한다. 그럼 질문이 나오는데 하나씩 같이 진행해 보자

 

 

첫 번째 질문을 선택하면 다음 질문으로 firebase에서 사용할 기능들을 선택하는데 각자 본인들이 사용할 기능을 선택하고 다음으로 넘어간다

 

 

우리는 이미 저번 글에서 프로젝트를 생성해 놓았기 때문에 맨 첫번째 Use an existing project를 선택해 우리가 만든 프로젝트를 만들 것이다.

 

 

 

 

여기까지는 그냥 엔터로 넘겨 주자.

 

이 질문은 싱글 페이지 앱으로 할 거냐는 질문인데 우리는 frontend 프레임워크를 사용하지 않고 단순 html로 작업할 것이기 때문에 no를 입력한다.

 

 

깃허브도 사용하지 않기 때문에 여기도 no를 입력

 

 

 

 

 

엔터를 치고 넘어가면 위처럼 프로젝트 생성이 완료되고 프로젝트 폴더에 파일들이 생성된 모습을 볼 수 있다.

public 폴더 안에 보면 index.html 파일이 있을 텐데 기본적으로 생성되어 있는 파일을 사용하지 않고 firebase 버전을 8.x로 사용할 것이기 때문에 새로운 index.html 파일을 만들어 준다.

 

그다음 firebase console로 넘어와서 프로젝트 설정을 해줘야 한다.

 

 

 

 

프로젝트 설정을 누르면 위에처럼 ios, android, web을 선택할 수 있는데 각자 프로젝트에 맞게 선택하면 된다.

나 같은 경우 웹페이지를 만들 것이기 때문에 웹을 선택했다.

 

 

원하는 닉네임을 입력 후 앱 등록 버튼을 누르면 본인 프로젝트의 설정 명령어들이 나오는데 그것을 복사해서 아래와 같이 붙여 주면 된다.

 

 

새로 만든 index.html 파일 body 태그 안에 위와 같이 넣어 준다. 기본적으로 생성된 index.html 파일에는 아마 firebase 9.x 버전으로 만들어져 있을 텐데 나 같은 경우 8.x 버전으로 사용하기 위해 새로 생성해서 위와 같은 코드들을 넣어 주었다. 사용하고자 하는 기술들의 스크립트를 가져오면 된다. 참고로 firebase 9.x 버전과 8.x 버전의 사용법이 다르기 때문에 정보가 더 많은 8.x 버전을 사용 했다.

 

그다음 index.html 파일 body 태그 안 script 위에 Hello FireBase라고 입력한 후 콘솔 창에 Firebase serve라는 명령어를 실행시킨다.

 

 

그럼 로컬에 서버가 실행되고 브라우저를 띄워 확인해 보면 우리가 입력한 Hello FireBase라는 문구가 잘 찍히는 것을 확인할 수 있다.

 

 

이걸로 firebase 시작은 끝이 났고 이제 원하는 기능들을 이용해 웹페이지를 만들면 된다

다음 글부터는 firebase의 기능들을 하나씩 알아보도록 하겠다.

 

[firebase] firebase 시작하기(1)

[firebase] firebase 시작하기(1)