lim-bora.log

[Next js] spotify api 데이터 supabase 업로드 에러

Fri, 29 Nov 2024 17:27:44 GMT

🔥 이슈 api 노래목록별로 추가버튼 생성 후 클릭시 supabase에 데이터가 올라가야하는데 에러

supabase - playlist 테이블구성 id / user_id(로그인유저 아이디) / is_main(메인노래) / created(시점) / track_name(노래이름) / artist_name(가수이름) / track_id / album_image(앨범이미지링크)

"use client";
import browserClient from "@/utils/supabase/client";

const PlaylistAll = ({ playlist, setIsShowModal }: PlaylistAllProps) => {

  const [search, setSearch] = useState("");

  const handleAddPlayList = async (track: SpotifyTrack) => {
    try {
      const { data, error } = await browserClient.from("playlist").insert({
        track_id: track.id,
        track_name: track.name,
        artist_name: track.artists[0].name,
        album_image: track.album.images[0]?.url
      });
      if (error) console.error("추가중 오류 발생:", error);
      else console.log("트랙 추가", data);
    } catch (error) {
      console.error("그 외 에러:", error);
    }
  };

  return (
                    ... 
           
  );
};
export default PlaylistAll;

🔎 원인 테이블의 각 행별로 설정상 null은 허용하지않는다 해두었다. playlist에 값을 insert 해주면서 user_id 의 값을 넘겨주지않아, user_id 값이 null로 넘어가면서 생긴문제

"use client";
import browserClient from "@/utils/supabase/client";

const PlaylistAll = ({ playlist, setIsShowModal }: PlaylistAllProps) => {

  const [search, setSearch] = useState("");

  const handleAddPlayList = async (track: SpotifyTrack) => {
    try {
      // 현재 로그인된 사용자 user_id
      const { data: user } = await browserClient.auth.getUser();
      if (!user) {
        console.error("로그인한 유저가 없습니다.");
        return;
      }

      const { data, error } = await browserClient.from("playlist").insert({
        track_id: track.id,
        track_name: track.name,
        artist_name: track.artists[0].name,
        user_id: user.user.id,
        album_image: track.album.images[0]?.url
      });
      if (error) console.error("추가중 오류 발생:", error);
      else console.log("트랙 추가", data);
    } catch (error) {
      console.error("그 외 에러:", error);
    }
  };

  return (
                    ... 
           
  );
};
export default PlaylistAll;

✅ 해결

browserClient.auth.getUser() : 로그인한 유저의 정보를 가져온다.
- 만약 로그인한 유저의 정보가 없다면 유효성 처리
playlist에 값을 insert하면서 user_id 도 같이 넘겨준다.
- user_id: user.user.id,
  - 처음에 user_id:use.id 라고 적었다가 에러가 떠서 다시 데이터값을 확인했을때 user > user{id : ..,name:…} 으로 되어있는걸 확인하여 재수정하였다.

[Next js] 중복코드개선, 무한루프

Fri, 29 Nov 2024 16:12:02 GMT

카페모아 프로젝트에서 반복되는 코드와 전역으로 관리해야할 필요성을 느낀점을 기록화하였다.

1. 카테고리별 필터링된 리스트 목록화

🔎 문제점
필터링된 리스트를 목록화하는건 카테고리/지역/메인배너/추천리스트 등에 모두 같은 동작으로 중복코드가 다수 발생한다.

✅ 해결 전역함수로 인자만 전달하는 방식으로 전환했을때 중복코드를 개선할 수 있었다.

//utils.jsx

//전체데이터에서 전달받은 필터값을 가진 포스트만 추려서 list에 출력
export const cateListHandle = (cate, articleAllData, setCateInLists, navigate, filterText) => {
  const filterCateInList = articleAllData.filter(list => list[filterText] === cate);
  setCateInLists(filterCateInList);
  const cateInListsParam = encodeURIComponent(JSON.stringify(filterCateInList));
  navigate(`/list-category?cate=${cate}&cateInLists=${cateInListsParam}`);
};

호출했을때 실행할 함수 유틸페이지에 빼주기
- cate = 검색카테고리
- articleAllData = 모든 article데이터
- setCateInLists = 필터링된리스트
- filterText = 필터링한 데이터키값
```
//MainCategory.jsx(AF)
```

import { useState, useEffect } from 'react'; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; import { cateListHandle } from '../utils/utils';

const category = ['모각코', '뷰맛집', '24시', '디저트맛집', '애견동반', '한옥', '분좋카'];

const MainCategory = () => { const [articleAllData, setArticleAllData] = useState([]); //article 전체데이터 상태저장 const setCateInLists = []; //필터링된 리스트 저장 const filterText = 'category'; //필터링된 리스트 저장 const navigate = useNavigate();

//article 데이터 전체 가져오기 useEffect(() => { const getArticle = async () => { const { data: articleData } = await axios.get('http://localhost:888/article'); setArticleAllData(articleData); }; getArticle(); }, []);

const onClickfilter = cate => { cateListHandle(cate, articleAllData, setCateInLists, navigate, filterText); };

return (

카테고리

onClickfilter(cate)}> {cate}

); };

- ```import { cateListHandle } from '../utils/utils';```
-> util함수 임폴트하기
- li 클릭했을때 클릭함수에 ```cateListHandle``` 실행함수 호출하기
    - **인자로 클릭한 li의 텍스트, article전체데이터, 필터링상태관리, 필터링할 article의 키값 전달하기**


---

### 2. 무한루프

🔎 문제점  
메뉴가 열린상태로 페이지 이동시 계속 펼쳐져 있는 문제
상태변경과 페이지 이동이 같이 실행될 때 무한루프 문제

✅ 해결 
Zustand 스토어에 메뉴별 active상태를 초기화하는 함수를 만들어 
스토어를 임폴트하여 메뉴 초기화 함수를 불러온 후 필요한 이벤트 함수들에 같이 불러온다. 

