Firebase | Google's Mobile and Web App Development Platform
개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.
firebase.google.com
구글 파이어베이스 써보기!
정적 홈페이지를 간단하게 호스팅 해 볼 수 있다고 해서
일단 써보기로 결정했다!
개인 홈페이지로 만들어도 되고
차후 홈페이지 개발에도 도움이 될 것 같다.
안드로이드, 아이폰 앱까지도
파이어베이스에서 가능하다고 하니
이런건 일단 찍먹은 해보는게
개발하는데 도움이 되지 않을까!? ㅎㅎ
구글에 firebase 라고 검색해서 접속한다.
시작하기 버튼을 눌러
구글 계정으로 로그인 한다.
Firebase 프로젝트 시작하기를 누른다.
프로젝트 이름을 정한 후 계속 버튼을 누른다.
어차피 찍먹할거라면
이름 고민하지 말고
일단 대충 만들어서 시작하자!
난 testFB로 했다.
구글 AI Gemini 사용여부는 일단 설정해 본다!
AI가 도움이 되는 경우가 많다!
계속 버튼을 누른다.
통계 기능이 있다면 무조건 쓰자!
요즈음 통계는 필수다!
내가 통계랑 관련이 없다고 해도
나중에 어떻게 될지 모른다.
쓸 수 있는 기능은 다 써보는게 좋다!
난 이미 계정이 있다.
없는분은 만들어 보자!
계정 생성 후
프로젝트 만들기 클릭!
차분하게 기다려보자!
준비 완료!
이제 무한 삽질의 시작!
첫 화면은 이렇다!
여러 개발 도구들을 사용하다보면
국내는 참 우리 눈과 사용에 맞춰지긴 했으나
대부분 모든 것이 유료이라 아쉬움이 있고
해외는 전 세계를 대상으로 하니
무료 버전이 있어 맘 편히
개인 프로젝트나 테스트를 해볼 수 있어 좋으나
사용하는데 참 불편함이 많다.
그래도 개발자라면 어떻게든 해봐야 되지 않을까!? ㅎㅎ
귀찮긴 하다...
홈페이지를 만들어 볼거니 그에 맞는 앱을 선택해야 한다.
검은 화면쪽에 5가지 아이콘이 있는데
그 중 </> 모양이 홈페이지다.
여기서는 웹이라고 표현한다.
웹을 선택하자.
이름은 어떻게? 간단하게 하고 넘어가자!
호스팅까지 그냥 한번에 진행했다!
앱 등록을 눌러보자!
나에게는 여기서부터 조금 힘들다.
npm은 뭐고 script는 뭐여
잘 모를 땐 AI를 활용하자.
chatgpt에 물어보든 copilot에 물어보든 하면 된다.
일단 npm으로 선택해서 진행해 본다.
지금 이 상태에서! 다음 버튼을 누르는 것이 아니다!
난 개발환경이 윈도우10이다.
윈도우에서 저 npm 명령을 실행시켜야 한다.
테스트할 폴더로 이동해서
쉬프트(shift) 버튼을 누른 채
마우스 오른쪽 버튼을 누른다.
"여기에 PowerShell 창 열기" 를 클릭한다.
파워쉘에 npm 명령을 입력한다.
npm install firebase
만약 npm이 없다면
Node.js 를 설치해야 한다.
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
아! 그리고 폴더명은 영어로 되어 있는 것이 좋다!
개발자가 아니라면 유념하여
꼭 영어로 된 폴더에 설치하자!
음... 뭔가 진행됐다!
이제 다음 버튼을 누른다!
또 설치하라고 한다.
설치하자!
일일히 타자치기 힘들다면
명령어 우측에 있는 노트를 클릭하고
파워쉘에서
Shift + insert 키를 누르면
붙여넣어 진다!
이번 단계는 시간이 걸린다.
문제가 없다면 다음을 누른다!
(모자이크 귀찮아서 이미지 첨부 안함)
나중에 할 수 있다는데
저 명령어 찾는 것도 일이라는걸 안다!
지금 친절히 알려줄 때 일단 해본다!
firebase login 결과
이미 로그인 되어 있단다.
아마 firebase에 로그인 시도를 하는 것 같다.
뭐지?
질문과 선택을 요구한다.
이런 부분이 해외 플랫폼의 어려움(?) 이라고 할 수 있다.
선택 하나 잘못하면 처음부터 다시 해야 하는...
그런 경험을 많이 해봤기에...
신중하게 구글링을 해본다!
난 홈페이지 만들거라
Hosting만 선택했다.
내가 좀 안다 싶은 사람은
필요한 기능들을 모두 선택하면 된다.
선택은 스페이스바로 한다.
영어를 겁먹지 말고 차분히 읽어보거나
번역기를 돌려서라도 꼭! 내용을 숙지하자!
안그럼 괜한 삽질로 시간만 버릴뿐이다!
아까 Firebase 사이트에서 만든 프로젝트를 말하는 것 같아
만들어져 있는거 쓴다고 선택했다.
만든것 선택!
그 외 나머지는 기본 설정대로 했다.
질문할 때 (Y/n), (y/N) 이라는 표시를 봤을텐데
대문자로 되어 있는 것이 기본 설정을 뜻한다.
개발하다보면 많이 보게 된다 ㅎㅎ
이런 경우 그냥 엔터 누르면 대문자로 된 것으로 설정된다.
firebase deploy 결과
오! 뭔가 설정됐다!
Hosting URL이 내 사이트 URL 이다.
오타가 난건지 주소가 잘못되어 있었다.
firebase 사이트로 가보자.
여기 진행중이였다!
정신 바짝 차리자!
헷갈리면 망한다!
firebase deploy 명령어 밑에 보면
이미 URL이 써 있었다.
나는 testfb-dd531.web.app 이다.
접속해보면 이런 화면이 나온다.
자.. 이제.. 다음을 해보려면 일단 사이트에서
콘솔로 이동을 눌러보자!
흠...
이제 뭐 어떻게 하라는거지? ㅋㅋㅋ
사실 난 웹 개발자가 아니다.
그래서 이런 다양한 환경(?)이 적응이 안된다.
임베디드는 검은 화면과 하얀색 글자만 있음 되는데...
프로그래밍 언어도 하나만 써도 되는데...
웹 개발자님들 존경합니다! ㅎㅎ
여튼 여기까지는 기본 설정인 것 같고
그 다음은 AI에 물어보고 구글링해봐야 할 것 같다!