[firebase] send하고 fetch하고 ?

프론트엔드✏️/개인공부

[firebase] send하고 fetch하고 ?

당근먹는하니 2022. 12. 16. 16:53

728x90

프로젝트 이름은 나와도 상관없겠지?

프로젝트를 만들고 해당 프로젝트에 앱을 등록해야 한다고...

첫 화면에서 추가하라고 한데서 누르면 되는 것 같음

등록하니까

yarn add firebase

그리고 Firebase를 초기화하여 SDK를 사용하라는데,

SDK가 뭔가. A software development kit 라고 한다.

firebase/app에서 initializeApp, firebase/anlytics에서 getAnalytics 이런 걸 말하는 건가봄

난 항상 이런 걸 보면 당황스럽다. 어디서 초기화를 해야될지 모르기 때문이다...

그냥 내 기억상 app.tsx에 했던 것 같아서 거기에 복붙했다.

환경 변수 배웠으니까 이걸로 바꿔줬다 ㅋㅋㅋ

이러면서 무한재로딩 되길래 그냥 저거 주석처리 해버렸다.

어차피 아직은 쓸 일 없으니까...ㅎㅎ~

여기부턴 진짜 모르겠어서 옛날에 수업 들은 걸 참고했다.

일단 새로운 페이지, 정보를 입력받을 페이지를 만든다.

그리고 가져왔는데 이런 오류가.

위는 ..같고 밑은 . . 같은데... 뭘까?...했는데 그냥 내가 firebaseApp을 내보내기한 적이 없는데 갖고오려고 해서 난 오류였다.

app.tsx에서

이 부분 app을 firebaseApp으로 바꾸고(가져올 때 app을 가져와도 되지만 특정하는 게 좋다고 생각했다.) export를 붙여주면 된다.

모니터 하나니까 불편해서 모니터 잠시 연결했는데 모니터가 안 좋은건지 설정이 안된건지 자글거리고 눈이 아프다~~~!!..

배경은 왜 자꾸 까매지는지? 다크모드도 아닌데...

그냥 한 번 눌러봤다.

빌드의 firestore에 들어간다.

시작하기를 눌러서 진행했는데, 데이터베이스 어디로 할지 정하라고 한다.

난 서울로 했는데... 뭔가 이걸 누르니까 진짜 내가 데이터 쓰레기를 만들고 있고 또 그게 환경오염시키고 있는 거 아닌가 그런 생각이 들었다...

이게 맞는지 모르겠는데 일단 이렇게 해봤다.

import { useState } from "react";
import { collection, getFirestore, addDoc } from "firebase/firestore/lite";
import { firebaseApp } from "../../../../../pages/_app";
import { useRouter } from "next/router";
import { MyInput, Wrapper } from "./What.styles";

export default function WhatMusic() {
  const router = useRouter();
  const [inputs, setInputs] = useState({
    name: "",
    url: "",
  });

  const onChangeInputs = (event) => {
    setInputs({
      ...inputs,
      [event.target.id]: event.target.value,
    });
  };
  async function onClickSubmit() {
    console.log(inputs);
    const music = collection(getFirestore(firebaseApp), "music");
    await addDoc(music, {
      ...inputs,
    });
    alert("게시물 등록에 성공하였습니다!");
    router.push("/music/what");
  }

  return (
    <div>
      <Wrapper>
        <div>
          노래 제목: <MyInput id="name" type="text" onChange={onChangeInputs} />
        </div>
        <div>
          주소: <MyInput id="url" type="text" onChange={onChangeInputs} />
        </div>
        <div>
          <button onClick={onClickSubmit}>등록하기</button>
        </div>
      </Wrapper>
    </div>
  );
}

FirebaseError: Request failed with error: Missing or insufficient permissions.

보안 규칙을 위반해서 그렇다고 한다.

write: if false;라서 그런건데, 뭐 자세히 설정하려면 엄청 복잡하다.. .근데 난 대충 쓸거니까 일단 true로 바꿨다.

오 들어왔다~~!!!

이제 이 목록을 fetch해오려는데

왜 이게 안되지?

음 그냥 진짜 추가가 안돼있었다. package.json에 안 써있나? 왜 안 깔렸지ㅎㅎ머쓱

console.log로 가져온 거 찍어봤는데 음... 여기서 내가 직접 줍는 건 아닌 것 같다.

import { useEffect, useState } from "react";
import YouTube, { YouTubePlayer, YouTubeProps } from "react-youtube";
import {
  collection,
  getFirestore,
  getDocs,
  DocumentData,
} from "firebase/firestore/lite";
import { firebaseApp } from "../../../../pages/_app";
const musicList = [
  { title: "비밀의 화원", id: "eGXJs7zOHC4" },
  { title: "cups", id: "cmSbXsFE3l8" },
];

let randomMusic = musicList[Math.floor(Math.random() * musicList.length)];

export default function Music() {
  const [musicTitle, setMusicTitle] = useState("");
  const [dataMusics, setDataMusics] = useState<DocumentData[]>([]);
  useEffect(() => {
    async function fetchMusics() {
      const music = collection(getFirestore(firebaseApp), "music");
      const result = await getDocs(music);
      const musics = result.docs.map((el) => el.data());
      setDataMusics(musics);
    }
    fetchMusics();
    console.log(dataMusics);
  }, []);

  const options: YouTubeProps["opts"] = {
    width: "1280",
    height: "720",
    playerVars: {
      autoplay: 1,
      modestbranding: 1, // Youtube 로고 컨트롤바에서 표시 X
      rel: 0, // 재생 종료 시 플레이어에서 관련 동영상 표시 X
      loop: 1, // 동영상 반복 재생 O(목록은 목록을 순회함)
      // list: "PLC77007E23FF423C6",
      playlist: "eGXJs7zOHC4,cmSbXsFE3l8,ubqXO_ghb2k", // musicList에서 id만 뽑아서? 안되나
      shuffle: 1,
    },
  };

  // 링크들을 받아와서, 아이디를 추출해서
  // 재생목록에 추가한 뒤, 목록에서 랜덤 추천

  // 제목은 그냥 내가 제목 목록을 만들어둘까,, 아이디랑 매칭해서
  // 노래 재생목록 재생은 되는데 셔플이 안되고 randomMusic도 바뀌지 않으니까...
  useEffect(() => {
    console.log(YouTube.name);

    // const embedCode = YouTubePlayer.getVideoEmbedCode();
    // console.log(embedCode);
  }, []);

  const getPlayerCode = (event: any) => {
    console.log(
      event.target.getVideoEmbedCode().split("title")[1].split('"')[1]
    );
    setMusicTitle(
      event.target.getVideoEmbedCode().split("title")[1].split('"')[1]
    );
    event.target.setShuffle(true);
  };
  return (
    <div>
      <YouTube
        videoId={randomMusic.id}
        opts={options}
        onReady={getPlayerCode}
      />
      지금, {musicTitle} 어때?
    </div>
  );
}

귀찮아서 한 번에 긁어왔는데 firebase 저렇게 써도 빈배열로 나온다! 왜지

파이어베이스 페이지엔 데이터 잘 들어왔는데.