개발 일지

이미지를 가져오려면 먼저SDK(friebaseconfig 넣어준다)를 가져오면 된다(프로젝트 -> 프로젝트 개요 톱니(오른쪽 상단) -> 프로젝트 설정 )

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: ''
};
이미지를 가져오려면 먼저SDK(friebaseconfig 넣어준다)를 가져오면 된다(프로젝트 -> 프로젝트 개요 톱니(오른쪽 상단) -> 프로젝트 설정 )

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Cloud Storage and get a reference to the service
const storage = getStorage(app);


const imageRef = ref(storage, `your storage url`); // 자신이 가져오려는 storage의 경로를 지정해준다
 listAll(imageRef).then((result) => {
                result.items.forEach((itemRef) => {
                    getDownloadURL(itemRef)
                        .then((url) => {
                            console.log('File URL:', url);
                        })
                        .catch((error) => {
                            console.error('Error getting download URL:', error);
                        });
                });
            })
            .catch((error) => {
                console.error('Error listing files:', error);
            });
            
  //listAll로 우리가 적어준 디렉토리 경로안에 있는 모든 사진의 url 하나씩 출력해주는 코드다.

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: ''
};
이미지를 가져오려면 먼저SDK(friebaseconfig 넣어준다)를 가져오면 된다(프로젝트 -> 프로젝트 개요 톱니(오른쪽 상단) -> 프로젝트 설정 )

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Cloud Storage and get a reference to the service
const storage = getStorage(app);


const imageRef = ref(storage, `your storage url`); // 자신이 가져오려는 storage의 경로를 지정해준다
   getDownloadURL(imageRef)
      .then((url) => {
        setImageUrl(url);
      })
      .catch((error) => {
        console.error('Error getting download URL:', error);
      });
  //이 코드는 그 경로에 있는 사진 하나만 가져오는 코드이다(사진 하나의 경로만 가져온다 아마도..?)

import {motion} from "framer-motion" 

ex)

import {AnimatePresence} from "framer-motion" 

요소가 사라지는 애니메이션을 적용할때 사용한다

ex)

animate

애니메이션 효과를 준다

ex)

animation효과 설정 재사용(variants)

ex)

list사이에 시차를 둔다 

1. data: data 변수는 useQuery 훅의 반환값에서 비동기로 가져온 데이터를 담고 있습니다. 이 데이터는 fetchEvents 함수를 사용하여 비동기적으로 가져온 결과물입니다.
2. isPending: isPending 변수는 데이터 요청이 아직 완료되지 않았을 때 true로 설정됩니다. 즉, 데이터가 아직 로딩 중인지 여부를 나타냅니다. staleTime 옵션으로 설정한 3,000 밀리초(3초) 동안 데이터가 "풀(stale)" 상태로 남아 있다면 이 값을 true로 설정하지 않습니다.
3. isError: isError 변수는 데이터 요청 중에 오류가 발생했을 때 true로 설정됩니다. 데이터를 성공적으로 가져오지 못한 경우를 감지하는 데 사용됩니다.
4. error: error 변수는 오류가 발생했을 때 오류 정보를 담고 있습니다. 오류가 없으면 이 변수는 null입니다.
5. queryKey: queryKey는 데이터를 가져오는 데 사용되는 쿼리의 식별자입니다. 이것은 React Query에서 데이터를 캐시하고, 필요한 경우 다시 사용하는 데 도움이 됩니다. 여기서 queryKey는 "events" 문자열을 가지고 있으며, 이는 데이터를 가져올 때 사용하는 식별자입니다.