```ts
 // bearStore.js (Zustand)
 const initialState = {
  userInfo: null,
  isMenuOpen: false,
  activeTab: 0,
};
const useUserStore = create(
    persist(
    (set, get) => ({
      ...initialState,
      ...
            closeMenu: () => set({ isMenuOpen: false }),
            setActiveTab: index => set({ activeTab: index }),
            removeTab: () => set({ activeTab: false }),
        }),
    ...
    )

메뉴가 있는 컴포넌트에 const { closeMenu, toggleMenu, isMenuOpen} = useUserStore(); 로 메뉴초기화 함수를 불러온 후 메뉴가 닫혀야할 이동 및 클릭이벤트에 함수를 불러온다.

정리옮기기

노션정리 보기

[Next js]낙관적 업데이트

Wed, 20 Nov 2024 03:42:13 GMT

기존_앨범추가 코드

// 앨범 추가
export const usePostAlbumMutation = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: postAlbum,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: QUERY_KEY.ALBUM });
    },
    onError: (error) => {
      console.error('MutationError:', error);
    }
  });
};

낙관적업데이트로 변경

// 앨범 추가 : 낙관적 업데이트
export const usePostAlbumMutation = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: postAlbum,
    onMutate: async (newData) => {
      await queryClient.cancelQueries({ queryKey: QUERY_KEY.ALBUM });
      // 활성쿼리 취소
      const previousAlbums = queryClient.getQueryData(QUERY_KEY.ALBUM);
      //이전 앨범정보 가져오기(에러발생시 롤백용)
      queryClient.setQueryData(QUERY_KEY.ALBUM, (old: any) => [...old, newData]);
      //UI를 먼저 업데이트, 실패시 데이터복원(첫번째인자:업뎃할 쿼리키, 두번째인자:업데이트함수로 old현재+new추가할꺼)
      return { previousAlbums };
    },
    onError: (error, newAlbum, context) => {
      queryClient.setQueryData(QUERY_KEY.ALBUM, context?.previousAlbums);
      // 에러발생시 데이터복원
      console.error('MutationError:', error);
    },
    onSuccess: () => {
      console.log('앨범이 성공적으로 추가되었습니다.');
    },
    onSettled: () => {
      //성공실패 상관없이 호출
      queryClient.invalidateQueries({ queryKey: QUERY_KEY.ALBUM });
    }
  });
};

기존_앨범삭제 코드

// 앨범 삭제
export const useDeleteAlbumMutation = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: deleteAlbum,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: QUERY_KEY.ALBUM });
    },
    onError: (error) => {
      console.error('삭제 중 오류 발생:', error);
    }
  });
};

낙관적업데이트로 변경

// 앨범 삭제 : 낙관적 업데이트
export const useDeleteAlbumMutation = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: deleteAlbum,
    onMutate: async (albumId) => {
      await queryClient.cancelQueries({ queryKey: QUERY_KEY.ALBUM });
      // 활성쿼리 취소
      const previousAlbums = queryClient.getQueryData(QUERY_KEY.ALBUM);
      //이전 앨범정보 가져오기(에러발생시 롤백용)
      queryClient.setQueryData(QUERY_KEY.ALBUM, (old: any) => old.filter((photo: any) => photo.id !== albumId));
      //UI를 먼저 업데이트, 실패시 데이터복원(첫번째인자:업뎃할 쿼리키, 두번째인자:이전데이터 아이디기준 필터링)
      return { previousAlbums };
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: QUERY_KEY.ALBUM });
    },
    onError: (error, albumId, context) => {
      queryClient.setQueryData(QUERY_KEY.ALBUM, context?.previousAlbums);
      console.error('삭제 중 오류 발생:', error);
    },
    onSettled: () => {
      //성공실패 상관없이 호출
      queryClient.invalidateQueries({ queryKey: QUERY_KEY.ALBUM });
    }
  });
};

[Next js] browser-image-compression를 사용한 이미지 성능최적화_(이미지 압축 라이브러리,AVIF 파일변환)

Tue, 19 Nov 2024 12:57:12 GMT

갤러리에서 처음 사용자가 이미지를 올릴 때 용량제한을 두지않아 이미지가 용량이 크고 양이 많아질수록 페이지 로드되는 속도가 현저히 낮아지는 현상발생

이전코드 문제점

압축 또는 이미지 최적화 안함

반복적인 상태 업데이트 setImgSrc((prev) => [...prev, e.target!.result as string]);

// 이미지 파일받기
const OnChangePhoto = (e: ChangeEvent) => {
 if (onClickUserCheck(e)) return;

 const files = e.target.files;
 setCurrentRegion(e.target.id.split('-')[1]);
 if (!files) return;

 Array.from(files).forEach((file) => {
   const fileReader = new FileReader();
   fileReader.readAsDataURL(file);

   fileReader.onload = (e) => {
     if (typeof e.target?.result === 'string' && e.target.result) {
       if (activeTab === 'allTab') {
         setImgSrc((prev) => [...prev, e.target!.result as string]);
         // setIsRigionModal(true);
         openModal();
       } else if (activeTab === 'rigionTab') {
         setImgSrc((prev) => [...prev, e.target!.result as string]);
         setRegionCate(item);
       }
     }
   };
 });
};

수정코드

파일 읽기와 압축을 병렬로 처리해 전체 시간을 단축한다.
상태 업데이트 최소화하여 불필요한 렌더링을 방지한다.

  // 이미지 파일받기
  const OnChangePhoto = async (e: ChangeEvent) => {
    if (onClickUserCheck(e)) return;

    const files = e.target.files;
    setCurrentRegion(e.target.id.split('-')[1]);
    if (!files) return;

    const imgSrcArray: string[] = await Promise.all(
      Array.from(files).map(async (file) => {
        // 파일 압축
        const compressedImage = await imageCompression(file, {
          maxSizeMB: 1, // 1MB
          maxWidthOrHeight: 1024, // 이미지의 최대 가로 또는 세로 길이를 1024로 제한
          useWebWorker: true // 압축 작업이 메인 스레드에 영향을 미치지 않도록 설정
        });

        // 압축파일 AVIF 형식으로 변환
        const avifImage = await convertImageToAvif(compressedImage);

        // 압축된 파일 읽기
        return new Promise((resolve) => {
          const reader = new FileReader();
          reader.readAsDataURL(avifImage);
          reader.onload = () => {
            if (typeof reader.result === 'string') {
              resolve(reader.result);
            }
          };
        });
      })
    );

    // 상태 업데이트를 한 번에 처리
    setImgSrc((prev) => [...prev, ...imgSrcArray]);

    if (activeTab === 'allTab') {
      openModal();
    } else if (activeTab === 'rigionTab') {
      setRegionCate(item);
    }
  };

Promise.all 사용해 파일 압축 & 읽기 -> 병렬로 처리
병렬로 처리하면 하나끝날때까지 안기다리고 여러개를 동시에 처리가 가능해 시간단축이 가능하고, 코드가 좀 더 깔끔해진다.
반복됬던 상태 업데이트를 한 번에 처리하여 불필요한 렌더링을 방지 setImgSrc((prev) => [...prev, ...imgSrcArray]);
전달받은 압축된이미지를 한 번 더 AVIF 형식으로 변환

AVIF 형식으로 변환하는 함수

// AVIF 형식으로 변환하는 함수
export const convertImageToAvif = (file: File): Promise => {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx?.drawImage(img, 0, 0);
      canvas.toBlob(
        (blob) => {
          if (blob) {
            const webpFile = new File([blob], `${file.name.split('.')[0]}.webp`, { type: 'image/webp' });
            resolve(webpFile);
          } else {
            console.warn('WebP 변환 실패, 원본 파일 사용');
            resolve(file);
          }
        },
        'image/webp',
        0.8
      );
    };
    img.onerror = () => {
      console.warn('이미지 로드 실패, 원본 파일 사용');
      resolve(file);
    };
  });
};

결과

실제로 이미지용량이 줄었다. 성능이 좀 올라갔다. 화면에 앨범제외하고도 pc에서만 나타나는 푸터로 큰레이아웃변경이 원인일 수 있다. (BF)

(AF)

[Next js] Link vs Router

Tue, 19 Nov 2024 07:02:13 GMT

스탬프를 추가하는 작업 후 바로 스탬프목록으로 이동했을 때 추가한 스탬프까지 바로 반영된 화면이 보여야하는데 반영안된상태로 새로고침이 되야 반영이되는 문제가 있다.

이전코드

//스탬프 추가 후 목록으로 넘어가는 버튼

      
         알겠어요!

이 전 코드는 단순 링크이동을 위해 Link를 사용하여 이동되도록 했다.

수정코드

수정된 코드는 Link -> button로 변경 후
router.push('/stamp-all') 로 페이지이동하게 하고 router.refresh(); 로 데이터를 갱신하면서 강제로드되도록 하였다.

router.refresh() : 현재 페이지를 클라이언트에서 새로고침 없이 강제로 다시 로드하는 기능

언제 사용할까 ?

데이터 갱신 : 데이터를 수정, 삭제, 추가한 후 서버에서 최신 상태를 가져와야 할 때
서버 상태 동기화 : 클라이언트와 서버 간 데이터 불일치를 해결할 때

-> 난 두 경우 모두 해당되기때문에 refresh()를 사용하여 해결하였다.

Link vs Router

두 개 모두 Next.js에서 페이지 간 이동을 처리할 때 사용한다. 그럼 차이점은?

Link

사용자가 클릭할 수 있는 정적인 내비게이션 링크를 만들 때 사용한다.

언제 사용?

페이지 간 이동이 주로 클릭으로 이루어지는 경우
사용자 경험 개선 Link는 Next.js의 Prefetching 기능을 활용하여 해당 경로 데이터를 미리 가져옵니다. 이를 통해 이동 속도가 빨라집니다.

Router

Next.js의 훅으로, 프로그래밍 방식으로 경로 이동을 처리할 때 사용한다.

언제 사용?

특정 이벤트가 발생했을 때 코드에서 경로를 변경해야 할 경우. (폼 제출 후 이동, 데이터 업데이트 후 이동 등)
조건부 라우팅, URL 파라미터 동적 설정 등 코드에서 더 많은 제어가 필요한 경우.

[Next js] SSR로 초기로딩속도 높이기 (성능개선)

Tue, 19 Nov 2024 06:42:36 GMT

기능을 완성시키고 테스트하는중애 화면에 그려지는 속도가 너무 느려서 작동안되나..?싶을정도로 반영이 느린점을 개선해보려한다.

🖍️ CSR vs. SSR

CSR의 경우, 서버로부터 빈 HTML과 JavaScript 파일을 넘겨 받은 다음에 Query가 실행된다. Markup > JS > Query

SSR의 경우. 서버에서 내용을 채워서 HTML을 보내줘야 하므로, Query는 Markup을 전달하기 전에 실행된다. Query > JS > Markup

기존코드 (CSR방식)

import browserClient from '@/utils/supabase/client';

//앨범전체데이터 가져오기
export const getAlbumList = async (userId: string) => {
  const { data, error } = await browserClient.from('album').select('*').eq('user_id', userId);

  if (error) {
    console.error('포토앨범 리스트 가져오기 오류 :', error.message);
    throw new Error('포토앨범 리스트 데이터를 가져오는 중 오류가 발생했습니다.' + error.message);
  }
  return data;
};

수정코드(SSR방식)

//serverAction
'use server';

import { createClient } from '@/utils/supabase/server';
//앨범전체데이터 가져오기
export const getAlbumList = async (userId: string) => {
  const serverClient = createClient();

  const { data, error } = await serverClient.from('album').select('*').eq('user_id', userId);

  if (error) {
    console.error('포토앨범 리스트 가져오기 오류 :', error.message);
    throw new Error('포토앨범 리스트 데이터를 가져오는 중 오류가 발생했습니다.' + error.message);
  }
  return data;
};

앨범데이터를 서버에서 가져옴 -> 캐싱, 상태관리 추가

staleTime(신선시간)

//useGetAlbumListQuery.tsx
export const useGetAlbumListQuery = (userId: string) => {
return useQuery({
  queryKey: QUERY_KEY.ALBUM,
  queryFn: async () => {
    if (userId) {
      return await getAlbumList(userId);
    } else {
      return null;
    }
  },
  enabled: !!userId,
  staleTime: 60 * 1000 //데이터가 신선하게 유지되는 시간 (1분)
});
};


- HydrationBoundary
- dehydrate
```ts
//page.tsx

