안녕하세요!
오늘은 Firebase 사용법에 대해 알려드리려고 합니다.
먼저,
파이어베이스(Firebase)란?
파이어베이스는 구글이 개발한
모바일 및 웹 애플리케이션 개발 플랫폼입니다.
개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이
핵심 기능에 집중할 수 있도록 도와줍니다.
즉,
파이어베이스는 웹 서버를 대신 만들어 주는
매우 편리한 서비스라고 생각해주시면 됩니다.
서버 개발 없이도 백엔드를 구현할 수 있어서,
백엔드 코드 한 줄 없이도 프론트지식만 알아도 웹 서비스를 출시 가능하게 해줍니다.
오늘은 파이어베이스 사용법에 대해 자세히 알려드리겠습니다!
먼저 파이어베이스 사이트에 접속해주세요.
https://firebase.google.com/?hl=ko
Firebase | Google's Mobile and Web App Development Platform
개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.
firebase.google.com
위의 Go to console을 눌려주세요.
프로젝트 추가를 클릭해주세요.
저는 이름을 test라고 지정했지만,
프로젝트 이름에 맞게 영어로 설정해주시면 됩니다~!!
구글 애널리틱스 사용을 설정하고 <계속> 버튼을 눌려주세요.
파이어베이스를 디폴트로 한다는 설정을 해주세요.
그리고 <프로젝트 만들기> 버튼을 눌려주세요!
프로젝트를 생성하려면 시간이 1분 남짓 꽤 걸려요.
만들어지고 나면 이런 화면을 볼 수 있습니다.
홈 버튼을 눌려 3번째 있는 코드 모양 심볼을 눌려주세요.
저는 앱 닉네임도 그냥 test로 했습니다.
닉네임을 적어주고 <앱 등록>을 눌려주세요.
등록될 때까지 기다려주면 이런 창이 뜨는데요!
여기서 오른쪽의 <script> 태그 사용을 클릭하여 등록을 마쳐주세요!
등록이 끝나면 왼쪽에 있는 Firevase Database를 클릭해주세요.
클릭하고 나면 이렇게 데이터베이스 만들기 창이 뜨는데요!
저기서 위치를 서울로 바꿔주세요.
저는 프로덕션 모드에서 시작으로 만들었는데
필요에 따라 테스트 모드에서 하실 예정이라면 그렇게 하셔도 좋을듯해요.
여기서부터 헷갈리실 수 있습니다.
일단 먼저 상단의 Cloud Firestore 밑의 <데이터>에서 <규칙>으로 넘어와주세요.
그리고 밑의 코드가 있는데, 저기 빨간 박스로 해놓은 곳은 원래 false라고 적혀있었습니다.
오타나지 않도록 꼭 유의하며 false를 true로 바꿔주세요. (대문자 안되고 소문자로!)
그리고 위에 게시되지 않은 변경사항을 <게시>해주세요.
게시 후에 프로덕트 설정으로 들어가주세요.
그리고 CDN 부분의 코드를 복사해서
html의 head 부분에 그대로 붙여넣어주세요!
이러면 파이어베이스 사용이 끝난답니다 ㅎㅎ
오늘은 이렇게 파이어베이스 사용법에 대해 알아보았는데요!
여러분도 파이어베이스를 사용해서 데이터베이스 만들어보시기 바랍니다 ㅎㅎ
어려운 부분은 댓글 남겨주시면 도와드리겠습니다!
'HTML CSS' 카테고리의 다른 글
| [HTML/CSS] 팀원 소개하기 페이지 | 부트스트랩 카드 이용하기 | 폴라로이드 모양 CSS 코드 (0) | 2024.07.17 |
|---|---|
| [HTML/CSS] 로그인 페이지 코드 분석하기 (0) | 2024.07.01 |