2024.04.18(목) 슈퍼코딩 신입연수원 3주차 Day 4 후기 - firebase

• Firebase
  • 서버 없이 DB, 유저 인증, 이미지 업로드, 배포 가능
  • 실시간 데이터베이스 지원
  • 소규모 프로젝트에 적합
  • 호스팅
    
    • 빌드 → Hosting 페이지에서 배포 설정 가능
    • firebase deploy
  • 데이터베이스
    • 빌드 → Realtime Database
    • 테스트 모드 사용, 싱가포르
    • 공식 문서 : https://firebase.google.com/docs/database?authuser=0&hl=ko&_gl=1*1bdcffx*_up*MQ..*_ga*NTUwMzU0MjAxLjE3MTQ0NjM4NDI.*_ga_CW55HF8NVT*MTcxNDQ2Mzg0Mi4xLjEuMTcxNDQ2NTc0OC4yMi4wLjA.
    • VS Code에 파이어베이스 설치 : npm i firebase
  • 스토리지
    • 빌드 → Storage
    • 테스트모드 사용, asia-east2
    • 공식 문서 : https://firebase.google.com/docs/storage/web/start?hl=ko&authuser=0&_gl=1*7j9vm6*_up*MQ..*_ga*MTEyMDQ2NjM4MC4xNzE0NjE2NTcx*_ga_CW55HF8NVT*MTcxNDYxNjU3MC4xLjAuMTcxNDYxNjU3MC4wLjAuMA..
    •  

 

• firebase init 설정

PS C:\Users\sinar\Desktop\슈퍼코딩\carrot-market-clone> firebase init      

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  C:\Users\sinar\Desktop

? Are you ready to proceed? Yes
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle   
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle   
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle   
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle   
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle   
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Hosting: Configure files for Firebase     
Hosting and (optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: carrot-clone-b365e (carrot-clone)

i  Using project carrot-clone-b365e (carrot-clone)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
+  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc... 

+  Firebase initialization complete!

 

• 실습(carrot-clone)
  • firebase 연동 → 데이터베이스 연동
  • 번들러(vite)로 빌드
    • npm run build
  • firebase init → dist 폴더에 빌드된 내용 추가됨
  • 배포 : firebase deploy → 호스팅 URL을 알 수 있음
  • package.json 파일에 scripts에 아래 코드 입력 → npm run deploy 명령어를 통해서 번들러 및 파이어베이스 동시 진행 가능
    •     "deploy": "npm run build && firebase deploy"
  • alert() 문법 : 사용 X → 사용자가 확인을 눌러야하는 번거로움이 있기 때문
  • svelte
    • 처음 화면이 렌더링 될 때에만 script 코드 실행
    • onMount() : 화면이 보일 때마다 렌더링되는 메서드
  • 이미지 출력
    • firebase storage