const Album = async () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000
      }
    }
  });

  const user = await getUser(); //유저아이디가져오는 훅으로 불러오기

  //프리패치
  if (user) {
    await queryClient.prefetchQuery({
      queryKey: QUERY_KEY.ALBUM,
      queryFn: () => getAlbumList(user.id)
    });
  }

  return (
    
      
        
      
    
  );
};

[Next js] useState의 비동기

Sat, 16 Nov 2024 07:47:26 GMT

추천관광지에서 로그인한 유저의 북마크가 있으면 체크된상태로 되야하는데 북마크체크가 되어있지않은 상태로 보여진다.

const TourismPage = () => {
  const userId = useUserId(); //유저아이디 가져오는 훅
  const { data: tourismList, isLoading } = useGetTourismListQuery(userId); //쿼리로 받아온 투어리스트 데이터

// 도시별 데이터 그룹화
  const groupedPlaces = tourismList ? groupTourismByCity(tourismList) : [];

return(
...
  {groupedPlaces.length !== 0 ? (
          Object.entries(groupedPlaces).map(([city, tourismList]) => (
            
              
                
                  {tourismList[0]?.citytitle || '도시 정보 없음'}
                
              
              {city}

              {/* TouristSwiper로 도시별 여행지 목록을 스와이프 가능하게 표시 */}
              
            
          ))
        ) : (
          텅
        )}
)

우선 값이 제대로 들어오는지 체크

투어리스트 데이터 잘가져와짐
유저아이디 훅안에서 아이디값 잘 가져와짐
유저아이디값 처음엔 null이었다가 가져와짐..!

Loading, Pendding상태에 따른 처리도 해주었지만 해결안됨

원인)

로그인 유저데이터를 가져오는 속도보다 투어리스트가 UI에 업데이트되는 속도가 더 빨라서 투어리스트가 업데이트된 후 로그인유저를 받아와 북마크 체크가 안되는것

useState는 비동기로 작동한다.

setState의 비동기 문제 해결 방법)

