AI 코딩 시대, 도구보다 중요한 건 '기본기' (Firebase 활용법)

https://www.youtube.com/watch?v=CYVDfZgQKCQ

 

1. Firebase 프로젝트 설정

 

1-1. Firebase 프로젝트 생성

1. Firebase 콘솔에 접속하여 가입
2. 'vibe-coding-backend' 이름으로 새 프로젝트 생성

1-2. 웹 앱 등록

1. 프로젝트 설정에서 웹 앱 추가
2. 앱 이름을 'vibe-coding-backend'로 등록
3. Firebase SDK 설정 코드 복사 (중요: 이 코드는 반드시 보관!)

 

 

2. 프로젝트에 Firebase 연동

 

2-1. HTML 파일 수정

index.html 파일의 script 태그에 type="module" 속성 추가:

<script src="script.js" type="module"></script>

 

2-2. JavaScript 파일 설정

script.js 파일 맨 위에 Firebase import 및 설정 코드 추가:

import { initializeApp } from "https://www.gstatic.com/firebasejs/12.8.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/12.8.0/firebase-analytics.js";

const firebaseConfig = {
  // 위에서 복사한 설정 정보
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

 

 

 

3. Realtime Database 설정

3-1. 데이터베이스 생성

1. Firebase 콘솔에서 'Realtime Database' 메뉴로 이동
2. '데이터베이스 만들기' 클릭
3. 지역 선택 후 생성

 

 

3-2. Database URL 추가

생성된 데이터베이스 URL을 firebaseConfig에 추가:

const firebaseConfig = {
  // 기존 설정들...
  databaseURL: "***"
};

 

3-3. 할일 추가 기능 구현

AI에게 요청: "할일을 추가하는 기능을 firebase를 이용해서 만들어줘"

주의사항: 코드 생성 후 firebaseConfig 정보가 변경되지 않았는지 반드시 확인!

 

코드 확인하고 적용했으면 내용을 입력해보고 firebase에 잘들어갔는지 확인

 

 

 

4. 사용자 인증 기능 구현

4-1. Authentication 설정

1. Firebase 콘솔에서 'Authentication' 메뉴로 이동
2. '시작하기' 클릭
3. 로그인 방법 중 '이메일/비밀번호' 선택 및 활성화
4. 저장

 

4-2. 로그인 UI 구현

 

• 로그인 버튼 및 페이지 생성
  • "할일앱 상단에 로그인 버튼을 만들어줘. 그리고 로그인 버튼을 클릭하면 로그인 페이지로 가게 해줘"
• 회원가입 페이지 연결
  • "login.html 에서 회원가입 버튼을 클릭하면 회원가입 페이지로 넘어가게 해줘"

 

 

회원가입 기능 구현

• "signup.html 에서 회원가입버튼을 누르면 firebase를 이용해서 회원가입이 될 수 있는 기능을 만들어줘"

 

 

 

• 로그인 기능 구현
  • "login.html 여기서 로그인 버튼을 클릭하면 firebase를 통해서 로그인하는 기능을 만들어줘"
• 로그인 상태 표시
  • "index.html 에서 로그인이 되어있으면 username 님 환영합니다. 메시지가 보이게 해줘. 그리고 로그인 상태면 로그인버튼을 로그아웃으로 바꿔줘"

 

 

 

4-3. 작성자 정보 저장

로그인한 사용자 정보를 할일에 함께 저장:

• "script.js 할일을 저장할때 작성자 정보도 저장해줘"

* 작성자 정보까지 저장이 잘 됐으나, "작성자도 목록에 보여줘"의 요청은 실패했다.

기존에 등록했던 항목들에는 작성자정보가 없기때문에 작성자를 읽어올수없다는 타입에러가 난다.

todo.author?.displayName || '익명" 으로 해결.

무료 크레딧(토큰)을 다썼다.. 나는 거지니깜 다른방법으로 할 수 있는 방법을 찾아봐야겠다.ㅋㅋㅋㅋㅋ

cursor 맛보기 끝 :)