(작성 시작일) 05월 06일 (2022년)
(포스트 공개일) 06월 18일 (2022년)
파이어베이스 콘솔에 들어간 후 프로젝트를 생성한다.
좌측 탭의 "Authentication" 들어가서 "시작하기 (Get Started)" 를 클릭한다.
Sign-in method 에서 원하는 기능을 고른다. 예를 들어, 이메일/비밀번호를 사용 설정한다.
좌측 탭의 "Database"에 들어가서 데이터베이스 만들기를 클릭한다.
사진 저장 등의 기능이 필요하면 "Storage" 를 클릭하면 되는데, 이번 프로젝트에서는 하지 않을 예정이다.
추후에 웹에 호스팅할 때 좌측 탭의 "Hosting" 을 클릭해서 프로젝트를 배포할 예정인데, 추후 하기로 하자.
이제, 비쥬얼 스튜디오 (visual studio) 에디터로 프로젝트 폴더를 킨다.
파이어베이스를 설치하지 않았으면, 파이어베이스를 설치한다. 나는 파이어베이스와 Node.js 가 설치되어 있다.
(터미널에 입력) firebase login 을 입력한다.
나는 파이어베이스에 이미 로그인이 되어 있다고 나온다.
(터미널에 입력) firebase init 을 입력한다.
설치하고 싶은 파이어베이스의 특징을 선택한다. 나는 Firestore, Hosting, Storage 를 선택한다 (Storage 안 쓸거라고 했으나 혹시 나중에 쓸까봐 설치해본다). 선택은 엔터키 입력을 하면 된다!
파이어베이스 콘솔에서 만들었던 프로젝트를 사용하기 위해서 "Use an existing project" 를 선택한다. 선택은 엔터키 입력을 하면 된다!
계속 엔터키 치다가 "single-page app" 은 "N"(No) 로 답한다. 리액트처럼 싱글프로젝트 앱을 사용할 것이면 "y" 인데 나는 그럴 목적은 아니다 (참고로 싱글프로젝트 앱을 선택하면 AB 테스팅 시 어려움이 있는 경우가 있을 수 있다고 한다 - 클릭 시 페이지를 넘어가는 형식이 아니어서 그런가 싶기도 하다).
깃헙은 "N"(No) 로 답한다. 깃헙 디플로이를 자동으로 해줄 수 있는 것 같은데, 아직은 visual studio 와 깃헙 연동하는 법을 모르기도 하고 불필요해서 패스한다.
설치 완료 후 visual studio 에 자동으로 아래와 같이 index.html 을 포함한 파일들이 생성된다.
index.html 을 새로 만들어보자. 나는 BootStrap 홈페이지의 "Docs" 탭에 들어가서 "Starter template" 으로 시작한다.
원본 index.html 은 index_original.html 으로 바꾸고, 새로운 index.html 에 index_original.html 에서 <script defer src="..."></script> 파일들을 복사해서 <body> </body> 태크 안에 붙혀준다.
[index_original.html 로 만든 이유는 혹시나 저장해둔 파일이 날아갈까봐 백업으로 만들어둔 파일이다]
나는 firebase/9.7.0/... 버젼인데, 검색결과가 많지는 않고, 검색결과가 많은 버젼은 8 버젼이라고 한다.
추가적으로, 프로젝트 설정이 필요하다. 프로젝트 개요 (Project Overview) 옆의 톱니바퀴 모양을 클릭해서 프로젝트 세팅을 클릭한다.
그러면, 하단에 프로젝트 앱이 없다고 나오는데, </> 버튼을 클릭한다 (웹앱을 만들고 있기 때문이다).
Add Firebase SDK 의 <script> tag 형식을 클릭한다.
<script type="module"> ... </script> 를 body 태크 하단에 복붙한다.
내 프로젝트의 html 파일을 보려면,
(터미널) firebase serve
클릭하면, 주소가 나온다.
'최소 기능 제품 (MVP)' 카테고리의 다른 글
| [프론트엔드 연습 프로젝트] 가입&로그인 기능 (0) | 2022.05.11 |
|---|---|
| [프론트엔드 연습 프로젝트] 파이어베이스에 데이터 저장하기 (0) | 2022.05.09 |
| [프론트엔드 연습 프로젝트] 파이어베이스의 데이터 읽기 (0) | 2022.05.07 |
| [프론트엔드 연습 프로젝트] 해빗 트래커 (Habit Tracker) 제작기 (0) | 2022.05.05 |
| 웹 애플리케이션 직접 만들기 (0) | 2022.05.05 |