우선 로그인한상태에서의 투어리스트를 담을 state를 새로 만들고 useEffect의 의존성 배열에 유저아이디와, 기존 쿼리로 담아왔던 투어리스트를 추가하면 두 개가 업데이트 된 후 새로 만들어준 state에 값을 담아준다.

const [tourismListData, setTourismListData] = useState([]); //로그인했을때 북마크된 투어리스트상태들이 담겨

  useEffect(() => {
    if (userId && tourismList) {
      //유저아이디와 투어리스트가 있으면 tourismListData 상태에 저장
      setTourismListData(tourismList);
    }
  }, [userId, tourismList]);

이 후 분기처리로 로그인했을때 안했을때 삼항연산자를 사용해 화면에 보여준다. tourismListData(로그인O,북마크O) / tourismList(로그인X,북마크X)

// 도시별 데이터 그룹화 : 유저아이디 유무에 따라 할당값 다르게
const groupedPlaces = userId ? groupTourismByCity(tourismListData) : groupTourismByCity(tourismList || []);

{Object.keys(groupedPlaces).length !== 0 ? ( //groupedPlaces객체라 length사용불가, -> 객체의 키 개수를 확인하는걸로 대체
          Object.entries(groupedPlaces).map(([city, tourismList]) => (
            
              
                
                  {tourismList[0]?.citytitle || '도시 정보 없음'}
                
              
              {city}

              {/* TouristSwiper로 도시별 여행지 목록을 스와이프 가능하게 표시 */}
              
            
          ))
        ) : (
          텅
        )}

State Batch Update

리액트는 컴포넌트의 렌더링 횟수를 최소화하기 위해서 State Batch Update를 사용한다. 이는 리액트의 이벤트 핸들러를 사용하여 여러 번의 setState를 호출할 때 이를 하나의 업데이트로 일괄 처리하여 리렌더링이 한 번만 발생하도록 하는 것이다.

예시)

const [num,setNum] = useState(0); 
const onClickCount = () => {
  setNum(num+1)
  setNum(num+1)
}
...

-> 한번 클릭했을때 일괄처리하기때문에 결과는 1만 증가한다.

참고자료)

[Next js] 위치권한 상태 확인

Wed, 13 Nov 2024 12:38:57 GMT

사용자의 위치권환상태에 따라 서비스를 제공하는데, 위치권한을 허용하지않았을경우 상태와 메세지를 추가하였다.

BF

이 코드는 요청은 원활하지만 단순히 요청허용에 한정으로만 실행된다. 요청거부시 계속로딩되어 사용자에게 불편함을 줄 수 있다.

  // Geolocation API 로 유저의 위도,경도값 추출
  useEffect(() => {
    if ('geolocation' in navigator) {
      //현 브라우저가 Geolocation API를 지원하는지 확인
      navigator.geolocation.getCurrentPosition(
        //사용자의 현재 위치를 요청
        async (position) => {
          const { latitude, longitude } = position.coords;
          setLocation({ lat: latitude, lng: longitude });
          await getAddress(latitude, longitude);
        },
        (err) => {
          showErrorMsg(err.message, setError);
        },
        {
          enableHighAccuracy: true, // 정확도 우선 모드
          timeout: 60000, // 1분 이내에 응답 없으면 에러 발생
          maximumAge: 0 // 항상 최신 위치 정보 수집
        }
      );
    } else {
      console.log('오류가 발생했습니다.');
    }
  }, []);

AF

사용자가 거부했을시 거부했기때문에 서비스를 이용할 수 없다는 메세지를 전달하여 허용해야하는 이유를 설명해주었다.

  useEffect(() => {
    const checkGeolocation = async () => {
      if ('permissions' in navigator) {
        //현 브라우저가 Geolocation API를 지원하는지 확인
        try {
          const result = await navigator.permissions.query({ name: 'geolocation' }); //사용자의 위치정보에 대한 권한을 요청
          if (result.state === 'granted' || result.state === 'prompt') {
            //허용했을때, 처음위치권한요청시
            navigator.geolocation.getCurrentPosition(
              //사용자의 현재 위치를 요청
              async (position) => {
                const { latitude, longitude } = position.coords;
                setLocation({ lat: latitude, lng: longitude });
                await getAddress(latitude, longitude);
              },
              (err) => {
                showErrorMsg(err.message, setError);
                alert('위치 권한이 거부되었습니다. 허용하지 않으면 스탬프를 찍을 수 없습니다.');
              },
              {
                enableHighAccuracy: true, // 정확도 우선 모드
                timeout: 60000, // 1분 이내에 응답 없으면 에러 발생
                maximumAge: 0 // 항상 최신 위치 정보 수집
              }
            );
          } else if (result.state === 'denied') {
            // 위치 권한이 거부된 경우
            alert('위치 권한이 거부되었습니다. 허용하지 않으면 스탬프를 찍을 수 없습니다.');
            showErrorMsg('위치 권한이 거부되었습니다.', setError);
          }
        } catch (error) {
          console.log('권한을 확인하는 중 오류가 발생했습니다.', error);
        }
      } else {
        console.log('Geolocation API를 지원하지 않는 브라우저입니다.');
      }
    };
    checkGeolocation();
  }, []);

permissions :
navigator.permissions.query : 위치 권한 상태를 확인
granted : 허용
prompt : 권한요청중
denied : 거부

try catch문으로 1차적으로 오류상태와 정상상태를 걸러준다.
try중 허용/요청중/거부 상태에 따른 조건문을 추가하여 상태에 따라 코드를 분리한다. ```ts result.state === 'granted' || result.state === 'prompt'

-> 허용 || 권한요청중 => 위치 정보가져오는 기존코드 유지


```ts
result.state === 'denied'
-> 거부 => 관련알람메세지, 콘솔에러 출력

참고자료 Using the Permissions API- MDN geolocation 위치 권한 요청

[Next js] 인풋과 라벨 연결값 고정문제

Mon, 11 Nov 2024 00:50:48 GMT

//인풋과 라벨 연결값이 텍스트로 넣어놓음 -> 고정값으로 지칭하는 지역이름이 같아 계속 처음 지역에만 이미지가 넣어짐 //인풋과 라벨 연결값은 유니크한값으로 지역이름의 변수로 변경 -> 각 지역별로 이미지는 들어가지만 전체보기에서 파일자체가 열리지않음 //->기존 고정변수명+유니크한값으로 변수명을 수정함

[Next js] 년-월-일 날짜변환

Mon, 04 Nov 2024 00:59:37 GMT

(BF) 2024. 7. 11.

new Date(list.created_at).toLocaleDateString()

(AF) 2024년 7월 11일

new Date(list.created_at).toLocaleDateString('ko-KR', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                  })

[Next js] Dropdown 커스텀 훅

Mon, 04 Nov 2024 00:57:44 GMT

리스트가 길 경우를 대비해 드롭다운 기능을 넣고 커스텀훅으로 만들어서 재사용가능하도록 했다. 스르륵 애니메이션도 추가하겠다.

