Firebase로 나만의 웹 앱 만들기 (2부)

지난 1부에서는 Firebase의 개념을 알아보았죠.

Firebase로 나만의 웹 앱 만들기 (1부)

Firebase로 나만의 웹 앱 만들기 (1부)

 

이제 직접 코드를 작성하며 실시간으로 동작하는 간단한 방명록 웹 앱을 만들어 보겠습니다. 아래 캔버스에는 바로 실행해 볼 수 있는 전체 HTML 코드를 담았습니다. 이 코드만으로 Firebase의 강력한 실시간 데이터베이스 기능을 체험할 수 있을 거예요.

 

 

 

구글 위스크 이미지

실시간 방명록 앱

 

 

실제 코드: firebase 방명록 앱 제작을 위한 html 코드

 

🚀 이 앱을 직접 실행하려면? (3단계 가이드)

firebase 방명록 앱 제작을 위한 html 코드

 

위 코드를 실제로 동작시키려면 몇 가지 간단한 설정이 필요합니다.

1. Firebase 프로젝트 생성:
   • Firebase 콘솔로 이동하여 구글 계정으로 로그인합니다.
   • '프로젝트 추가'를 클릭하고, 프로젝트 이름을 정한 뒤 안내에 따라 새 프로젝트를 만듭니다.
2. Firestore 데이터베이스 설정:
   • 프로젝트 좌측 메뉴에서 '빌드' > **'Firestore Database'**를 클릭합니다.
   • '데이터베이스 만들기'를 누르고 **'테스트 모드에서 시작'**을 선택합니다. (주의: 실제 서비스에서는 보안 규칙을 더 엄격하게 설정해야 합니다!)
   • Cloud Firestore 위치를 선택하고(아시아 서버 추천) '사용 설정'을 클릭합니다.
3. HTML 파일에 내 프로젝트 정보 넣기:
   • 프로젝트 설정(좌측 상단 톱니바퀴 아이콘 > '프로젝트 설정')으로 이동합니다.
   • '내 앱' 섹션에서 </> 아이콘(웹)을 클릭하여 새 웹 앱을 등록합니다. 앱 닉네임을 입력하고 '앱 등록'을 클릭합니다.
   • 'Firebase SDK 추가' 단계에서 firebaseConfig 객체가 보일 겁니다. 이 코드를 복사해서 위 HTML 코드의 // 1단계: Firebase 프로젝트 설정 붙여넣기 주석 아래에 있는 firebaseConfig 변수에 그대로 붙여넣어 주세요.
   • 이제 이 HTML 파일을 브라우저에서 열면, 나만의 실시간 방명록이 완성됩니다!

마무리하며

어떠셨나요? 복잡한 서버 코드 한 줄 없이, 단 하나의 HTML 파일만으로 실시간 데이터 통신이 가능한 웹 애플리케이션이 만들어졌습니다. 친구에게 이 파일을 보내주고 firebaseConfig만 각자 자신의 프로젝트 정보로 바꾼다면, 멀리서도 함께 메시지를 주고받는 것을 확인할 수 있을 거예요.

이것이 바로 Firebase가 가진 강력함입니다. 오늘은 Firestore의 실시간 동기화 기능만 맛보았지만, 1부에서 소개한 인증, 호스팅, 스토리지 등 다양한 기능을 활용하면 훨씬 더 복잡하고 멋진 서비스도 빠르게 만들어낼 수 있습니다.

이번 시리즈를 통해 Firebase와 조금 더 가까워지는 계기가 되었기를 바랍니다.