코딩기록

캠핑장 후기를 작성하고 이미지가 추가할 경우 FileReader로 이미지가 미리 보여지며등록하기를 누르면 파이어베이스 storage에 저장이 된다.이미지는 4개로 제한해놨기때문에 4개가 초과되면 alert창이 뜬다.    firebase 들어가면 확인할 수 있다. 내가 작성한 필드와 스토리지에 저장된 이미지들.   FileReader정의 :FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 함.비동기적으로 동작함. Base648비트 2진 데이터를 (플랫폼의) 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일..

데이터를 가져올 때 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..

지금 캠핑 상세 화면의 이미지만 먼저 작업중에 있다. 아직 이미지 외의 다른 데이터는 작업 x 이미지를 누르면 전체 사진을 보여주려 한다. 우선 모달창만 구현한 화면. component/Modalinterface IPropsModal { isShowing: boolean; hide: () => void; message: string;}export function Modal({ isShowing, hide, message }: IPropsModal) { return isShowing ? ReactDOM.createPortal( ) => { e.stopPropagation(); }} > ..

아직 준비중인 기능들이 있어 alert창을 띄우는데 커스텀을 하고싶었고,여러 화면에서 사용할 것이기 때문에 컴포넌트화해서 사용하고 싶었다.  방법을 찾아본 결과 이 방법이 제일 간단하고 편리한거 같아서 따라하게 되었다. hooks/useModal.tsimport { useState } from "react";export function useModal() { const [isShowing, setIsShowing] = useState(false); const modalToggle = () => { setIsShowing(!isShowing); }; return { isShowing, modalToggle, };}- useModal 커스텀 훅을 만들어서 모달이 보이는 상태와 모달 ..

캠핑장 카드가 잘 나와서 검색 기능을 시작했다.  dropdown.tsx// 옵션 타입 정의interface IPropsSelect { isMain: boolean; onChangeSearch?: (region: string, subRegion: string | null) => void;}export default function DropDown({ isMain, onChangeSearch }: IPropsSelect) { // 광역시 const [selectedRegion, setSelectedRegion] = useState>(null); // 하위지역 const [subRegions, setSubRegions] = useState([]); // 광역시 선택시 하위지역 리셋 con..