드롭다운 커스텀훅 만들기

//useDropdoun.ts
import { useState, useRef } from 'react';

const useDropdoun = () => {
  const [isOpen, setIsOpen] = useState(false);//디폴트-닫힘
  const dropdownRef = useRef(null); //기준점

  const toggleDropdown = () => { //토글할때마다 현재상태의 반대로
    setIsOpen((prev) => !prev);
  };

  return { isOpen, setIsOpen, toggleDropdown, dropdownRef };
};

export default useDropdoun;

드롭다운 사용할 컴포넌트에서 임폴트하기

//사용할 컴포넌트
import useDropdoun from '@/hooks/useDropdoun';

const StampItemDetail = () => {
  const { isOpen, toggleDropdown, dropdownRef } = useDropdoun(); //리턴한 state,이벤트 등 가져오기

   return (
         //ref 기준점 연결해주기
         //클릭시 토글이벤트
          히스토리
          
        
        {isOpen && ( //isOpen = true = 열렸을때만 아래코드적용
            리스트들...
        )}
    ...
   )

};

export default StampItemDetail;

애니메이션 적용하기

[Next js] 커스텀훅

Fri, 01 Nov 2024 05:42:10 GMT

기존 컴포넌트에서 state로 이벤트를 다 만들었는데 링크로 이동하는 디테일페이지에서도 이 동작이 필요해서 재사용성에 용이한 커스텀훅으로 쪼개보기로했다!

이미지 팝업열기 이벤트

기존

// AlbumList.jsx
const [imgModal, setImgModal] = useState(false);
const [selectedImgUrl, setSelectedImgUrl] = useState('');

//이미지팝업 상태에따라 모달이벤트
const onClickImgModal = (url: string) => {
    setSelectedImgUrl(url);
    setImgModal(true);
  };

return(
...
  //이미지 클릭시 모달창열리게
   onClickImgModal(item.photoImg)}
      src={item.photoImg}
      alt=""
      width={200}
      height={200}
      priority
      className="h-full w-full object-cover"
  />
 ...
 //모달창
 {imgModal && }
 ...
)

커스텀 훅 적용

//useImgModal.ts(커스텀훅)
import { useState } from 'react';

const useImgModal = () => {
    const [imgModal, setImgModal] = useState(false);
    const [selectedImgUrl, setSelectedImgUrl] = useState('');

    const onClickImgModal = (url: string) => {
        setSelectedImgUrl(url);
        setImgModal(true);
      };
  return {
   selectedImgUrl,
    imgModal,
    onClickImgModal,
    setImgModal,
  }
}

export default useImgModal;

// AlbumList.jsx
import useImgModal from '@/hooks/useImgModal';//임폴트

const AlbumList = () => {
    const { selectedImgUrl, imgModal, onClickImgModal, setImgModal } = useImgModal(); //사용할거 가져오기
...
//그대로 사용가능
}

참고자료 커스텀 훅

[Next js] 갤러리구현2 - 다중이미지 업로드

Tue, 29 Oct 2024 12:38:28 GMT

이 전 글에서 단일 이미지를 업로드하는건 가능했다. 이제 다중이미지를 업로드하도록 수정해야한다. 선택한 이미지 수만큼 데이터가 n개씩 추가되야한다.

파일 여러개 올리기

multiple 다중 이미지 선택

//AddPhotoBtn.tsx
const [imgSrc, setImgSrc] = useState("");

return (

);


