코딩기록

데이터를 가져올 때 where과 orderBy를 같이 쓰면 생기는 문제 cloud Firestore  색인에 들어가서 복합 색인을 만들어준다.필요한 필드의 조건을 정해주고 만들어주면 색인이 생긴다.사용 설정될때까지 시간이 좀 걸린다.상태가 사용 설정됨이 되면 화면에 반영된다. // 좋아요 리스트export const getLikeList = async (userId: string) => { try { const q = query( likeListItem, where("userId", "==", userId), orderBy("createdAt", "desc"), ); const snapshot = await getDocs(q); return snapsho..

좋아요... 좋아요 기능을 추가해야한다...어떻게 해야하는지 엄청 찾아봤지만 기본 로컬데이터를 이용해서 관리하기는 어렵고파이어베이스를 이용한김에 데이터 관리도 로컬이 아닌 파이어베이스로 변경했다. https://hhyj0000.tistory.com/184 [Next 고캠핑] 로컬 데이터 파이어베이스로 변경하기캠핑장 좋아요 기능을 추가하기 위해서 로컬로 데이터를 불러왔던것을 firebase로 바꿨다.오른쪽 상단 더보기를 눌러서 json 가져오기를 누르면 내 데이터가 잘 들어와진 것을 확인할 수 있다.  hhyj0000.tistory.com   likeList 컬렉션을 만들었다.여기에 userId를 추가해서 유저의 좋아요 상태 관리를 할 것. https://firebase.google.com/docs/fir..

캠핑장 좋아요 기능을 추가하기 위해서 로컬로 데이터를 불러왔던것을 firebase로 바꿨다.오른쪽 상단 더보기를 눌러서 json 가져오기를 누르면 내 데이터가 잘 들어와진 것을 확인할 수 있다.  로컬로 불러오기 // 데이터 불러오기 useEffect(() => { async function fetchData(): Promise { if (!query.region) return; // 지역 값이 유효할 때만 setLoading(true); try { const response = await axios.get( `${API_URL}/basedList?serviceKey=${SERVICE_KEY}&numOfRows=3000&pageNo=1&Mo..

로그인, 회원가입 화면page > login const [formError, setFormError] = useState(false); // 로그인, 회원가입 에러 const [tabLogin, setTabLogin] = useState(true); // 로그인, 회원가입 탭 const router = useRouter(); const { isLogin } = useAuth(); useEffect(() => { // 로그인된 상태에서 /login 들어오면 홈으로 if (isLogin) { void router.replace("/"); } else { // active 클래스 1초 뒤 삭제 const timer = setTimeout(() => { ..

[Firebase] Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app).- 파이어베이스 설정을 하고 작업을 진행하려 하니 오류가 나왔다. 찾아보니 앱을 중복해서 초기화하는 문제가 발생할 수 있다고 한다.파이어베이스 앱이 있는지 확인하고 없을 때 새로 초기화 하는 방식으로 해야한다고 해서 수정을 했다.파이어베이스 중복 오류src > firebase > firebase.tsimport { getApp, getApps, initializeApp } from "firebase/app";import { getAuth } from "firebase/auth";const firebaseConf..

모달 창이 열렸을 때 뒤로닫기를 해도 모달창이 닫히게 하고 싶었다. 찾아보니 History.pushState를 많이 사용해서 사용하려 했는데 모달 쿼리를 추가하고 모달 닫기를 누를때 뒤로가기를 생성해서 간단하게 구현을 해보았다.  모달 코드src> hooks> useModal.tsimport { useRouter } from "next/router";import { useEffect, useState } from "react";export function useModal() { const [currentModal, setCurrentModal] = useState(null); const router = useRouter(); useEffect(() => { const { modal } = ro..