#### (BF) 파일 업로드 시 액션
1. files변수에 클릭한 대상의 파일을 저장한다. 
2. 불러온값이 n개로 Array.from()로 배열화하고 반복문을 돌린다
3. 이미지데이터를 웹에서 미리보기할 수 있게 변환 후
4. Base64 인코딩된 데이터가 로드되고 타겟의 값이 문자열 + 존재할때 실행한다(유효성처리)
5. imgSrc = url담을 상태관리에 업데이트(이미지링크)
6. 파일을 선택했다면 카테고리 선택 모달창 열리게
```javascript
//AddPhotoBtn.tsx
  const OnChangePhoto = (e: React.ChangeEvent) => {
    const files = e.target.files; //클릭한대상의 이미지를 저장
    if (!files) return;//유효성체크

    Array.from(files).forEach((file) => {
      //N개를 배열로 만들어서 + 파일여러개일때 갯수만큼 순회
      const fileReader = new FileReader(); //파일읽기용 객체
      fileReader.readAsDataURL(file); //file저장
      fileReader.onload = (e) => {
        if (typeof e.target?.result === 'string' && e.target.result) {
          setImgSrc(e.target.result); 
          setIsRigionModal(true); //모달열기
        }
      };
    });
  };

1번째 문제) 반복문을 돌렸는데도 값이 마지막 하나만 데이터에 추가된다. 원인) ** 반복하면서 값이 마지막꺼로 씌워져서 마지막파일만 업로드되는것이다. **해결방법) 스프레드연산자로 이전값 + 다음데이터값 으로 값이 쌓이도록 변경 setImgSrc((prev) => [...prev, e.target.result]);

(BF) 모달에서 카테고리 선택후 업로드 버튼 클릭시

//AddPhotoBtn.tsx
   const onHandleUpload = () => {
    if (imgSrc.length > 0) {
        AlbumAddMutation.mutate({ imgSrc, regionCate //추가이벤트 호출
      });
      alert('앨범이 추가되었습니다.');
      setIsRigionModal(false);
    }
  };

2번째 문제) 데이터테이블에 값이 주소 문자열값만 들어가야하는데 ["주소"] 이렇게 들어가서 정상적인 url이 아니라는 오류가 발생한다. 원인) ** 1번째 트러블슈팅에서 다수의 이미지일 경우 값을 묶기 위해 배열을 사용해 묶어서 imgSrc 상태에 저장하였다. 배열로 묶은 통으로 값이 넘어가 정상url이 아닌것이다. **해결방법) 다수의 이미지일 경우 값을 배열로 쌓이게 묶고, 데이터테이블로 값을 전달할때 추가이벤트 호출하는 부분만 반복문으로 감싸 이미지url의 배열에서 N번째를 전달

imgSrc.forEach((src) => {
     AlbumAddMutation.mutate({ imgSrc: src, regionCate });
});

해결된 코드

(AF) 파일 업로드 시 액션

//AddPhotoBtn.tsx
  const OnChangePhoto = (e: React.ChangeEvent) => {
    const files = e.target.files; //클릭한대상의 이미지를 저장
    if (!files) return;//유효성체크

    Array.from(files).forEach((file) => {
      //N개를 배열로 만들어서 + 파일여러개일때 갯수만큼 순회
      const fileReader = new FileReader(); //파일읽기용 객체
      fileReader.readAsDataURL(file); //file저장
      fileReader.onload = (e) => {
        if (typeof e.target?.result === 'string' && e.target.result) {
          setImgSrc((prev) => [...prev, e.target.result]); //상태저장 + 순회하면서 저장하니가 값 쌓이게
          setIsRigionModal(true); //모달열기
        }
      };
    });
  };

(AF) 모달에서 카테고리 선택후 업로드 버튼 클릭시

//AddPhotoBtn.tsx
  const onHandleUpload = () => {
    if (imgSrc.length > 0) {
      imgSrc.forEach((src) => {
        AlbumAddMutation.mutate({ imgSrc: src, regionCate });
      });
      alert('앨범이 추가되었습니다.');
      setIsRigionModal(false);
    }
  };

new FileReader() : 웹 애플리케이션에서 파일을 비동기적으로 읽을 수 있게 하는 역할로 주로 사용자가 업로드한 파일을 읽을 수 있게 해준다.

readAsDataURL(파일) : 파일을 Base64 인코딩된 데이터 URL로 변환 => Base64 인코딩되면 웹에서 미리보기가능(엄~청 김!)

~~구글링 잘하자.. 값 잘 확인하자..디버깅 잘하자..~~

[Next js] Cannot read property 'default' of null

Tue, 29 Oct 2024 07:53:31 GMT

오류메세지)

TypeError: Cannot read properties of null (reading 'default')


        {albumListData?.map((item, index) => (
          
              
          
        ))}

원인) 전체앨범리스트에서 photoImg의 src값이 null/undefined이 있기때문에 src가 유효한 이미지로 정의되지않았던것이다.(빈 문자열도 작동) ~~-> 데이터 테스트를 한다고 이미지추가구현과 동시에 하다보니 null값이 하나 들어가있었다....~~

해결방법) {item.photoImg && (이미지태그)}

이미지url이 있을경우만 유효성처리해주기

데이터 테이블에 값 추가할때 이미지Url null값 안들어가게 유효성처리추가하기

수정코드)


       {albumListData?.map((item, index) => (
         
           {item.photoImg && (
             
           )}
         
       ))}

레퍼런스 이미지 입력받기 이미지 트러블슈팅1 이미지 트러블슈팅2

[Next js] 갤러리 구현1 - 이미지 업로드

Tue, 29 Oct 2024 07:51:46 GMT

supabase에서 앨범 전체 불러오기

// fatchAlbumList.ts
export const fetchAlbum = async () => {
  const { data, error } = await browserClient.from('album').select('*');

  if (error) {
    console.error('가져오기 오류4:', error.message);
  }
  console.log('data', data);
  return data;
};

앨범목록 useQuery로 data담기

//AlbumList.tsx
import { fetchAlbum } from '@/apis/fetchAlbumList';

const {
    data: albumListData,
    isLoading,
    isError
  } = useQuery({
    queryKey: ['photo'],
    queryFn: fetchAlbum
  });

탭기능 구현 (전체보기 | 지역별)

//AlbumList.tsx
const AlbumList = () => {
  const [imgSrc, setImgSrc] = useState('/images/default-image.png'); //이미지url
  const [activeTab, setActiveTab] = useState('allTab'); //탭상태

  //탭엑션
  const onClickTab = (tab: string) => {
    setActiveTab(tab);
  };

  //유저가 등록한 지역이름들(중복_지역이름제거)
  const filterRigionTitle = albumListData ? [...new Set(albumListData?.map((item) => item.region))] : [];
  //유저가 등록한 지역의 포토들
  const filterRigionPhoto = filterRigionTitle.map(
    (title) => albumListData?.filter((item) => item.region === title) || []
  );

  return (
    
      {/* 전체보기-지역별 탭버튼 */}
      
         onClickTab('allTab')}
        >전체보기
         onClickTab('rigionTab')}
        >지역별
      
      {/* 전체보기 */}
      {activeTab === 'allTab' && (
        
          
         ...
        
      )}
      {/* 지역별 */}
      {activeTab === 'rigionTab' && (
        
          
          ...
          
        
      )}
    
  );
};

파일 1개 업로드

파일에서 이미지 가져오기

accept="image/*" : 파일 중에서 이미지 파일만 입력

const [imgSrc, setImgSrc] = useState(''); 
//AddPhotoBtn.tsx
return (
    
      
      +
    
  );

업로드 이벤트

1.이미지선택 후 2.모달열기

//CategoryModal.tsx
  const OnChangePhoto = (e: React.ChangeEvent) => {
    const file = e.target.files?.[0];//클릭한대상의 이미지를 저장
    if (!file) return;
    const fileReader = new FileReader();//파일읽기용 객체
    fileReader.readAsDataURL(file);//파일읽기용에 file값 저장
    fileReader.onload = (e) => {
      if (typeof e.target?.result === 'string') {
        setImgSrc(e.target.result);//상태저장
        SetIsRigionModal(true);//모달열기
      }
    };
  };

모달에서 카테고리 선택후 업로드 버튼 클릭시

3.모달에서 카테고리 선택 후 버튼클릭시 데이터 추가하기

//AddPhotoBtn.tsx
const onHandleUpload = () => {
    if (imgSrc.length > 0) {
      AlbumAddMutation.mutate({ imgSrc, regionCate }); //데이터추가뮤테이션 호출
      alert('앨범이 추가되었습니다.');
      SetIsRigionModal(false); // 모달 닫기
    }
  };

레퍼런스 이미지 입력받기 이미지 트러블슈팅1 이미지 트러블슈팅2

TypeScript - 타입에러

Mon, 28 Oct 2024 05:36:11 GMT

주로 나타나는 타입에러들을 정리해보니 대부분 기대한타입이 아닌 undefined일 경우의 에러다. 예외처리를 꼭 한 번 더 체크하자.

1. TypeScript가 Set 객체를 반복할 수 없다는 경고

const stampImg = [...new Set(stampList.filter((item) => item.region === list).map((item) => item.stampimg))];
//Set 형식은 --downlevelIteration 플래그 또는 es2015 이상의 --target 을 사용하는 경우에만 반복할 수 있습니다.

tsconfig.json

    "target": "es6",
    "downlevelIteration": true, //이전 버전의 JS로 컴파일할 때, ES6 이상의 반복기능을 사용할 수 있도록(Set, Map, Array 사용가능)

2. 'undefined'일 때 할당불가 경고

if (!stampList) return console.log('데이터가 없습니다.'); //유효성 검사 추가(화면에는 안나오게 console 사용)

3. 컴포넌트가 올바른 JSX 요소 형식이 아니라는 경고

'StampList'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 '() => void | React.JSX.Element' 형식은 올바른 JSX 요소 형식이 아닙니다.

4. 'string[]' 형식은 'string' 형식에 할당할 수 없습니다.

//BF
const region = decodeURIComponent(params.id);

타입단언추가, params.id문자열로 반환

//AF
const region = decodeURIComponent((params.id as string[]).toString());

5. 이 타입형식에 '~~'이 없습니다

호출하는것의 타입 다시보기

//BF
const [stampData, setStampData] = useState(null);

//AF const [stampData, setStampData] = useState([]); //null값 안받고, 기본값도 배열로 변경

---

#### 6. 이 호출과 일치하는 오버로드가 없습니다.
- undefined일 수 있다 
- undefined여부 확인 / 예외 처리를 추가
```javascript
{stampData.map((list) => (
            
              {list.address}
              {new Date(list.created_at).toLocaleDateString()} //이 호출과 일치하는 오버로드가 없습니다.
            
          ))}

{list.created_at ? new Date(list.created_at).toLocaleDateString() : 'N/A'}

6-1. 이 호출과 일치하는 오버로드가 없습니다.

존재여부 확인 후 예외처리 추가

//BF
const oldestDate = stampData.reduce((oldest, current) => {
  const oldestDate = new Date(oldest.created_at);
  const currentDate = new Date(current.created_at);
  return currentDate < oldestDate ? current : oldest;
}, stampData[0]);

//AF const oldestDate = stampData.reduce((oldest, current) => { const oldestDate = oldest.created_at ? new Date(oldest.created_at) : new Date(); const currentDate = current.created_at ? new Date(current.created_at) : new Date(); //있냐? > 있으면 앞에꺼 없으면 뒤에꺼 return currentDate < oldestDate ? current : oldest; }, stampData[0]);


---
#### 7. 'undefined' 형식은 'SetStateAction' 형식에 할당할 수 없습니다.
- 배열을 기대했지만 undefined일 수 있다. 
- undefined일때 빈배열이 할당되게 수정
```javascript
//BF
const stampFilterList = res?.filter((item) => item.region === decodedParams);
//AF
const stampFilterList = res?.filter((item) => item.region === decodedParams) || [];

8. SetStateAction 이름을 찾을 수 없습니다.'Dispatch' 이름을 찾을 수 없습니다.

setVisit 값을 Prop으로 넘겨줬을때 interface 에서 setVisit 가 받는 타입을 알림창으로 정의해준다. 붙여줬을때 Dispatch, SetStateAction은 리엑트 패키지에서 불러와야한다.
```
import React, { useEffect, useState, Dispatch, SetStateAction } from 'react';
```

interface StampActivePropsType { address: AddressPropsType; setVisit: Dispatch>; visit: Boolean; stampList: any[] | null | undefined; //TODO: any 추후수정 } ```

[Next js] 인코딩과 디코딩

Sun, 27 Oct 2024 12:30:01 GMT

useParams 로 가져온 값 기준으로 데아터를 더 좁혀서 추출해야한다. 하지만 계속 빈값으로 추출된다. 원인은?

원인

: 난 당연히 useParams 로 가져왔을때 /서울 이라면 서울로 가져올 줄 알고 비교하는 코드를 짰는데 자꾸 빈값을 추출하길래 console을 찍어보니 아래 사진처럼 값이 나왔다..

해결법

-> 이거는 URL 인코딩된 문자열이라고 하는데 인코딩 : URL에서 사용할 수 없는 문자를 안전하게 변환하는 방법 -> 이런 이유로 내가 원하는 서울 그대로 쓰려면 디코딩을 해야한다. 디코딩 : 인코딩된 데이터를 원래의 형식으로 변환하는 과정 decodeURIComponent 함수 사용

const params = useParams(); //서울
const region = decodeURIComponent(params.id); //디코딩으로 새로 저장

  useEffect(() => {
    if (userId) { //로그인한 유저아이디가 있고
      const fetchData = async () => {
        try {
          const res = await fetchStampActive(userId); //로그인 유저의 스탬프 테이블 데이터 전체 가져오기
          const decodedParams = region; //디코딩된것 저장
          const res2 = res?.filter((item) => item.region === decodedParams); //전체데이터 중 디코딩된것과 값이 같은거만 추출
          setStampData(res2); //상태에 저장
        } catch (error) {
          console.error(error);
        }
      };
      fetchData();
    }
  }, [params.id, userId]);

코드 짜기전에 꼭 콘솔로 값 다 확인하기..꼭꼭.....

참고자료 자바스크립트에서 URL 인코딩, 디코딩 알아보기 mdn) decodeURIComponent()

[Next js]가장 오래된 날짜 구하기

Sun, 27 Oct 2024 11:52:53 GMT

날짜를 가지고있는 객체를 담은 배열에서 가장 오래된 날짜를 추출해야한다.

stampData_

시도1_(X)

  // 가장 오래된 날짜 구하기
  const oldestDate = stampData.map((list) => {
    return list.created_at.reduce((oldest, current) => {
      return current < oldest ? current : oldest;
    });
  });
  console.log('oldestDate', oldestDate);

문제점)

TypeError: list.created_at.reduce is not a function
list.created_at.reduce 이게 없다고 나옴
원인)
이유는 스트링이라 비교불가

시도2_(O)

  // 가장 오래된 날짜 구하기
  const oldestDate =
    stampData.reduce((oldest, current) => {
      const oldestDate = new Date(oldest.created_at); //비교대상날짜
      const currentDate = new Date(current.created_at); //비교할 기준점날짜
      return currentDate < oldestDate ? current : oldest;
    });

reduce는 기존에 map을 따로 사용안해도 reduce자체에서 순회하며 값을 비교하기때문에 map을 제거
문자열로 저장된 날짜를 값 비교를 위해 new Date 로 새로 변수에 담아준다.
날짜를 기준으로 삼항연산자 : currentDate < oldestDate 기준점(currentDate)이 oldestDate보다 오래된날짜라면 ccurrent : oldest true : current가 가장 오래된 날짜 false : oldest가 가장 오래된 날짜

참고자료 mdn) Array.prototype.reduce() reduce 함수란?

[Next js] 패치 비동기 함수에서 유저아이디가 안가져오는 문제(null, undefind)

Fri, 25 Oct 2024 13:27:33 GMT

userId는 잘 전해졌는데 계속 null 또는 undefind로 뜨는 문제

fetchStampActive.ts 패치 비동기 함수

//로그인유저의 스템프 항목 전부 + 스탬프 활성화된 데이터만
export const fetchStampActive = async (userId: string) => {
  const { data, error } = await browserClient.from('stamp').select('*').eq('user_id', userId).eq('visited', true);
  if (error) {
    console.error('가져오기 오류1:', error.message);
  }
  return data;
};

StampList 컴포넌트(BE)

수정01_ queryFn: () => fetchStampActive(userId!) -> null이 아님을 보장하는 ! 사용

'use client';
...
import { fetchStampActive } from '@/server/fetchStampList';

const StampList = () => {
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    //유저아이디 가져오기
  }, []);

  const {
    data: stampList,
    isLoading,
    error
  } = useQuery({
    queryKey: ['stamp'], //고유키
    queryFn: () => fetchStampActive(userId!),
  });
};

export default StampList;

수정02_ enabled: !!userId -> enabled: userId가 있을 때만 쿼리 실행 해결X : undefind 로 불러와짐..

queryKey: ['stamp'], 
queryFn: () => fetchStampActive(userId!),
enabled: !!userId // userId가 있을 때만 쿼리 실행

수정03_ -> 비동기문제인거같아 똑같이 async/await 붙여줌 -> userId값이 있는경우, 없는경우의 if문 추가

StampList 컴포넌트(AF) - 수정 완료

'use client';
...
import { fetchStampActive } from '@/server/fetchStampList';

const StampList = () => {
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    //유저아이디 가져오기
  }, []);

  const {
    data: stampList,
    isLoading,
    error
  } = useQuery({
    queryKey: ['stamp'], //고유키
    queryFn: async () => {
      if (userId) {
        return await fetchStampActive(userId);
      } else {
        return null;
      }
    },
    enabled: !!userId // userId가 있을 때만 쿼리 실행
   enabled: !!userId // userId가 있을 때만 쿼리 실행
  });
};

export default StampList;

supabase 로그인 유저 정보 가져오기

Fri, 25 Oct 2024 11:27:17 GMT

로그인 유저정보를 가져오는 방법으로 한 파일에 모두 불러오거나 파일분리로 하는법 두 가지를 모두 써보았는데 보기에는 파일분리가 더 깔끔해보인다. 텐스텍쿼리로 값을 연결지어서 쓰는법까지 같이 익혔다. 상황에 따라 맞는 방법을 쓰겠지만 난 이번에 2번째방법을 쓸거같다.

1번째 방법 - 한 컴포넌트에 getUser

userId 상태값 저장할 state 생성
useEffect 로 browserClient.auth.getUser() 감싸주기

->처음 랜더링됬을때 유저값 가져오기 ->browserClient.auth.getUser() : supabase에서 로그인된유저값 가져오는거 3. setUserId(데이터) 넣어서 userId값에 저장되도록 4. mutaion실행하는 이벤트함수(삭제클릭,추가클릭이벤트)에 인자로 userId 넘겨주기 5. supabase에 추가,삭제하는 뮤테이션함수(비동기)에서 인자로 userId 받기

- StampActive 컴포넌트

'use client';
...
//뮤테이션 함수 만들기(수파베이스 값 추가)
const addStampList = async ({
  ...
  userId
}) => {
  const { data, error } = await browserClient.from('stamp').insert({
    user_id: userId,
    ...
  });
  if (error) console.log('error', error);
  return data;
};

//뮤테이션 함수 만들기(수파베이스 값 삭제)
const deleteStampList = async ({ address, userId }) => {
  const { data, error } = await browserClient.from('stamp').delete().eq('address', address).eq('user_id', userId);
  if (error) console.error('삭제중 오류 발생:', error);
  return data;
};


const StampActive = ({ address }: StampActivePropsType) => {
  const queryClient = useQueryClient();
  const router = useRouter();

  const [userId, setUserId] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const { data, error } = await browserClient.auth.getUser();
      if (error || !data?.user) {
        router.push('/logIn');
      } else {
        setUserId(data.user.id);
      }
    };
    fetchUser();
  }, [router]);

  //useMutation(삭제)
  const StampDeleteMutation = useMutation({
    mutationFn: deleteStampList,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['nowStamp'] });
    }
  });
  //useMutation(추가)
  const StampAddMutation = useMutation({
    mutationFn: addStampList,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['nowStamp'] });
    }
  });

  //mutate 추가이벤트(방문안한 상태에서 누르면)
  const onClickVisitedAdd = (address: string, regionName: string) => {
    const visitedConfirmed = window.confirm('스탬프를 찍겠습니까?');
    if (visitedConfirmed) {
      StampAddMutation.mutate({ address, regionName, userId });
      console.log('스탬프가 찍혔습니다.');
    } else {
      return;
    }
  };
  //mutate 삭제이벤트(방문한 상태에서 누르면)
  const onClickVisitedCencle = (address: string) => {
    const cancelConfirmed = window.confirm('스탬프를 취소하시겠습니까?');
    if (cancelConfirmed) {
      StampDeleteMutation.mutate({ address, userId });
      console.log('스탬프가 취소되었습니다.');
    } else {
      return;
    }
  };

  //useQuery
  const {
    data: stampList,
    isLoading,
    error
  } = useQuery({
    queryKey: ['nowStamp', address.address_name], //고유키값
    queryFn: () => fetchStampList(address.address_name) // 주소를 인자로 넘김
  });
  if (isLoading) return Loading...;
  if (error) return Failed to load;
  console.log('address', address);
  const REGIONimageUrl = STAMPIMG_REGION_NAME[address.region_1depth_name];
...

2번째 방법 - 파일분리 ,함수 활용

패치비동기함수(.auth.getUser()) 파일분리 - fetchUser.ts
사용할 컴포넌트에서 import로 fetchUser.ts 불러오기
userId state 생성
useEffect로 처음 랜더링됬을때 패치함수 호출
setUserId(데이터) 넣어서 userId값에 저장되도록
useQuery에서 쿼리함수에 userId 인자로 넘겨주기
쿼리함수에서 인자로 userId 받아서 사용하기

- fetchUser.ts

import browserClient from '@/utils/supabase/client';

//로그인 유저 아이디 가져오기
export const fetchUser = async () => {
  const { data, error } = await browserClient.auth.getUser();
  if (error || !data?.user) {
    console.log('error');
  }
  return data.user?.id;
};
fetchUser();

- fetchStampList 컴포넌트

'use client';

import React, { useEffect, useState } from 'react';
import StampItem from '@/components/stamp/StampItem';
import { useQuery } from '@tanstack/react-query';
import browserClient from '@/utils/supabase/client';
import { fetchUser } from '@/utils/fetchUser';

//로그인유저의 스템프 항목 전부 가져오기
const fetchStampList = async (userId: string) => {
  const { data, error } = await browserClient.from('stamp').select('*').eq('userid', userId).eq('visited', true);
  if (error) console.error('가져오기 오류:', error.message);
  return data;
};

const StampList = () => {
  const [userId, setUserId] = useState(null);

  useEffect(() => {
    const checkUser = async () => {
      const user = await fetchUser();
      if (!user) return;
      else setUserId(user);
    };
    checkUser();
  }, []);

  const {
    data: stampList,
    isLoading,
    error
  } = useQuery({
    queryKey: ['stamp'], //고유키
    queryFn: () => fetchStampList(userId!) //!null이 아님 보장
  });
  if (isLoading) return Loading...;
  if (error) return Failed to load;

  return (
    {stampList?.map((stamp) => )}
  );
};

export default StampList;

레퍼런스 supabase 공식문서