🚩 useRef

React 공식문서에 따르면 useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook 이라고 한다.

플레이어를 구현하기 위해 가장 기본이 되는 것이 ref였다. ref는 DOM 요소와 연결하여 사용할 수 있기 때문에 비디오 컴포넌트에 연결하여 플레이어를 조작하면 비디오 컴포넌트의 상태가 변경되도록 설정해야했다.

ref의 설명과 여러 쓰임에 대해서는 React 공식 문서에 나와있으니 참고하면 좋을 것 같다. React useRef 공식 문서

공식 문서에서도 직접 ref의 사용법으로 플레이어 조작을 예시로 들어준다!

⏯️ 플레이어 구현하기

우리 프로젝트는 영상 공유가 아닌 노래 공유가 주 서비스였기 때문에 영상 컴포넌트는 hidden으로 숨기고 플레이어를 통해 소리만 재생될 수 있도록 해야했다.

⭐ UI 구조

const PlayButton = ({ music, id, post_id }: Props) => {
  const { playedVideo, setIsPlay, setPlayedVideo, playedPlayer, setPlayedPlayer } = useYoutubeStore();
  const playerRef = useRef<YouTubePlayer | null>(null);
  const [showYouTube, setShowYouTube] = useState(false);

  return (
    <>
      {showYouTube && (
        <div className="hidden">
          <YouTube videoId={id} onReady={(e: YouTubeEvent) => onReady(e, playerRef)} />
        </div>
      )}
      <div className="relative w-[50px] h-[50px] cursor-pointer" onClick={(e: React.MouseEvent) => handleClick(e)}>
        <Image
          alt={music.name + "앨범커버"}
          src={music.album.images}
          width={50}
          height={50}
          className="rounded object-cover"
          style={{ width: "100%", height: "100%" }}
        />
        <div className="w-[50px] h-[50px] bg-black/30 rounded absolute top-0"></div>
        <PlayIcon
          style={{
            width: "15px",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            fill: "white"
          }}
          id={music.id}
          post_id={post_id}
        />
      </div>
    </>
  );
};

export default PlayButton;

youtube가 들어가는 div는 hidden 으로 처리하여 숨기고 앨범 커버와 플레이 버튼을 만들어 해당 버튼으로 재생 조작이 가능하도록 설정했다.

처음 구현했을 때 메인 화면에서 로딩이 너무 길길래 왜인가 봤더니 피드형 사이트에서 한번에 모든 유튜브 비디오 컴포넌트를 렌더링하기 때문에 성능이 저하되는 것이었다. 그래서 showYoutube 라는 상태를 만들어 최초로 플레이 버튼을 눌렀을 때 컴포넌트가 렌더링 되도록 수정했다.

⭐ 플레이어 상태 관리

플레이어의 재생 상태를 제어하기 위한 값들은 zustand를 사용해 별도로 관리했다.

const useYoutubeStore = create<YoutubeStore>((set) => ({
  playedVideo: { id: "", isPlay: false, post_id: "" },
  playedPlayer: null,
  token: "",
  setPlayedVideo: (id: string, post_id: string) => set({ playedVideo: { isPlay: true, id, post_id } }),
  setIsPlay: () => set((state) => ({ playedVideo: { ...state.playedVideo, isPlay: !state.playedVideo.isPlay } })),
  setPlayedPlayer: (player: YouTubePlayer | null) => set({ playedPlayer: player })
}));

export default useYoutubeStore;

playedVideo = 현재 재생 중인 영상의 정보 playedPlayer = 현재 재생 중인 플레이어의(ref) 정보 token = spotify api 요청에 필요한 토큰 정보 setPlayedVideo = 재생 중인 영상 정보를 변경하는 함수 setIsPlay = 재생한 영상의 재생 상태만 변경하는 함수 setPlayedPlayer = 재생 중인 플레이어의 정보를 변경하는 함수

처음에는 playedPlayer를 제외하고 만들었는데 기존 영상이 재생 중일 때 다른 영상을 재생하면 선택한 노래들이 동시에 재생되는 문제가 있었다. 그래서 기존에 재생 중이던 영상의 상태를 제어하기 위해 플레이어를 정한 ref를 state로 만들어 제어가 가능하도록 만들었다.

⭐ 플레이어 제어 함수

const togglePlayVideo = async () => {
      // 처음 누르는 거면 플레이어 렌더링부터
    if (!showYouTube) {
      setShowYouTube(true);
    }

    // 틀었던 노래를 정지하거나 다시 재생할 때 (같은 노래를 두 번 이상 눌렀을 떄)
    if (playerRef.current && playedVideo.id === music.id && post_id === playedVideo.post_id) {
      if (playedVideo.isPlay) {
        playerRef.current.pauseVideo();
        setIsPlay();
      } else {
        playerRef.current.playVideo();
        setIsPlay();
      }
    }

    // store에 저장된 음악과 현재 누른 음악이 다를 때 (a 노래 듣다가 b 노래 틀었을 때)
    if (playedVideo.id !== music.id && playerRef.current && post_id !== playedVideo.post_id) {
      if (playedVideo.isPlay && playedPlayer) {
        playedPlayer.pauseVideo();
      }
      setPlayedVideo(music.id, post_id);
      setPlayedPlayer(playerRef.current);
      playerRef.current.playVideo();
    }
  };

여러 조건을 통해 원하는 방식으로 조작이 가능하도록 구현했다.

내가 사용한 react-youtube 라이브러리에서는 영상 컴포넌트가 로딩이 완료 되었을 때 ready 라고 현재 상태를 알려주는데 컴포넌트가 Ready 상태가 되었을 때 특정 동작을 수행할 수 있는 onReady 속성을 제공한다.

  const onReady = (e: YouTubeEvent, playerRef: MutableRefObject<YouTubePlayer | null>) => {
    // 렌더링 완료 되면 ref 연결하기
    playerRef.current = e.target;
    // 만약 이전에 재생 중이던 노래가 있으면 그 노래 멈추고
    if (playedPlayer) {
      playedPlayer.pauseVideo();
    }
    // 현재 노래 정보로 변경
    setPlayedVideo(music.id, post_id);
    playerRef.current.playVideo();
    setPlayedPlayer(playerRef.current);
  };

그래서 onReady 함수를 따로 만들어 showYoutube 후에 영상 컴포넌트가 렌더링, ready 상태가 되면 자동으로 노래를 재생하도록 구현했다.

💥 중복 노래 아이콘 동기화

초기에 구현했던 플레이어는 만약 한 피드에 A 라는 노래가 두 개 이상 있을 경우 플레이어의 재생 상태 자체는 독립적으로 제어됐지만 PlayIcon이 동기화 되는 문제가 있었다. A1을 재생하고 A2를 재생했을 때 A1은 정지 상태가 되어야하는데 다른 포스트 같은 노래에서도 계속 재생 아이콘이 보이는 문제였다.

const PlayIcon = ({ style, id, post_id }: Props) => {
  const { playedVideo } = useYoutubnStore();
  if (playedVideo.isPlay && playedVideo.id === id && post_id === playedVideo.post_id) {
    return <PauseCon style={style} />;
  }

  if (!playedVideo.isPlay || playedVideo.id !== id || post_id !== playedVideo.post_id) {
    return <PlayCon style={style} />;
  }
};

export default PlayIcon;

아이콘 컴포넌트는 이렇게 생겼는데 처음에 구현했을 때는 post_id가 아니라 music_id를 받고 있었기 때문에 발생한 문제였다. 플레이어는 스포티파이에서 music id를 받고 있었기 때문에 같은 노래는 같은 id를 갖고 있었다. 중복 문제를 해결하기 위해 music이 아닌 post id를 받는 것으로 문제를 해결할 수 있었다.

낙관적 업데이트

• 서버 통신 전에 상태를 먼저 업데이트 한 뒤 통신을 진행하는 방식이다.
• ex) SNS 등의 좋아요, 북마크 버튼 등
  • 사용자의 상호작용 직후 UI에 반영되어 사용자 경험을 높일 수 있다

1. 사용자의 상호작용
2. 서버 요청 전 클라이언트 상태(ui) 업데이트
3. 백그라운드에서 서버 통신 진행
4. 통신 성공 => 현재 상태 유지
5. 통신 실패 => 이전 상태로 롤백

React에서는 redux, zustand, context-api 등등 상태 관리 라이브러리를 사용하여 여러 방법으로 낙관적 업데이트를 구현할 수 있다.

나는 여러 프로젝트에서 서버 상태를 관리할 때 tanstack query를 사용했기 때문에 tanstack query의 onMutate, onError를 통해 낙관적 업데이트를 구현할 수 있었다.

tanstack query의 경우 서버 통신 후 데이터를 관리할 때 onError, onLoading, mutation, success 등의 여러 옵션을 통해 상태 관리와 오류 흐름을 간편하게 관리할 수 있어서 자주 사용했는데, 낙관적 업데이트 또한 빠르게 구현할 수 있어서 좋았다.

tanstak query 공식 문서

❤️ 좋아요 낙관적 업데이트 (코드)

실제로 구현한 코드는 아래와 같다.

// 좋아요 낙관적 업데이트
export const useToggleLikeButton = (
  user: User | null,
  postId: number,
  isLike: boolean,
) => {
  const queryClient = useQueryClient();

  const { mutate } = useMutation({
    // 서버에 좋아요 상태를 요청하는 함수
    mutationFn: () => toggleLike(user, isLike, postId),

    // 실제로 낙관적 업데이트를 수행하는 부분 (onMutate)
    onMutate: async () => {
      // query 요청 충돌을 방지하기 위해 기존 요청을 취소한다.
      await queryClient.cancelQueries({ queryKey: ["like", user?.id] });

      // prev 라는 이름으로 이전 상태가 될 현재 상태를 저장한다.
      const previousUserLikes = queryClient.getQueryData<Tables<"post">[]>([
        "like",
        user?.id,
      ]);

      // 서버 요청이 완료된 것처럼 UI 상태를 미리 업데이트한다.
      if (user?.id) {
        queryClient.setQueryData<Tables<"post">[]>(
          ["like", user.id],
          (old = []) => {
            if (isLike) {
              return old.filter((post) => post.post_id !== postId);
            } else {
              return [...old];
            }
          },
        );
      }

      return { previousUserLikes };
    },

      // 서버 요청에서 오류가 발생하면 아까 저장해둔 이전 상태로 다시 변경한다.
    onError: (err, variables, context) => {
      // 에러 시 유저의 좋아요 목록만 롤백
      if (user?.id) {
        queryClient.setQueryData(["like", user.id], context?.previousUserLikes);
      }
    },

      // 요청이 완료되면 쿼리 무효화를 통해 최신 서버 상태와 클라이언트 캐시를 동기화한다.
    onSettled: () => {
      // 모든 관련 쿼리 무효화
      queryClient.invalidateQueries({ queryKey: ["like", user?.id] });
      // 좋아요 개수 업데이트 해주기
      queryClient.invalidateQueries({ queryKey: ["like", postId] });
    },
  });

  return mutate;
};

주석으로 낙관적 업데이트의 흐름을 다시 파악해보았다. 처음 낙관적 업데이트를 구현할 때 가장 처음에 cancelQueries가 왜 필요한지 몰랐는데 검색해보니까 캐시가 덮어쓰이거나 하는 등의 충돌을 방지하기 위함이라고 한다. 그래서 오류 방지로 고분고분하게 쓰는 중...

말로만 들었을 땐 어려워 보여서 내가 이런걸 할 수 있다고예..? 했는데 막상 해보니까 코드만 길지 크게 어렵지 않아서 여기저기 쓰이면 좋을 것 같은 부분에 자주 쓰고 있다. 좋아요 버튼 눌렀는데 한 1초 2초 지나서 하트가 반짝이는 것 보다 즉시 눈에 보이는 게 사용자에게 더 좋을테니까~

🚩 setInterval과 setTimeout의 오차

앞서 작성했듯이 interval과 timeout은 특정 시간이 지난 후 실행되는 타이머 함수이지만 설정한 시간이 100% 지켜지지는 않는다. 1분마다 실행되는 interval을 설정했을 때 조금씩 시간이 밀린다는 것이다.

왜 이런 문제가 발생하는 걸까?

문제 발생의 원인에 대해서는 자바스크립트의 동작 원리에 대해 알 필요가 있다.

자바스크립트는 싱글 스레드 언어다! 싱글 스레드는 한 번에 하나의 작업만 수행할 수 있다는 뜻.

• 모든 함수 호출은 콜스택(Call Stack)에 저장되고, 순차적으로 실행된다.
• 현재 실행 중인 작업이 끝나기 전에는 다음 작업을 처리할 수 없다.

자바스크립트는 싱글 스레드로 동작하지만, 브라우저 내부 멀티 스레드인 Web API를 사용해 비동기 작업을 처리할 수 있다.

자바스크립트의 비동기 작업 호출된 함수는 콜스택에 저장 비동기 작업의 경우 Wep API에 전달한 뒤 백그라운드 작업이 완료되면 큐(Callback Queue)에 저장 콜스택이 비어있을 때 (진행 중인 작업이 없을 때) 큐에 있는 비동기 작업을 가져와 마무리

console.log("Start");
>
setTimeout(() => {
    console.log("Inside setTimeout");
}, 2000);
>
console.log("End");

1. console.log("Start") → 콜스택에서 실행
2. setTimeout → Web API로 전달
3. console.log("End") → 콜스택에서 실행
4. 2초 후 콜백 큐에 콜백 추가
5. 이벤트 루프가 콜스택이 비었는지 확인하고 콜백 실행
   따라서 출력 결과는 아래와 같다

   Start
   End
   Inside setTimeout

심지어는 같은 비동기 작업도 우선순위가 다르기 때문에 interval과 timeout이백그라운드 작업을 마치고 큐에서 대기중이더라도 콜스택에서 작업이 실행중이라면 추가적으로 기다리는 시간이 생겨 오차가 발생하는 것이다.

✅ 어떻게 해결할 수 있을까?

🚩 setInterval 대신 setTimeout을 재귀적으로 호출하기

내가 사용한 방법이기도 한데, setInterval을 사용해 1초 주기를 설정하는 것보다 setTimeout을 재귀적으로 호출하되 Date.now()를 통해 기준 시간을 정하고 남은 오차를 계산하여 동적으로 실행 간격을 조정하는 것이 오차를 최소화할 수 있는 방법이었다.

변경 전 코드

useEffect(() => {
  if (!isWithinTimeRange || !currentSchedule || !timerState?.is_running) return;
>
  const timerInterval = setInterval(() => {
    const totalElapsed = calculateElapsedTime(
      timerState.last_start,
      timerState.accumulated_time,
    );
    setTime(totalElapsed);
  }, 1000);
>
  return () => clearInterval(timerInterval);
}, [timerState?.is_running, currentSchedule, isWithinTimeRange]);

단순하게 setInterval을 사용하여 1초마다 경과 시간을 계산하는 로직을 만들었다. 이렇게 설정할 경우 콜스택에서 지연돠거나 작업이 길어질 경우 미세한 오차가 발생하고, 타이머 시간이 길어지면 길어질수록 오차가 커지게 된다.

변경 후 코드

  // 타이머 실행 중일 때 경과시간 계산하기
  useEffect(() => {
    if (!isWithinTimeRange || !currentSchedule || !timerState?.is_running)
      return;
>
    let timerId: NodeJS.Timeout;
>
    const tick = () => {
      const totalElapsed = calculateElapsedTime(
        timerState.last_start,
        timerState.accumulated_time,
      );
      setTime(totalElapsed);
>
      const drift = Date.now() % 1000;
      timerId = setTimeout(tick, 1000 - drift);
    };
>
    tick();
>
    return () => clearTimeout(timerId);
  }, [timerState?.is_running, currentSchedule, isWithinTimeRange]);

tick 이라는 타이머 함수를 만들어 경과 시간은 동일하게 계산한다. const drift = Date.now() % 1000; 를 통해 현재 시간의 밀리초를 구한 뒤 timerId = setTimeout(tick, 1000 - drift); 에서 다음 1초까지 남은 시간을 계산해 정확히 1초 뒤 실행될 수 있도록 한다.

• Date.now = 12:34:56.789 라면, drift = 123456789 % 1000 = 789 1000 - drift 는 즉 1000 - 789 따라서 남은 시간은 211ms 가 되고 211ms 후 다음 1초가 지나가는 시점에서 경과 시간을 다시 계산하게 된다.

이벤트 루프의 개념에 대해 도움이 되는 블로그 이벤트 루프 구조와 원리 setTimeout과 setInterval은 정확한 시간을 보장하지 않는다! 싱글 스레드 언어

기본형(원시형) 데이터

• 숫자, 문자열, 불리언, null, undefind 등
• 불변성을 갖는 데이터

참조형 데이터

• 객체, 배열, 함수, 날짜, 정규식 등
• 가변성을 갖는 데이터

❓ 기본형과 참조형의 구분 기준

가변성과 불변성이란 무엇일까? var a = 2 a = 4 이러면 값이 2에서 4로 변경될텐데, 그럼 이것도 변하는 데이터 아닌가?

데이터의 불변성 여부는 데이터 영역 메모리의 변경 가능성으로 판단한다.

📝 메모리와 데이터

컴퓨터의 모든 데이터는 바이트 단위의 식별자, 메모리 주소값을 통해 서로를 구분하고 연결할 수 있다

식별자 = 변수명 어떠한 데이터를 식별하는 데 사용하는 이름 변수 변할 수 있는 값(데이터)

변수를 선언하고 할당하는 과정에서 메모리 영역은 어떤 작업을 수행하는지 간단하게 정리해봤다.

var a = 2 선언과 할당

a = 4 재할당

분명 a의 값은 2에서 4로 바뀌었지만 참조하는 값이 변경되었을 뿐, 기존 데이터를 수정하지 않고 새 값을 생성했기 때문에 불변성을 가져 기본형 데이터라고 한다. (숫자, 문자열, null 등등)

그럼 참조형 데이터는 어떨까?

객체의 선언과 할당

var obj = {
    a : 1,
    b : "b"
};

obj.a = 2 재할당

재할당 후에도 obj가 참조하는 값은 데이터3 그대로이다. 결과적으론 데이터3의 값이 변경되었다는 것과 같은 뜻이라 가변성을 가져 참조형 데이터라고 한다.

📝 변수의 복사

기본형 데이터 복사 var a= 10 var b = a

기본형 데이터의 경우 참조하는 값을 복사한다.

a = 20 재할당을 하면 어떻게 될까?

a = 20, b = 10, a !== b 기본형 데이터의 복사는 이렇게 이루어진다.

참조형 데이터 복사 var obj1 = { a: 1, b: "b" } var obj2 = obj1

참조형 데이터도 기본형과 같이 참조하는 값을 복사한다.

obj1.a = 2 재할당을 하면 어떻게 될까?

기본형 데이터와 다르게 참조하는 값은 동일하나 참조하고 있는 값의 내부에서 값이 변경된다. obj1 = {a: 2, b: "b"}, obj2 = {a: 2, b: "b"} obj1 === obj2 참조형 데이터의 복사는 이렇게 이루어진다.

다만 위 예시의 obj1.a = 2 처럼 내부 프로퍼티를 변경하는 게 아닌, obj1 = {a: 2, b: "b"} 과 같이 변수(obj1)의 값을 직접 변경하는 경우 참조형 데이터임에도 참조하는 값이 변경된다.

이를 통해 참조형 데이터의 가변성은 변수의 값 자체를 변경하는 게 아닌, 내부 프로퍼티를 변경할 때에만 적용된다는 것을 알 수 있다.

그 과정에서 내가 담당했던 프로필 수정과 관련된 최적화 경험을 작성해보려고 한다.

프로필 이미지 로딩 개선

💥 문제 상황

프로필 이미지를 사용하는 모든 페이지에서 프로필 이미지의 로딩이 과하게 길어지는 문제가 발생했다. 특히, 마이 페이지에서 사용하는 프로필 이미지의 경우 페이지 진입 시 가장 상단에서 제일 먼저 보이는 요소이기 때문에 빠른 해결이 필요한 상황이었다.

🔥 문제 파악

어디서 문제가 발생하는지 찾기 위해 프로필 이미지를 사용하는 모든 컴포넌트를 확인한 결과, DB의 user 테이블에 이미지 주소가 아닌, 스토리지에 저장되어 있는 파일 이름을 저장하고 있었기 때문에 유저 이미지를 불러오기 위해 매번 getPublicUrl 요청을 하고 있는 것을 확인할 수 있었다.

  const profileImg = browserClient.storage
    .from("profile_img")
    .getPublicUrl(user?.profile_img ?? "default").data.publicUrl;

이는 프로필 이미지 변경 시, 스토리지에 파일을 저장한 후 주소를 요청하지 않고 user 테이블에 파일 이름만 저장하고 있었기 때문에 발생한 문제였다.

// 프로필 업데이트
export const updateUserProfile = async (name: string, img: string) => {
  const user = await fetchSessionData();
  if (!user) {
    throw new Error("로그인 상태가 아님");
  }

  await browserClient
    .from("user")
      // 여기에 들어가는 img가 주소가 아닌 파일 이름
    .update<TablesUpdate<"user">>({ name, profile_img: img })
    .eq("id", user.id);
};

✅ 문제 해결

user 테이블의 프로필 이미지의 기본 값을 기본 이미지 주소로 변경 후, 프로필을 수정할 때 스토리지에 저장한 파일의 주소를 받아 해당 주소를 저장하는 것으로 변경하여 불필요한 api 요청을 제거하여 로딩 속도를 개선할 수 있었다.

 const profileSaveHandler = async () => {
       // 이미지를 변경했을 경우
    if (fileInputRef.current?.files && fileInputRef.current.files.length > 0) {
        // 새 이미지를 스토리지에 저장
      const { error } = await browserClient.storage
        .from("profile_img")
        .upload(`${user?.id}`, fileInputRef.current.files[0], {
          upsert: true,
        });

      if (error) {
        return;
      }
        // 저장한 이미지의 주소 요청
      const url =
        browserClient.storage.from("profile_img").getPublicUrl(user.id).data
          .publicUrl +
        "?t=" +
        Date.now();
        // 실제로 프로필을 수정하는 함수로 이미지 주소 보내기
      updateProfile(url);
      return;
    }
    // 이미지 변경 안 하면 기존 주소로 전송
    updateProfile(user.profile_img);
  };

📝 후속 처리 / priority 와 loading=eager

모든 페이지에서 이미지 로딩 속도가 개선되었으나, 마이 페이지에서는 로딩이 바로 되었으면 좋겠어서 Next Image 태그에 속성을 추가하여 해결했다.

priority 속성 priority 속성은 Next.js 에서 제공하는 Image 컴포넌트의 속성으로 특정 이미지를 초기 페이지 로딩시 우선적으로 로드하도록 설정하는 속성이다. 이 속성이 적용된 이미지는 preload 태그를 통해 브라우저에 우선 로딩 요청을 보내어 브라우저가 해당 이미지를 우선적으로 로드할 수 있도록 한다.

비슷하게 HTML 기본 속성인 loading="eager" 설정이 있는데 두 속성은 차이가 존재하며 Next 에서도 prioriry 속성 사용을 권장하고 있다.

priority 속성과 loading="eager"의 차이 loading eager 속성은 이미지를 즉시 로드하도록 설정하는 HTML 표준 속성이다.

• priority는 Next.js의 이미지 최적화 메커니즘과 함께 작동하기 때문에, 성능을 유지하면서도 중요한 이미지를 우선적으로 로드할 수 있다. 반면, loading="eager"는 브라우저의 기본 동작을 바꾸는 것일 뿐, 최적화 기능이 없어서 예상치 못한 성능 저하가 발생할 가능성이 있다.

웹 성능 지표 중 하나인 LCP(사용자가 페이지를 로드할 때 가장 큰 콘텐츠가 화면에 렌더링되는 시간)는 사용자 경험에 있어 아주 중요한 부분인데, priority 속성을 추가함으로써 해당 부분을 많이 개선할 수 있었다.

얼마 전, 부트캠프를 끝내고 사회로 나아가기 위한 첫걸음을 시작했다.

이제는 더 이상

진짜로 물러날 곳이 없어졌다. 나는 취업을 해야하니까...

취업 준비를 시작하기 전에 문득, 신입은 여기저기서 쏟아져 나올텐데 과연 내가 취업을 빠르게 할 수 있을까? 라는 생각이 들었다. 나는 비전공자에 학력도 부족하고 실력적으로 뛰어나냐 물으면 그것도 아닌 것 같고... 협업 경험이 아주 많냐 당연히 그것도 아니고... 외국어를 특별히 잘하는 것도 아니다.

이런 내가 어떻게 하면 취업을 잘 할 수 있을까? 가만히 고민해봤다.

내가 좋아하는, 성장할 수 있는 분야를 먼저 찾아보자!

흔히들 말하는 가고 싶은 회사 를 먼저 찾아보자는 게 내 결론이었다.

일을 할 때, 목표가 없이 하진 않는다. 명예, 돈, 자기만족 등등... 사람들이 일을 하는데에는 많은 이유가 있겠지만 그 중에서도 내가 일을 하는 것에 가장 큰 영향을 주는 건 흥미와 즐거움 이라고 생각했다.

실제로 나는 재미있는 일을 할 때 효율이 최대로 올라가는 편이고 지금까지 많은 걸 공부해봤지만(영상, 3D 모델링, 디자인, 미용 진짜 많기도 함) 개발만큼 재미있는 건 처음이었다.

그치만 개발 자체가 재미있을 뿐, 어떤 특정한 회사에 가고 싶다 하는 목표가 없다. 같은 직업을 갖더라도 어떤 회사에 가냐에 따라서 하는 일은 달라지기 마련이다. 일만 달라지냐? 내가 배워야할 것들도 달라지기 마련이다. 어차피 어딜 가던 나는 새로운 걸 배우고 공부해야할텐데, 그럼 대체 나는 어떤 걸 배우고 싶을까? 하는 생각을 하며 산업 분야에 대해 찾아보았다.

📚 도메인 지식이란?

특정한 전문화된 학문이나 분야의 지식으로, 어떠한 시스템이 운영되는 환경에 대한 지식을 말한다. 시스템의 산업, 서비스, 제품의 이해, 사용자에 대한 이해까지도 포함될 수 있다.

그럼 나는 어떤 도메인 지식을 쌓아야할까? 이걸 알기 위해서는 기업이 어떤 분야로 나누어 지는지, 어떤 기술을 중점적으로 사용하는지에 대해 알아야할 필요가 있다.

✅ 산업 분야의 종류

산업 분야는 아주 다양하고 세분화 되어있지만 대략적으로 나누면 아래와 같다.

1. 이커머스 / 쇼핑몰
2. 핀테크 / 금융
3. 의료 / 헬스케어
4. 게임
5. 미디어 및 엔터테인먼트
6. 보안
7. 교육 기술
8. 포털 / 소셜미디어

플랫폼은 너무 광범위해서 제외했다.

⭐ 각 분야의 중점 기술

• 이커머스

  사용자 경험 중시, 검색 최적화, 결제 서비스, 배송 시스템

• 핀테크

  서비스의 디지털화, 보안 시스템

• 헬스케어

  데이터 시각화, 의료 기기와 서비스의 통합 또는 동기화

• 게임

  실시간 통신, 애니메이션 등

• 미디어 및 엔터테인먼트

  콘텐츠 스트리밍 UI, 사용자 분석 및 맞춤형 서비스

• 보안

  데이터 암호화 및 보안, 인증 UI 등

• 교육 기술

  학습 관리 시스템, 강의 스트리밍 UI, 학습 데이터 시각화 등

• 포털/소셜미디어

  피드 및 실시간 알림, 대규모 데이터 처리 등

참고하면 좋은 글

나는 원래 게임을 너무 좋아해서 게임 회사에 취직하는 게 목표였는데(그냥 내가 재밌을 것 같았음) 생각해보니 게임 개발을 직접 할 수 있는 게 아니니까 다른 분야를 공부해보는 것도 좋지 않을까 하는 생각이 들었다. 다들 입이 닳도록 말하는 네카라쿠배당토도 물론 꿈의 기업이지만 나는 좀 더 주도적으로 개발할 수 있는 기회가 있었으면 한다. 요즘은 RN에도 관심이 좀 생겨서 배워볼까 싶고... 프론트 개발을 배워보니까 하고 싶은 게 많아져서 큰일이다.

내일부턴 최종 프로젝트 코드를 정리하고, 실제 구인글을 찾아보며 선호하는 기술 스택을 정리하는 시간을 가져볼 예정이다.

문제 상황

• 일정 종료 시점에서 그룹 랭킹 점수를 계산하기 위해 계산기 함수를 실행하는데 점수 집계가 정상적으로 동작하지 않음.
• 계속해서 0점으로 표시되어 집계가 됨. (조건을 충족했음에도)
  

원인 분석

1. 함수가 실행되는지 console 확인
2. 계산기 함수 내에 전달되는 인자가 제대로 된 값인지 확인

        const score = calculateScore(member.length, achievers, {
          start_time: schedule.start_time,
          end_time: schedule.end_time,
        });
        setStudyScore(score);

해결 방안과 선택 이유

• console 출력 결과 함수 인자 중 achievers 가 null로 반환되는 것을 확인

• 쿼리 무효화 후 계산 함수를 실행하는데 이 부분에서 쿼리 무효화 이후 데이터 받아오기 전에 계산기 함수가 실행되는 것으로 파악됨

    const handleScheduleEnd = async (schedule: Tables<"calendar">) => {
        try {
          console.log("스케쥴", schedule);
          // 1. 달성자 목록 새로 가져오기
          await queryClient.invalidateQueries({
            queryKey: ["achievers", studyId, schedule.calendar_id],
          });

• invalidateQueries 말고 refetch 옵션을 사용하여 확실하게 최신 데이터를 패칭 후 계산 함수가 동작할 수 있도록 처리.

      const handleScheduleEnd = async (schedule: Tables<"calendar">) => {
        try {
          const { data: achievers = null, error } = await refetchAchievers();
          if (error) {
            console.error("Achiever refetch error:", error);
            return;

• 해당 과정을 진행하여 계산 함수가 정상적으로 동작하고 일정 종료 후 랭킹 점수가 집계되는 것을 확인했습니다.

  
  

성과 및 교훈

• refetch 를 많이 사용을 해보지 않아서 새 데이터가 필요할 때 무조건 invalidateQueries 를 사용하고 있었는데 해당 오류를 통해 invalidateQueries 와 refetch 사용해야하는 경우의 차이점에 대해 느낄 수 있었습니다.

최종 프로젝트에 들어가는 타이머 기능을 구현하기 위해 useEffect, setInterval을 사용했다.

✅ 간단 설명

useEffect

• 컴포넌트가 렌더링 완료된 시점에서 실행되는 리액트 훅.
• 의존성 배열에 값이 있을 경우 해당 값이 변경되었을 때만 실행됨.
• 의존성 배열이 빈 배열일 경우 컴포넌트 최초 렌더링 시에만 실행됨.
• useEffect 안에 실행될 interval을 넣고 타이머의 재생 상태가 변경될 때마다 실행되도록 설정함

interval

• 지정된 시간마다 특정 로직을 반복하게 하는 함수
• 타이머가 재생 상태일 때 1초마다 경과시간을 계산하는 함수를 넣어 UI에 표시되도록 설정함.

supabase 테이블 구조

• 
• user, study id 저장 => 어디 스터디인지 누구 타이머인지 확인
• date => 오늘의 타이머인지 확인
• last_start, last_paused => 마지막 시작, 정지 시간 확인 (경과시간 계산용)
• accumulated_time => 누적시간

✅ 주요 로직

1. 실제로 타이머가 1초씩 들어나도록 ui 반영

    const timerInterval = setInterval(() => {
      const totalElapsed = calculateElapsedTime(
        timerState.last_start,
        timerState.accumulated_time,
      );
      setTime(totalElapsed);
    }, 1000);

• 해당 interval은 타이머가 재생중일 때만 실행됨.
• 1초마다 경과시간을 재계산하여 time 상태를 set하고 있음 => 1초마다 ui 변경

2. 캘린더에 등록된 시간이 지나면 자동으로 정지

      const timeCheckInterval = setInterval(() => {
      const isValid = checkTimeRange(currentSchedule);
      setIsWithinTimeRange(isValid);
      if (!isValid) {
        updateTimerState("pause");
      }
    }, 1000);

• 마찬가지로 타이머가 재생중일 때만 실행됨.
• 1초마다 현재 시간과 캘린더에 등록된 시간을 비교하여 지금이 스터디 시간인지 확인
• 만약 시간 범위를 벗어나면 즉시 타이머 종료

3. 경과 시간 계산 함수

  const calculateElapsedTime = (
    lastStartTime: string | null,
    accumulatedTime: number,
  ) => {
    if (!lastStartTime) return accumulatedTime;

    // UTC 시간을 기준으로 시간차 계산
    const start = Date.parse(lastStartTime);
    const now = Date.now();
    return accumulatedTime + Math.floor((now - start) / 1000);
  };

• 계산이 필요한 시점에(첫 렌더링 타이머 세팅, interval 계산) 호출하여 사용.
• 시작 시간, 누적 시간을 인자로 받음
• 시작 시간이 없을 때 => 일시정지 상태일때 지금까지 누적 시간을 반환
• 시작 시간이 있을 때 => 재생 상태일때 누적시간 + (현재-시작)(경과시간) 계산하여 반환

✅ 결과!

이번에 타이머 기능을 구현하면서 supabase DB에 있는 timestamp 타입의 데이터를 많이 다루게 되었는데, 그 과정에서 time zone에 대해 대수롭지 않게 여겼다가 황당한 오류로 하루를 날렸다.

테이블 컬럼 타입을 변경하면서 오류는 해결되었지만, 정확히 without time zone과 with time zone의 차이를 이해하고자 블로그를 작성해보려고 한다.

대충 차이는 알겠는데, DB 상에서 timestamp와 timestampz이 동일한 형식으로 출력이 되고 있어서 아예 눈치채지 못하고 있었다.

🥹 그래서 그게 뭔데?

** timestamp without time zone**

• 시간대 정보를 포함하지 않는 타임스탬프 형식
• 입력한 시간 값이 그대로 저장
• 시간대 변환 없이 시간만 저장하고자 할 때 사용, 같은 데이터베이스를 다른 시간대에서 조회하더라도 동일한 시간 값으로 나타남
• ex) 2023-10-31 15:00:00

** timestamp with time zone**

• 시간대 정보를 포함한 타임스탬프 형식
• 입력한 시간 값이 UTC로 변환되어 저장
• 조회 시 클라이언트 세션의 시간대에 맞춰 자동 변환
• 글로벌 애플리케이션에서 각 사용자의 시간대에 맞는 시간 정보를 저장하거나 보여줄 때 유용
• ex) 2023-10-31 15:00:00+09 (한국 시간대에서 입력한 경우)

예시를 들어 설명하자면 한국 시간대(UTC+9)에서 2023-10-31 15:00:00을 저장한다고 할 때 timestamp without time zone : 2023-10-31 15:00:00 timestamp with time zone : UTC로 변환되어 2023-10-31 06:00:00으로 저장, 조회 시 자동 변환.

new Date() 자바스크립트의 new Date() 함수는 현재 사용자의 시간을 타임존을 포함하여 반환. new Date().toISOString() toISOString 메서드는 타임존 시간을 UTC 기준의 string으로 변환.

supabase에 timestampz타입에 데이터를 넣을 때 문자열 타입으로 넣어야해서 toISOString() 변환 후 insert 하면 불러올 때 자동으로 변환이 되어서 문제없이 사용할 수 있다.

회원 탈퇴 완성

회원 탈퇴 기능이 드디어 완성됐다.

  const deleteUserHandler = async () => {
    setIsModalOpen(false);
    await deleteUser();
    await queryClient.invalidateQueries({ queryKey: ["user", "session"] });
    router.push("/");
  };

기존에 탈퇴 후 유저 정보가 남고 로그아웃 처리가 안되어서 조금 꼬이는 문제가 있었는데, 삭제 => 로그아웃 => 세션 정보 초기화 => 메인 페이지 이동 이렇게 변경함으로써 깔끔하게 해결되었다!

이렇게 기능 하나, 문제 하나 해결할 때 마다 대단한 게 아니어도 내 실력이 차근차근 늘어가고 있다는 기분이 들어서 뿌듯하고 기쁘다. 생각보다 회원 탈퇴에 대한 글? 같은 것도 많이 없어서 공식 문서랑 블로그 하나 보고 한땀한땀 짰는데...🥹

타이머 기능 구상

제일 걱정이 많았던 타이머 기능. 마이 페이지를 최대한 빨리 끝내려고한 것도 다 이것 때문이다.

1. 각 strudy 마다 캘린더에 일정을 등록하면 캘린더 테이블에 날짜, 시작 시간, 종료 시간이 등록됨
2. 만약 study 일정이 있는 날이라면 유저에게 타이머가 보임
3. 타이머는 시작과 일시정지가 가능하고 0부터 시작하는 누적시간형
4. 스터디의 일정에 등록된 시간에만 활성화됨
5. 타이머는 유저가 개인으로 갖고 스터디 시간을 기록할 수 있음
6. 새로고침하거나 다른 페이지에 다녀와도 타이머 정보가 유지되어야함
7. 스터디의 일정 시간이 끝나면 자동으로 종료됨 -> 종료 될 때 유저 테이블에 스터디 타임으로 저장(누적 시간으로 쌓을 것임)
8. 하루가 지나면 다시 0으로 초기화

구현 사항은 이정도가 있는데 직접 어떻게 구현해야하나 한줄씩 적으면서 보니까 크게 어렵진 않아보이고... 제일 복병은 supabase 리얼타임 테이블 구독? 사용법이랑 시간 계산 로직이 아닐까 싶다.

// 일단 오늘 날짜 계산해서 캘린더에 eq 스터디 아이디, 날짜 찍어서 일정 있는지 확인하기 => 없으면 없다고
// 일정이 있으면 타이머 조회하기 => 타이머에 유저, 스터디, 날짜 있으면 그거 불러오고 없으면 타이머 그냥 0
// 현재 시간이 캘린더 일정 시간 사이인지 확인하기 => 해당 시간이면 시작 / 일시정지 활성화

// 타이머 처음 누를 때
// 처음 시간은 0 => 시작 누르면 creat_at 에 현재 시간 넣고 타이머 0부터 시작하기 => 이즈러닝 트루 변경
// 중간에 멈추면 라스트 업데이트에 현재 시간 넣고 이즈러닝 펄스
// 다시 시작하면 라스트 스타트에 현재 시간 넣고 이즈러닝 트루

// 이미 시작했었던 타이머
// 러닝 false인 경우 생성 시간 ~ 라스트 업데이트 로 경과 시간 계산
// 러닝 true인 경우 생성 시간 ~ 라스트 업데이트 + 라스트 스타트 ~ 현재 시간 더해서 경과 시간 계산

내일부터는 이렇게 적어둔 메모를 한줄씩 코드로 만들어볼 생각이다. 늦어도 수요일에는 완성이 되어서 미완성된 다른 기능들 시작하고 싶은데 열심히 하면 되겠지?!

supabase 회원 탈퇴를 위해서는 service role key를 사용하는 클라이언트를 생성하여 API요청을 해야하는데, 이 service role key는 노출이 되면 안되는 키라 서버에서 처리를 해야한다.

Next.js 는 간단한 백엔드 로직을 구현할 수 있도록 route handler 라는 기능을 제공하고 있으니, 이 방법을 사용해서 회원탈퇴를 구현했다.

🚩 Auth Client 생성하기

사용법에 대한 공식문서

먼저, supabase auth 스키마에 있는 user 정보를 변경하거나 삭제하기 위해서는 admin이라는 api 요청을 해야한다. 이 요청은 위에 적었듯이 서비스 롤 키로 사용이 가능하고, admin 요청을 위한 클라이언트를 따로 만들어야하기 때문에 이 과정을 첫번째로 실행해야 한다.

처음엔 어떻게 설정하라는 건지, 꼭 해야하는 건지 몰라서 헤멨는데 이 블로그에서 도움을 많이 받았다.

export function createAuthClient() {
  const cookieStore = cookies();
  // Create a server's supabase client with newly configured cookie,
  // which could be used to maintain user's session
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    // env.local 에다가 key 넣어 놓기
    process.env.SUPABASE_SERVICE_ROLE_KEY!,
    {
      auth: {
        autoRefreshToken: false,
        persistSession: false,
      },
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options),
            );
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  );
}

이미 createClient 를 많이 사용하고 있어서 false true를 넣진 못했고, 그냥 AuthClient 라고 따로 분리해서 만들었다. key 부분에 서비스 롤 키를 넣어주면 사용할 수 있다.

🚩 route handler 설정

회원 탈퇴 기능 구현에서 제일 중요한 부분이다!!

app/api/delete-user/route.ts 해당 경로에 파일을 만들었다.

그리고 사용할 땐

// 회원 탈퇴 라우트 핸들러 사용
export const deleteUser = async () => {
  const res = await fetch("/api/delete-user", {
    method: "DELETE",
  });
  const data = await res.json();

  if (res.ok) {
    console.log(data.message);
  } else {
    console.error(data.error);
  }
};

저렇게 경로와 메서드를 지정해주면 된다.

DELETE 요청이니까 라우트 핸들러 안에서도 DELETE 로직을 작성해주어야 한다.

export async function DELETE() {
  // 서비스 롤 키 넣어서 만든 Auth 클라이언트
  const supabase = createAuthClient();
  // 회원 탈퇴 요청시 user ID가 필요해서 gerUser 요청
  const {
    data: { user },
    error: userError,
  } = await supabase.auth.getUser();

  // user가 없거나 에러가 발생하면 에러 메세지를 반환한다
  if (userError || !user) {
    console.error("Authentication error:", userError);
    // 이게 아까 요청한 deleteUser 의 반환값으로 날아감
    return NextResponse.json(
      { message: "User not authenticated" },
      { status: 401 },
    );
  }

이 부분에서 헷갈렸던게, 어디서 getSession을 사용하라고 해서 getSession을 넣었는데

Using the user object as returned from supabase.auth.getSession() or from some supabase.auth.onAuthStateChange() events could be insecure! This value comes directly from the storage medium (usually cookies on the server) and many not be authentic. Use supabase.auth.getUser() instead which authenticates the data by contacting the Supabase Auth server.

이런 경고 문구가 떴다. 무슨 말인가 돌려보니

supabase.auth.getSession()이나 supabase.auth.onAuthStateChange() 이벤트에서 반환되는 user 객체를 그대로 사용하는 것은 보안에 취약할 수 있습니다. 대신 supabase.auth.getUser()를 사용하면, Supabase Auth 서버에 직접 데이터를 요청해 사용자 정보를 인증하게 되어 보안이 강화됩니다.

그래서 getUser로 바꿨다... 그런데 저번에 getUser, getSession 차이 찾아봤을 때도 서버에서는 getUser, 클라이언트에서는 getSession 사용을 권장한다고 나왔는데, 나는 어디서 getSession을 사용하라는 말을 본걸까...?

아무튼 메인적으로 요청이 되는 부분은 저 로직이고, 그 후에 에러나 완료 메세지를 위해 추가적으로 코드를 덧붙였다.

  try {
    console.log("Attempting to delete user:", user.id);
    const { error } = await supabase.auth.admin.deleteUser(user.id);

    if (error) {
      console.error("Error deleting user:", error);
      return NextResponse.json({ message: error.message }, { status: 500 });
    }

    return NextResponse.json(
      { message: "User deleted successfully" },
      { status: 200 },
    );
  } catch (err) {
    console.error("Unexpected error:", err);
    return NextResponse.json(
      { message: "An unexpected error occurred" },
      { status: 500 },
    );
  }
}

실제로 삭제가 요청되는 부분은 try catch로 작성했고, 오류 상황에 따라 다른 메세지를 출력하도록 했다. 오류 없이 작업이 끝나면 200 응답이 날아간다.

💥 DELETE http://localhost:3000/api/delete-user 500 (Internal Server Error)

로직도 잘 작성했고, 콘솔도 찍히는데 회원 탈퇴가 안되고 해당 오류가 반환됐다. 사실 이 오류를 보고나서 어디서 문제가 생기는 건지 확인하기 위해 위에서 에러 응답을 추가한건데

Error deleting user: AuthApiError: Database error deleting user

다시 시도했을 때 에러메세지가 이렇게 출력이 됐다. Error deleting user 부분 메세지인걸 보니 삭제 요청은 제대로 전달됐지만 삭제하는 과정에서 오류가 생긴 것으로 보인다.

여기저기 검색해보니, 외래키에 대한 얘기와 CASCADE 설정을 확인하라는 말이 보여서 supabase 내에서 auth 스키마 user와 연결된 테이블을 확인했다.

SELECT
    tc.table_schema, 
    tc.table_name, 
    kcu.column_name, 
    ccu.table_schema AS foreign_table_schema,
    ccu.table_name AS foreign_table_name, 
    ccu.column_name AS foreign_column_name 
FROM 
    information_schema.table_constraints AS tc 
JOIN 
    information_schema.key_column_usage AS kcu
ON 
    tc.constraint_name = kcu.constraint_name
JOIN 
    information_schema.constraint_column_usage AS ccu
ON 
    ccu.constraint_name = tc.constraint_name
WHERE 
    constraint_type = 'FOREIGN KEY' 
    AND ccu.table_name = 'users'
    AND ccu.table_schema = 'auth';

sql 에디터에 해당 코드를 실행시키면 어떤 테이블이 외래키로 연결되어 있는지 나오는데 해당 테이블에 가서 설정을 확인해보니 정말 CASCADE 적용이 안되어 있었다... 설정 하니까 바로 오류없이 회원 삭제가 진행되었다ㅎ;

지금껏 프로젝트에서 auth와 관련된 기능은 한 번도 해본 적이 없는데, 이번 기회에 회원 탈퇴를 구현해보면서 이것저것 알아가는 게 많아서 너무 좋았다!!!

현재 로그인한 사용자가 해당 게시글에 좋아요를 눌렀는지 여부를 파악하기 위해 클라이언트 컴포넌트에서 훅으로 getSession 요청을 했다.

  // LikeButton.tsx
  // 지금 로그인한 유저 정보
  const { data: user } = useSession();
  // 현재 포스트에 좋아요를 누른 유저
  const { data: likes } = usePostLikers(postId);
  // 좋아요 누른 유저 목록에 유저가 있으면 true 없으면 false
  const isLike = likes?.some((post) => post.like_user === user?.id) || false;
  // 좋아요 낙관적 업데이트 하는 뮤테이션 불러오기
  const likeButtonHandler = useToggleLikeButton(user, postId, isLike);

그런데 뮤테이션을 호출할 때 user에서 타입 오류가 발생했다.

분명 fetch 함수에서도 null, User만 반환하고 있고 useSession Query에서도 명시적으로 User||null 타입을 반환하고 있는데 const { data: user } = useSession(); 해당 부분의 user 가 User, null, undefined 세가지 타입을 모두 포함하고 있었다.

// 세션 정보 가져오는 함수
export const fetchSessionData = async () => {
  const { data, error } = await browserClient.auth.getSession();

  if (error) {
    console.error("Session fetch error:", error);
    return null;
  }

  // session이 없는 것은 정상적인 상태일 수 있음
  if (!data.session) {
    return null;
  }

  return data.session.user;
};

// 커스텀 훅 useQuery
export const useSession = () => {
  return useQuery<User | null>({
    queryKey: ["user", "session"],
    queryFn: () => fetchSessionData(),
  });
};

그런데 왜 undefined가 나오는 걸까?

✅ useSession이 비동기 요청이기 때문

useSession은 비동기 적으로 데이터를 가져오고 있기 때문에 컴포넌트가 렌더링 될 때 user값이 로드되지 않았을 수 있기 때문이다.

그래서 session 데이터를 가져오는 요청이 완료되기 전까지 user가 없으니까 자동으로 undefined가 되는 것이었다.

🥹 그럼 어덕하라고 훅은 조건문 아래에서 못쓰는데 undefined 예외처리를 어떻게 하라고

그렇다. 저번에 트러블 슈팅으로 썼던 것 같은데, React Hook은 조건문 아래에서 사용할 수 없다. 그래서

  // 지금 로그인한 유저 정보
  const { data: user, isLoading, isError } = useSession();
  // 현재 포스트에 좋아요를 누른 유저

  if (isLoading || isError) {
    return;
  }

  const { data: likes } = usePostLikers(postId);
  // 좋아요 누른 유저 목록에 유저가 있으면 true 없으면 false
  const isLike = likes?.some((post) => post.like_user === user?.id) || false;
  // 좋아요 낙관적 업데이트 하는 뮤테이션 불러오기
  const likeButtonHandler = useToggleLikeButton(user, postId, isLike);

이런식으로 user 를 받아오기 전에 조건문으로 예외처리를 할 수 없다.

그럼 어떻게 해야할까!

간단하다.

그냥 초기값을 설정해주면 된다.

const { data: user = null } = useSession(); user의 초기값이 unll이라고 지정해주니 아무 문제 없이 코드가 작동되는 걸 볼 수 있다.

사실 뮤테이션 부분에서 user! 이렇게 처리할 수도 있지만 임시방편에 불과하고 나는 좀 더 근본적으로? 어디서 undefined가 반환되는 건지 해결하고 싶었는데 너무 간단하고 기본적인거라 당황했다.

훅을 사용하다보면 조건문 아래에서 사용하지 못한다는 것에 사로 잡혀서 초기 값 설정하는 방법같은 걸 까먹기도 하고, 그냥 js 쓸 때는 잘 했던 걸 ts 쓸 때는 버벅이게 되는 부분이 있다.

useState 사용할 때도 초기값 안 넣으면 undefined 나오는데 그걸 까먹어서... 20분 정도 헤맸다고 생각하니 스스로가 웃기고 황당했다! 다음엔 까먹지 말길...

문제 발생 마이 페이지 제작 중, 사용자가 작성한 게시글을 불러오기 위해 tanstackQuery 를 사용하여 user정보와 post 정보를 가져오려고 했음 usePostByUser(user.id) post를 요청할 때 user id가 필요해서 useSession으로 먼저 user 정보를 받고 user.id를 넣으려고 했음

그런데

const {data: user} = useSession();
const {data: posts} = usePostByUser(user.id);

이렇게 하니까 Cannot read properties of undefined (reading 'getUser') 오류가 발생함 user 받아오기 전에 posts 요청이 가서 user가 없다고 나옴

그럼 user가 있을 때만 posts 요청을 받아야하나 싶어서

const {data: user, isLoading, isError} = useSession();
>
if (!user || isLoading || isError) {
  return ;
}
>
const {data: posts} = usePostByUser(user.id);

이렇게 수정했더니 해당 오류가 발생했습니다~

문제 원인 React는 Hook이 호출되는 위치를 중요하게 생각하는데, 규칙을 어길 경우 발생하는 오류입니다!

오류가 발생하는 대표 상황 1. 조건부로 Hooks 호출 2. 반복문 또는 이벤트 핸들러에서 Hooks 호출 3. 조건에 따라 Hook 추가 및 제거

그러니까 꼭 최상단에 두개를 연달아 불러오고 처리해야한다는 말.

문제 해결 조건문을 사용하지 않고 user, post 요청을 처리할 수 있는 방법 enabled, useEffect, 상위에서 요청하고 props 내리기 등 중에서 enabled 옵션을 추가하는 것으로 해결했다.

export const usePostByUser = (userId: string | undefined) => {
  return useQuery({
    queryKey: ["post", userId],
    queryFn: () => fetchPostByUser(userId),
    retry: 1,
    enabled: !!userId, // userId가 있을 때만 요청 실행
  });
};
>
  const { data: user } = useSession();
  const { data: posts, isLoading } = usePostByUser(user?.id);

ts로 프로젝트를 진행하면서 온갖 라이브러리, API에 대한 type을 작성하기가 참 번거롭고 귀찮았는데, 이런 타입을 사람들이 정리해서 공유하고 있다는 걸 얼마 전에 알게 되었다.

supabase에서도 이러한 것들을 지원해주고 있었는데, 내 프로젝트에서 생성한 테이블에 대한 type을 파일로 받아볼 수 있는 기능이 있다.

[공식 문서 확인하기] (https://supabase.com/docs/reference/javascript/typescript-support)

🚩 타입 생성 방법

1. 터미널에서 supabase 설치 yarn add supabase --dev 해당 명령어를 사용하여 클라이언트 라이브러리를 설치한다.

2. supabase 로그인 인증하기 yarn supabase login 터미널에 명령어를 입력하면 Hello from Supabase! Press Enter to open browser and login automatically. 이런 메세지가 뜬다. 시키는 대로 Enter를 누르면 브라우저 창이 뜨고 로그인을 진행하면 된다. 나는 이미 로그인을 해둔 상태라서 바로 인증이 됐다.

• 이 단계를 모르고 계속 타입 생성을 시도해서 에러가 떴다. 프로젝트에 대한 권한이 있는지 확인해야 프로젝트에 대한 타입을 제공해주는게 당연한데, 아예 생각을 못하고 있었다.

2번 과정 진행 후 You are now logged in. Happy coding! Done in 9.39s. 이런 메세지가 떴다면 3번을 진행하면 된다. 나는 바로 떠서 해당 과정에서 에러가 생기는지 잘 모르겠지만... 에러가 생긴다면 그 부분은 검색해보시길 .....

3. 타입 파일 생성하기 yarn supabase gen types typescript --project-id 프로젝트ID > database.types.ts 프로젝트ID 부분에 자신의 프로젝트 ID를 입력하면 된다. 프로젝트 ID는 아래 경로를 통해 받아볼 수 있다. Dashboard => 타입이 필요한 프로젝트 클릭 => 왼쪽 메뉴에서 Project Settings => General => Reference ID

3번까지 완료 되면 루트 경로에 database.types.ts 파일이 생긴 걸 확인할 수 있다. 맨 위, 아래에 명령어랑 완료 시간이 함께 나오는데 그 부분은 지우고 사용하면 된다.

🚩 타입 사용 방법

공식 문서에도 나와있듯이 타입을 사용하는 방법은 간단하다.

import { Database, Tables, Enums } from "./database.types.ts";

// Before 😕
let movie: Database['public']['Tables']['movies']['Row'] = // ...

// After 😍
let movie: Tables<'movies'>

방법이 두 개 나와있는데 Before의 경우 경로를 하나하나 지정하여 타입을 사용하는 방법이고 After의 경우Tables 유틸리티 타입이 내부적으로 복잡한 타입 경로를 처리하여 바로 필요한 타입을 사용할 수 있다.

하지만 정확히 두 방법이 같은 타입을 불러오고 있는 건 아니다.

supabase에서는 한 테이블에서 여러 타입을 지원하는데

export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]

export interface Database {
  public: {
    Tables: {
      movies: {
        Row: {               // the data expected from .select()
          id: number
          name: string
          data: Json | null
        }
        Insert: {            // the data to be passed to .insert()
          id?: never         // generated columns must not be supplied
          name: string       // `not null` columns with no default must be supplied
          data?: Json | null // nullable columns can be omitted
        }
        Update: {            // the data to be passed to .update()
          id?: never
          name?: string      // `not null` columns are optional on .update()
          data?: Json | null
        }
      }
    }
  }
}

보이는 것처럼 row, insert, update 타입을 제공한다. row의 경우는 읽어올 때, insert, update는 각 역할을 수행할 때 사용할 수 있다.

After의 Tables<'movies'> 는 기본적으로 movies의 row를 가져오고 있고, Tables<'movies', 'Insert'> 이런 식으로 다른 타입을 지정하여 사용할 수 있다.

문제 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다.

이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같아야 합니다. 또한, 이번 대회부터는 칼로리가 낮은 음식을 먼저 먹을 수 있게 배치하여 선수들이 음식을 더 잘 먹을 수 있게 하려고 합니다. 이번 대회를 위해 수웅이는 음식을 주문했는데, 대회의 조건을 고려하지 않고 음식을 주문하여 몇 개의 음식은 대회에 사용하지 못하게 되었습니다.

예를 들어, 3가지의 음식이 준비되어 있으며, 칼로리가 적은 순서대로 1번 음식을 3개, 2번 음식을 4개, 3번 음식을 6개 준비했으며, 물을 편의상 0번 음식이라고 칭한다면, 두 선수는 1번 음식 1개, 2번 음식 2개, 3번 음식 3개씩을 먹게 되므로 음식의 배치는 "1223330333221"이 됩니다. 따라서 1번 음식 1개는 대회에 사용하지 못합니다.

수웅이가 준비한 음식의 양을 칼로리가 적은 순서대로 나타내는 정수 배열 food가 주어졌을 때, 대회를 위한 음식의 배치를 나타내는 문자열을 return 하는 solution 함수를 완성해주세요.

입출력 예

접근 방식

• 0번 인덱스는 무조건 물이니 제외한다.
• 1번 인덱스 값부터 2로 나눈 뒤 소수점을 제외한 만큼 정답 배열에 추가한다.
• 모든 배열의 값을 추가했다면 맨 뒤에 0을 추가한다.
• 정답 배열을 뒤집은 값을 0 뒤에 또 붙인다.

작성한 코드

function solution(food) {
  let answer = [];
  food.forEach((e, idx) => {
    if (idx === 0) {
    } else {
      const count = Math.floor(e / 2);
      answer = [...answer, ...Array(count).fill(idx)];
    }
  });
>
  return answer.join('') + '0' + answer.reverse().join('');
}

• let answer = []; 정답을 저장할 배열.

• food.forEach 순회하면서 기존 배열을 바탕으로 새 배열을 리턴할 건 아니고 answer 배열에 값만 추가할거라 forEach 사용

• if (idx === 0) 물은 스킵하고

• const count = Math.floor(e / 2); 해당 음식을 2로 나눈 뒤 홀수일 경우를 생각하여 소수점을 버림

• answer = [...answer, ...Array(count).fill(idx)]; 기존에 있던 값이 날아가지 않게 스프레드 연산자로 배열 유지하고 count 만큼의 길이를 idx 값으로 채우기 ex) Array(2).fill(3) = [기존값, 3, 3]

문제가 길어서 처음 봤을 땐 막막했는데, 막상 읽어보니 크게 어려운 문제는 아니었다. 배열을 원하는 길이만큼 원하는 값으로 채우는 방법이 뭐가 있을까 고민하다가 fill을 찾았는데, 생각해보니 repeat도 있었다.

function solution(food) {
    let res = '';
    for (let i = 1; i < food.length; i++) {
        res += String(i).repeat(Math.floor(food[i]/2));
    }

    return res + '0' + [...res].reverse().join('');
}

이건 다른사람 풀이인데 나랑 다르게 for문을 사용했고, 배열이 아닌 문자열로 초기값을 세팅했다. 근데 어차피 물이 0번 인덱스라 제외할거였으면 for문을 사용하는 방법이 예외처리를 따로 안해도 되니까 더 편할 것 같다.

코테 문제는 뭔가... 접근 방식을 떠올리는 게 가장 어려운 것 같다.

🔗 배포 링크

https://record-pan-pang.vercel.app/

👨‍🏫 프로젝트 소개

일상과 기분을 공유하며 노래를 추천하는 뉴스피드 사이트입니다.
사용자들이 자신의 감정과 순간을 노래와 함께 표현할 수 있는 공간을 제공합니다.

🚩 프로젝트 개요

• 프로젝트명   :  Record PanPang
• 진행 기간  :   24.10.10 ~ 24.10.17

❤ 팀 소개

[내일배움캠프] 2조

👨‍👩‍👧‍👦 팀원 소개

📦 프로젝트 파일 구조

 ┣ 📂src
 ┃ ┣ 📂app
 ┃ ┃ ┣ 📂(assets)
 ┃ ┃ ┃ ┣ 📜CommentCon.tsx
 ┃ ┃ ┃ ┣ 📜EmptyHeart.tsx
 ┃ ┃ ┃ ┣ 📜FillHeart.tsx
 ┃ ┃ ┃ ┣ 📜PauseCon.tsx
 ┃ ┃ ┃ ┣ 📜PlayCon.tsx
 ┃ ┃ ┃ ┣ 📜Plus.tsx
 ┃ ┃ ┃ ┗ 📜StopCon.tsx
 ┃ ┃ ┣ 📂api
 ┃ ┃ ┃ ┗ 📜spotifyToken.ts
 ┃ ┃ ┣ 📂detail
 ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂fonts
 ┃ ┃ ┃ ┗ 📜PretendardVariable.woff2
 ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂sign-in
 ┃ ┃ ┃ ┣ 📜error.tsx
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂sign-up
 ┃ ┃ ┃ ┣ 📜error.tsx
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📂write
 ┃ ┃ ┃ ┣ 📂[id]
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┃ ┣ 📜favicon.ico
 ┃ ┃ ┣ 📜globals.css
 ┃ ┃ ┣ 📜layout.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂commonUI
 ┃ ┃ ┃ ┣ 📜Background.tsx
 ┃ ┃ ┃ ┣ 📜LikeButton.tsx
 ┃ ┃ ┃ ┗ 📜PostCard.tsx
 ┃ ┃ ┣ 📂features
 ┃ ┃ ┃ ┣ 📂auth
 ┃ ┃ ┃ ┃ ┣ 📜authForm.tsx
 ┃ ┃ ┃ ┃ ┗ 📜signOutButton.tsx
 ┃ ┃ ┃ ┣ 📂comment
 ┃ ┃ ┃ ┃ ┣ 📜CommentInput.tsx
 ┃ ┃ ┃ ┃ ┣ 📜CommentItem.tsx
 ┃ ┃ ┃ ┃ ┣ 📜CommentList.tsx
 ┃ ┃ ┃ ┃ ┗ 📜CommentSection.tsx
 ┃ ┃ ┃ ┣ 📂mypage
 ┃ ┃ ┃ ┃ ┣ 📜EditProfileButton.tsx
 ┃ ┃ ┃ ┃ ┣ 📜EditProfileModal.tsx
 ┃ ┃ ┃ ┃ ┣ 📜MyComment.tsx
 ┃ ┃ ┃ ┃ ┣ 📜MyLike.tsx
 ┃ ┃ ┃ ┃ ┣ 📜MyPageTabs.tsx
 ┃ ┃ ┃ ┃ ┣ 📜MyPost.tsx
 ┃ ┃ ┃ ┃ ┣ 📜Profile.tsx
 ┃ ┃ ┃ ┃ ┣ 📜ProfileError.tsx
 ┃ ┃ ┃ ┃ ┗ 📜ProfileLoading.tsx
 ┃ ┃ ┃ ┣ 📂navbar
 ┃ ┃ ┃ ┃ ┣ 📜Footer.tsx
 ┃ ┃ ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┃ ┃ ┗ 📜ProfileImg.tsx
 ┃ ┃ ┃ ┣ 📂player
 ┃ ┃ ┃ ┃ ┣ 📜DetailPlayButton.tsx
 ┃ ┃ ┃ ┃ ┣ 📜DetailPlayer.tsx
 ┃ ┃ ┃ ┃ ┣ 📜PlayButton.tsx
 ┃ ┃ ┃ ┃ ┣ 📜Player.tsx
 ┃ ┃ ┃ ┃ ┗ 📜PlayIcon.tsx
 ┃ ┃ ┃ ┣ 📂post
 ┃ ┃ ┃ ┃ ┣ 📜PostButtons.tsx
 ┃ ┃ ┃ ┃ ┣ 📜PostCommnetCount.tsx
 ┃ ┃ ┃ ┃ ┣ 📜PostForm.tsx
 ┃ ┃ ┃ ┃ ┣ 📜PostList.tsx
 ┃ ┃ ┃ ┃ ┗ 📜PostSection.tsx
 ┃ ┃ ┃ ┗ 📂spotifySearch
 ┃ ┃ ┃ ┃ ┣ 📜Card.tsx
 ┃ ┃ ┃ ┃ ┣ 📜Command.tsx
 ┃ ┃ ┃ ┃ ┗ 📜SearchForPost.tsx
 ┃ ┃ ┣ 📂providers
 ┃ ┃ ┃ ┗ 📜QueryClientProvider.tsx
 ┃ ┃ ┗ 📂ui
 ┃ ┃ ┃ ┣ 📜button.tsx
 ┃ ┃ ┃ ┣ 📜card.tsx
 ┃ ┃ ┃ ┣ 📜command.tsx
 ┃ ┃ ┃ ┣ 📜dialog.tsx
 ┃ ┃ ┃ ┣ 📜input.tsx
 ┃ ┃ ┃ ┗ 📜textarea.tsx
 ┃ ┣ 📂hook
 ┃ ┃ ┣ 📜usePostById.ts
 ┃ ┃ ┣ 📜usePostByUserId.ts
 ┃ ┃ ┗ 📜usePosts.ts
 ┃ ┣ 📂lib
 ┃ ┃ ┗ 📜utils.ts
 ┃ ┣ 📂store
 ┃ ┃ ┣ 📜playerStore.tsx
 ┃ ┃ ┗ 📜spotifyStore.tsx
 ┃ ┣ 📂types
 ┃ ┃ ┣ 📜auth.ts
 ┃ ┃ ┣ 📜comment.ts
 ┃ ┃ ┣ 📜post.ts
 ┃ ┃ ┣ 📜Spotify.ts
 ┃ ┃ ┗ 📜track.ts
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📂supabase
 ┃ ┃ ┃ ┣ 📜client-actions.ts
 ┃ ┃ ┃ ┣ 📜client.tsx
 ┃ ┃ ┃ ┣ 📜middleware.ts
 ┃ ┃ ┃ ┣ 📜server-actions.ts
 ┃ ┃ ┃ ┗ 📜server.tsx
 ┃ ┃ ┣ 📜formatTrackData.ts
 ┃ ┃ ┣ 📜getYoutubeID.ts
 ┃ ┃ ┗ 📜spotify-client.ts
 ┃ ┗ 📜middleware.ts
 ┣ 📜.env.local
 ┣ 📜.eslintrc.json
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜components.json
 ┣ 📜next-env.d.ts
 ┣ 📜next.config.mjs
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜postcss.config.mjs
 ┣ 📜README.md
 ┣ 📜tailwind.config.ts
 ┣ 📜tsconfig.json
 ┗ 📜yarn.lock

📋 Supabase ERD 설계도

🗂️ 기능 설명

회원가입/로그인

Supabase Auth를 사용해 관리했습니다.

1. 유효성 검사 - 1 유효성 검사를 위해 zod와 react-hook-form를 사용합니다. 존재하는 이메일은 별도의 유효성 검사를 통해 알려줍니다.

// ./src/components/auth/Auth

const AuthForm = () => {
  ...
  const schema =
    path === SIGN_UP
      ? z.object({
          email: z
            .string()
            .email({ message: "이메일 형식으로 입력해주세요" })
            .min(1, { message: "이메일을 입력해주세요" }),
          password: z.string().min(6, "6자 이상 입력해주세요"),
          nickname: z.string().min(1, "닉네임을 입력해주세요.").max(10, "최대 10자 입력 가능합니다.")
        })
      : z.object({
          email: z.string().min(1, "이메일을 입력해주세요"),
          password: z.string().min(1, "비밀번호를 입력해주세요")
        });
  ...
  const { register, handleSubmit, formState } = useForm({
    mode: "onChange", //'onBlur' : focus가 사라졌을 때
    defaultValues,
    resolver: zodResolver(schema)
  });
  ...
  return (
    <div className="container modal">
      <form onSubmit={handleSubmit(onSubmit)} className="p-4 flex flex-col items-center m-auto">
        <Input
          {...register("email")}
          placeholder="email"
          className={AUTH_CSS}
          onChange={() => setEmailMessage("")}
        />
        {formState.errors.email && <span className="text-sky-300 leading-tight">{formState.errors.email.message}</span>}
        {!!emailMessage && <span className="text-sky-300 leading-tight">{emailMessage}</span>}

        ...

      </form>
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        {carousel &&
          [0, 2, 4, 6].map(
            (
              i // 각 슬라이드에 두개씩 보여줌
            ) => <Slide play={[carousel[i], carousel[i + 1]]} key={`slide-${i}`} />
          )}
      </div>
    </div>
  );
};

2. 유효성 검사 - 2 profiles 테이블에 저장된 email을 불러와서 해당 이메일이 존재하는 확인합니다.

// ./src/components/auth/Auth

const AuthForm = () => {
  ...
  const { register, handleSubmit, formState } = useForm({
    mode: "onChange", //'onBlur' : focus가 사라졌을 때
    defaultValues,
    resolver: zodResolver(schema)
  });
  ...
  const onSubmit = async (data: FieldValues) => {
    const emailData = await checkEmail(data.email);

    if (path === SIGN_UP) {
      if (emailData.length !== 0) {
        setEmailMessage("이미 존재하는 계정입니다.");
      } else {
        await signup({
          email: data.email,
          password: data.password,
          options: { data: { nickname: data.nickname, email: data.email, profile_img: "default" } }
        });
      }
    } else {
      if (emailData.length === 0) {
        setEmailMessage("존재하지 않는 계정입니다.");
      } else {
        await signin({ email: data.email, password: data.password });
      }
    }
  };
  ...
};

// ./src/utils/supabase/client-actions.ts

export async function checkEmail(email: string) {
  const { data, error } = await supabase.from(PROFILES).select("email").eq("email", email);

  if (error) {
    console.error(error);
    return [];
  }

  return data;
}

플레이어

메인 페이지에서 동작하는 플레이어입니다.

1. useRef 사용

  // youtube iframe과 앨범 커버를 연결하여 영상은 노출되지 않고 노래만 재생됩니다.
  // 성능 최적화를 위해 재생을 클릭한 영상의 iframe만 렌더링 되도록 구현했습니다.

  const { playedVideo, setIsPlay, setPlayedVideo, playedPlayer, setPlayedPlayer } = useYoutubnStore();
  const playerRef = useRef<YouTubePlayer | null>(null);
  const [showYouTube, setShowYouTube] = useState(false);

      {showYouTube && (
        <div className="hidden">
          <YouTube videoId={id} onReady={(e: YouTubeEvent) => onReady(e, playerRef)} />
        </div>
      )}

2. 실제 동작하는 함수

   // 영상을 처음 클릭하면 showYouTube를 통해 프레임이 생성되고 로딩이 완료될 때 onReady 함수가 실행됩니다.
   const togglePlayVideo = async () => {
    if (!showYouTube) {
      setShowYouTube(true);
    }
   
   // 한 번 틀었던 노래를 재생, 일시정지 할 때 실행되는 부분
    if (playerRef.current && playedVideo.id === music.id) {
      if (playedVideo.isPlay) {
        playerRef.current.pauseVideo();
        setIsPlay();
      } else {
        playerRef.current.playVideo();
        setIsPlay();
      }
    }
   
    // 노래를 듣다가 다른 노래를 틀었을 때 실행되는 부분
    if (playedVideo.id !== music.id && playerRef.current) {
      if (playedVideo.isPlay && playedPlayer) {
        // 만약 다른 노래가 재생 중이라면 일시정지 함
        playedPlayer.pauseVideo();
      }
      // 모든 플레이어 정보를 방금 선택한 영상으로 변경하고 재생시킴
      setPlayedVideo(music.id);
      setPlayedPlayer(playerRef.current);
      playerRef.current.playVideo();
    }
   };
   
   const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    togglePlayVideo();
   };
   
   // 프레임이 로딩되었을 때 추가 조작 없이 바로 재생될 수 있도록 설정
   const onReady = (e: YouTubeEvent, playerRef: MutableRefObject<YouTubePlayer | null>) => {
    playerRef.current = e.target;
    if (playedPlayer) {
      playedPlayer.pauseVideo();
    }
    setPlayedVideo(music.id);
    playerRef.current.playVideo();
    setPlayedPlayer(playerRef.current);
   };

검색

spotify에서 track data를 불러와서 search input box에 글자를 입력할 때마다 data 50개씩 dropdown modal 안으로 들어오도록 구현하였습니다.
dropdown으로 보여지는 track list들 중 한개를 선택하면 해당하는 track의 사진과 정보가 track info box에 자동으로 입력되어 들어옵니다. 사용자는 track을 검색하고 본인이 선택한 track의 정보를 track info box에서 확인할 수 있습니다.

//SearchForPost.tsx
const SpotifySearch = ({ setCard, card, cardError }: Props) => {
  const [token, setToken] = useState("");
  const [search, setSearch] = useState<string>("");
  const [open, setOpen] = useState(false);
  const [tracks, setTracks] = useState<Track[]>([]);

  //처음 렌더링시에 fetchToke함수를 실행시켜주고 token을 가져와서 상태값 token에 담아줌
  useEffect(() => {
    const clientId = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID;
    const clientPW = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_SECRET;

    const fetchToken = async () => {
      const res = await fetch("https://accounts.spotify.com/api/token", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        cache: "no-store",
        body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientPW}`
      });
      if (!res.ok) {
        throw new Error("Failed to fetch token");
      }
      const data = await res.json();

      const { access_token: token } = data;

      setToken(token);
    };
    fetchToken();
  }, []);

  //사용자가 입력한 검색단어들이 search로 들어감, 입력값이 0보다 길어지면 dropdown됨
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.value === "0") {
      return;
    }
    setSearch(e.target.value);
    setOpen(e.target.value.length > 0);
  };

  useEffect(() => {
    if (!search) {
      return;
    }
    // spotify에서 track data를 가져오는 비동기 함수
    const getTrack = async () => {
      const res = await fetch(`https://api.spotify.com/v1/search?q=${search}&type=track&limit=50&offset=0`, {
        method: "GET",
        headers: {
          Authorization: "Bearer " + `${token}`
        }
      });

      if (!res.ok) {
        throw new Error("Failed to fetch track");
      }

      const data: SpotifyTracks = await res.json();
      const tracks: Track[] = data.tracks.items;
      setTracks(tracks);
    };
    //사용자가 검색 단어를 입력할 때마다 getTrack을 실행시켜줌
    getTrack();
  }, [search, token]);

  //검색 리스트 클릭시 불러온 데이터의 목록과 대조하여 해당하는 데이터만 추출해서 상태값card에 넣어주는 함수
  const shiftTrackToInfocard = (id: string) => {
    const trackInfo = tracks.find((item) => {
      return item.id === id;
    });

    if (trackInfo) {
      setCard(trackInfo);
    }

    setOpen(false);
    setSearch("");
  };

  //초로 만들어진 시간은 분초로 변경해주는 함수
  const formatDuration = (durationMs: number) => {
    const minutes = Math.floor(durationMs / 60000);
    const seconds = Math.floor((durationMs % 60000) / 1000);
    return `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
  };

  return (
    <div className="container mx-auto flex flex-col gap-8 justify-center items-center">
      <CommandForPost
        search={search}
        tracks={tracks}
        open={open}
        handleInputChange={handleInputChange}
        shiftTrackToInfocard={shiftTrackToInfocard}
        cardError={cardError}
      />
      <CardForPost card={card} formatDuration={formatDuration} />
    </div>
  );
};

게시글

게시글 목록을 TanStack Query를 이용하여 실시간으로 반영되도록 구현했습니다.
이 기능을 통해 사용자는 게시글이 추가, 수정, 삭제될 때 즉시 업데이트된 내용을 확인할 수 있습니다.

// PostList.tsx
const PostList = ({ user, token }: Props) => {
  // 게시글 데이터를 가져오는 훅 호출
  const { data: posts, isLoading, isError } = usePosts();

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    return <div>게시글을 불러오는 데 문제가 발생했습니다.</div>;
  }
  if (!posts) {
    return <div>게시글이 없습니다.</div>;
  }

  return (
    <ul className="flex flex-col gap-6">
      {posts.map((post) => (
        <li key={post.post_id}>
          {/* 각 게시글을 PostCard 컴포넌트로 렌더링 */}
          <PostCard post={post} user={user} token={token} />
        </li>
      ))}
    </ul>
  );
};

// usePosts.ts
export const usePosts = () => {
  return useQuery({
    queryKey: ["posts"], // 쿼리 키
    queryFn: fetchPosts // 데이터 가져오는 함수
  });
};

// client-actions.ts
export async function fetchPosts() {
  // posts 테이블에서 데이터 가져오기
  const { data: posts, error: postsError } = await supabase
    .from("posts")
    .select("*, profiles(nickname, profile_img)") // 프로필 데이터 포함
    .order("created_at", { ascending: false }); // 최신 게시글 우선 정렬

  // 에러 발생 시 처리
  if (postsError || !posts) {
    console.error(postsError);
    return []; // 에러 발생 시 빈 배열 반환
  }

  // 결과에서 각 포스트의 프로필 데이터 추가
  return posts.map((post) => ({
    ...post
  }));
}

댓글

사용자가 댓글을 작성할 수 있습니다.
정렬을 통해 댓글을 작성하면 댓글 목록 맨 위에서 확인할 수 있고, 댓글 작성,수정 시간을 확인할 수 있습니다.

클라이언트 액션 - 댓글 조회를 처리하여 사용자가 빠르게 댓글을 확인할 수 있습니다.

client-action

// 댓글 조회
export async function fetchComment(postId: string): Promise<Comment[]> {
  const STORAGE = "profiles";

  const { data: comments, error: commentError } = await supabase
    .from("comments")
    .select("comment_id, content, user_id, created_at, update_at")
    .eq("post_id", postId)
    .order("created_at", { ascending: false }); // 생성 시간 기준으로 정렬

  if (commentError) {
    console.error(commentError.message);
    throw new Error("댓글을 불러오는데 실패했습니다.");
  }

  const commentsWithProfile = await Promise.all(
    comments.map(async (comment) => {
      const { data: profile, error: profileError } = await supabase
        .from("profiles")
        .select("nickname, profile_img")
        .eq("user_id", comment.user_id)
        .single();

      if (profileError) {
        throw new Error("프로필 정보를 불러오는데 실패했습니다.");
      }

      // `profile_img`를 가져와 절대 경로 생성
      const { data: { publicUrl: profileImgUrl } = {} } = supabase.storage
        .from(STORAGE)
        .getPublicUrl(profile.profile_img ?? "default");

      return {
        ...comment,
        profile: {
          nickname: profile.nickname,
          profile_img: profileImgUrl || "/default-profile.png"
        }
      };
    })
  );

  return commentsWithProfile;
}
// 댓글 추가
export async function addComment(content: string, postId: string) {
  const {
    data: { user }
  } = await supabase.auth.getUser();

  if (!user) throw new Error("로그인이 필요합니다.");

  const { error } = await supabase.from("comments").insert([{ content, post_id: postId, user_id: user.id }]);

  if (error) throw new Error("댓글 추가에 실패했습니다.");
}

// 댓글 삭제
export async function deleteComment(commentId: string) {
  const {
    data: { user }
  } = await supabase.auth.getUser();

  if (!user) throw Error("로그인이 필요합니다.");

  const { error } = await supabase.from("comments").delete().eq("comment_id", commentId).eq("user_id", user.id);

  if (error) {
    throw new Error("댓글 삭제에 실패했습니다.");
  }
}

// 댓글 수정
export async function updateComment(commentId: string, content: string) {
  const {
    data: { user }
  } = await supabase.auth.getUser();

  if (!user) {
    throw new Error("로그인 해주세요.");
  }
  const { error } = await supabase
    .from("comments")
    .update({ content })
    .eq("comment_id", commentId)
    .eq("user_id", user.id);

  if (error) {
    throw new Error("댓글 수정에 실패했습니다.");
  }
}

마이페이지

사용자 정보와 사용자가 작성한 게시글과 댓글, 좋아요한 게시글을 확인할 수 있습니다.

1. 프로필 수정 기능 프로필 수정하기 버튼을 클릭하면 모달창을 통해 사용자 정보를 수정할 수 있습니다. 실시간으로 변화를 감지할 수 있도록 TanStack Query를 사용해 데이터를 불러와 변화가 발생하면 invalidateQueries를 통해 변경된 정보를 가져오도록 합니다.

// ./src/components/features/mypage/EditProfileModal.tsx

const EditProfileModal = ({
  user,
  setShowModal
}: {
  user: User | undefined;
  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
  ...
  // 사용자 프로필 업데이트 시 정보 바로 갱신되도록
  const queryClient = useQueryClient();
  // 사용자 정보 업데이트 성공 시 invalidateQueries
  const { mutate: handleUpdateUser } = useMutation({
    mutationFn: () => updateUser(user as User, nickname, profileImg),
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["user", "client"]
      });
      queryClient.invalidateQueries({ queryKey: ["post", currentUserId] });
      queryClient.invalidateQueries({ queryKey: ["posts"] });
    }
  });
  ...
};

액티브 탭

1. 액티브 탭 기능을 사용하여 사용자 경험을 개선하였습니다.

const MyPageTabs = ({ user, token }: Props) => {
  const [activeTab, setActiveTab] = useState(1);
  const { setToken } = useSpotifyStore();

  useEffect(() => {
    const getToken = async () => {
      const token = await fetchToken();
      setToken(token);
    };
    getToken();
  }, [setToken]);

  const tabs = [
    { id: 1, label: "게시글", component: <MyPost user={user} token={token} /> },
    { id: 2, label: "댓글", component: <MyComment /> },
    { id: 3, label: "좋아요", component: <MyLike /> }
  ];

  return (
    <div className="max-w-full mx-auto">
      <ul className="flex justify-around border-b border-gray-300 my-4">
        {tabs.map((tab) => (
          <ul
            key={tab.id}
            className={`w-full text-center py-2 cursor-pointer ${
              activeTab === tab.id
                ? "border-b-2 border-sky-400 text-sky-400 font-semibold"
                : "text-gray-400 active:text-gray-300"
            }`}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.label}
          </ul>
        ))}
      </ul>
      <div className="p-4">{tabs.find((tab) => tab.id === activeTab)?.component}</div>
    </div>
  );
};

네비게이션 바

로그인 정보가 없을 시 회원가입, 로그인 버튼이 우측 상단에 위치하며, 로그인 정보가 있을 시 로그아웃, 마이페이지 버튼과 프로필 이미지가 우측 상단에 위치합니다.

1. Link 태그로 연결하여 페이지 로딩 최적화

페이지 정보를 미리 불러와서 이동 시 시간을 줄일 수 있도록 했습니다.

// ./src/components/features/navbar/ProfileImg.tsx

const ProfileImg = () => {
  ...
  const userImg = getPublicUrl("profiles", user?.user_metadata.profile_img);

  return (
    <Link href={"/mypage"} className="min-w-fit min-h-fit rounded-full">
      <Image
        src={userImg}
        alt="프로필 이미지"
        width={40}
        height={40}
        className="w-[40px] h-[40px] border-2 rounded-full aspect-auto object-cover"
      />
    </Link>
  );
};

💥 Trouble Shooting

회원가입/로그인

🔥 로그아웃 해도 '로그아웃, 마이페이지' 버튼이 유지됨.

서버용/클라이언트용 supabase client를 제대로 숙지하지 못해, supabase client가 제대로 작동하지 않아 사용자 정보가 업데이트 되지 않아 발생한 문제였습니다.

서버용 supabase client를 사용할 때는 각 함수마다 client를 생성하고, 클라이언트용 supabase client는 하나의 client만 생성해 import하여 사용했습니다.

// ./src/utils/supabase/server-action.ts

"use server";
...
import { createClient } from "./server";

export async function signin(formData: SignInWithPasswordCredentials) {
  const supabase = createClient();
  ...
}

export async function signup(formData: SignUpWithPasswordCredentials) {
  const supabase = createClient();
  ...
}

export async function signout() {
  const supabase = createClient();
  ...
}
...

// ./src/utils/supabase/server.tsx

import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_KEY!);
}

export const supabase = createClient();

🔥 회원가입/로그인 시 유효성 검사에 사용할 테이블이 없었음.

email 컬럼 값을 unique하게 설정하기 위해 모든 사용자를 지우는 과정이 필요했습니다. 덩달아 연결된 정보도 같이 사라지게 되어 결국 모든 데이터를 지울 수 밖에 없었습니다.

좀 더 자세히 생각하고 데이터 베이스를 설계해야 한다는 것을 배웠습니다.

플레이어

🔥 배포 후, 특별한 오류코드 없이 메인 페이지에서 플레이어가 노출되지 않는 문제 발생
player 내부에서 음악 정보가 없으면 return되지 않도록 설정한 부분이 문제라고 생각함.

  if (!music) {
    return (
      <div>
        Loading...
      </div>
    );
  }

코드를 변경하여 테스트 진행하니 Loading이 출력됨
음악 정보를 불러오는 데에 필요한 token, id가 props로 제대로 전달되지 않는 것 같아 2차 테스트

  if (!music) {
    return (
      <div>
        {token}, {id}, {music}
      </div>
    );
  }

해당 코드로 token 값이 들어오지 않는다는 걸 확인함.
token은 가장 상위 컴포넌트인 메인 페이지의 page.tsx에서 서버 액션을 사용해서 얻어 내려주고 있었음.
현재 postList 컴포넌트를 클라이언트 컴포넌트로 변경했기 때문에 해당 컴포넌트에서 useEffect 훅을 사용하여 발급받는 것으로 변경

  const { setToken, token } = useSpotifyStore();

  useEffect(() => {
    const getToken = async () => {
      const token = await fetchToken();
      setToken(token);
    };
    getToken();
  }, [setToken]);

검색

🔥 dropdown search input box를 구현하기위해 shadcn에서 commmand 컴포넌트를 가져와서 data와 연결을 했는데, 해당 input에 검색어를 입력할 때는 문제가 없었는데 input에 들어갔던 글자가 사라지는 동시에 edirect-boundary.js:57 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))이러한 에러가 나왔습니다.

삼항연산자를 이용해서 input에 값이 없을 때에도 빈 tag를 그려지도록 하여서 에러처리를 해주었습니다.

        {open ? (
          <CommandList className="absolute top-full left-0 w-full bg-white rounded-b-lg border-t-0 max-h-[300px] overflow-y-auto shadow-lg">
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              {tracks.map((track) => (
                <CommandItem key={track.id} onSelect={() => shiftTrackToInfocard(track.id)}>
                  <Music className="mr-2 h-4 w-4" />
                  {track.name} - {track.artists[0]?.name}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        ) : (
          <CommandList></CommandList>
        )}
      </Command>

게시글

🔥 Supabase 외래키 연결

• 문제 발생: posts 테이블에서 post_id로 user_id를 찾아 profiles 테이블에서 nickname, profile_img 데이터를 가져오려 했습니다. 아래 코드와 같이 작성하고 Supabase에서 외래키 연결을 시도했지만 연결되지 않았습니다. 'insert or update on table "posts" violates foreign key constraint "posts_user_id_fkey"'오류는 posts 테이블의 user_id 필드가 profiles 테이블의 user_id와 외래키로 연결되어 있는데, 삽입하려는 user_id 값이 profiles 테이블에 존재하지 않거나 유효하지 않은 경우 이 오류가 발생합니다.
• 해결 방법: 두 테이블 간의 연결에 문제가 있는 것으로 추측되어, 기존에 등록된 데이터를 모두 삭제한 후 외래키를 다시 연결했습니다.

// post_id로 게시글 정보 조회
export async function getPostById(postId: string) {
  const { data, error } = await supabase
    .from("posts")
    .select("*, profiles(nickname, profile_img)")
    .eq("post_id", postId)
    .single();

  if (error || !data) {
    console.error(error);
    return null;
  }

  return data;
}

댓글

• 🔥 문제 발생: 댓글에 create_at이라는 타임스탬프가 있는데 처음에는 댓글 작성 시간만 기록하면 충분하다고 생각했지만, 댓글을 수정할 때마다 시간과 댓글 위치가 변경되는 문제가 발생했습니다.
• 해결 방법: update_at 컬럼 추가
  create_at: 댓글의 작성 시간을 유지하고, 댓글 정렬을 위한 기준값으로 사용했습니다.
  update_at: supabase 트리거를 이용해 댓글이 수정될 때의 시간을 저장하고, 댓글에 표현했습니다.

const { data: comments, error: commentError } = await supabase
  .from("comments")
  .select("comment_id, content, user_id, created_at, update_at")
  .eq("post_id", postId)
  .order("created_at", { ascending: false }); // 생성 시간 기준으로 정렬

마이페이지

🔥 다른 사용자로 로그인하면 기존 사용자 정보가 마이 페이지 사용자 정보에 적용됨.

TanStack Query를 사용해 데이터를 불러와서 auth state가 변경되면 invalidateQueries를 실행함. 이때 클라이언트 컴포넌트에서만 TanStack Query를 사용할 수 있고, 항상 상단에 노출되어있는 client 컴포넌트가 네비게이션 바의 프로필 이미지이므로 해당 컴포넌트에 onAuthStateChange를 적용함.

// ./xrc/components/features/navbar/ProfileImg.tsx

const ProfileImg = () => {
  ...
  supabase.auth.onAuthStateChange(() => {
    // 모든 auth state 변화에 따라 session 다시 저장
    queryClient.invalidateQueries({ queryKey: ["user", "client"] });
  });
  ...
};

네비게이션 바

🔥 사용자 정보 변경 시 프로필 이미지가 같이 반영되지 않음

TanStack Query의 Provider 내부에 헤더를 포함시켜 invalidateQueries의 영향을 받도록 함.

// ./src/app/layout.tsx

export default async function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen`}>
        <Providers>
          <Header />
          <Background>{children}</Background>
          <Footer />
        </Providers>
      </body>
    </html>
  );
}

// ./xrc/components/features/navbar/ProfileImg.tsx

const ProfileImg = () => {
  const defaultImg = getPublicUrl("profiles", "default");

  const {
    data: user,
    isLoading,
    isError
  } = useQuery({
    queryKey: ["user", "client"],
    queryFn: () => fetchSessionData()
  });

  supabase.auth.onAuthStateChange(() => {
    // 모든 auth state 변화에 따라 session 다시 저장
    queryClient.invalidateQueries({ queryKey: ["user", "client"] });
  });
  ...
};

그래도 api 사용 전에 문서를 한 번 꼼꼼히 읽어보면 좋을 것 같다.

• spotify api 공식 문서

api 발급부터 나는 살짝 우왕좌왕했기 때문에 발급부터 작성했다. 실제로 api 사용 부분은 spotify API 사용하기 부분을 참고하면 좋을 듯!

✅ spotify API 발급받기

• api 공식 문서에 들어가보면, 오른쪽 상단에서 로그인이 가능하다.

• 본인 계정으로 로그인 한 뒤, 프로필 부분을 놀러 dashboard 부분으로 들어간다.

• 대충 동의 누르고 다음으로 넘어간다.

• 이메일 인증을 진행한다.

• 내용을 채우고 앱 생성을 해준다.

• Redirect URIs : 실제로 배포한 웹이 없다면 로컬에서 실행되는 localhost 주소를 입력하면 된다.

• 이 두개가 필요하니 .env.local 파일에 환경변수로 저장한다.

✅ spotify Token 발급받기

spotify API는 특이하게 api key를 발급해주는 게 아니라 Client ID, Client secret 이 두개를 사용해 토큰을 요청하고 반환받은 토큰을 사용해서 api 요청을 해야하는 방식이다. OAuth 2.0의 클라이언트 자격 증명 흐름(Client Credentials Flow) ... 이런 설명이 있던데 이와 관련한 건 따로 알아보는 것이 좋을 것 같다.

해당 부분에 대한 문서는 이곳 사실 문서를 봐도 백엔드 로직으로 구현되어있어 프론트엔드만 배운 나는 이해가 잘? 됐다. 그래서 여기서기 리액트나 넥스트로 구현한 자료가 없을까 찾아보다가 관련 블로그를 찾았다.

익숙한 구조의 코드를 보니까 천천히 이해할 수 있었다! 일단 복붙해서 써보고, 되는지 안되는지 확인한 후 조금 더 보기 쉽게 수정했다.

// 잊지 말고 환경변수 임포트하기
const SPOTIFY_CLIENT_ID = process.env.SPOTIFY_CLIENT_ID as string;
const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET as string;

  // 스포티파이 api 요청을 위한 토큰 받아오는 함수
  const getSpotifyToken = async () => {
    const params = new URLSearchParams({
      grant_type: "client_credentials",
      client_id: SPOTIFY_CLIENT_ID,
      client_secret: SPOTIFY_CLIENT_SECRET
    });

    // fetch 부분
    const res = await fetch("https://accounts.spotify.com/api/token", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      // 쿼리스트링 형식으로 요청을 보냄
      body: params.toString() 
      // 실제로 전달되는 형태
          // grant_type=client_credentials&client_id=SPOTIFY_CLIENT_ID&client_secret=SPOTIFY_CLIENT_SECRET
    });

    // 토큰만 구조분해 할당으로 받아옴
    const { access_token: token } = await res.json();
    return token;
  };

  // 함수를 호출하여 반환된 토큰을 변수에 저장
  const token = await getSpotifyToken();

console.log로 token을 확인하면서 진행하니 수월했다.

✅ spotify API 요청하기

토큰을 받은 후에 요청은 기존 api들과 크게 다르진 않았다. 반환값에 쓸모없는 게 많아서 포맷팅하는 게 시간이 제일 오래 걸렸다...

  // 스포티파이에 해당 음악 정보 요청
  const res = await fetch(`https://api.spotify.com/v1/tracks/${id}`, {
    method: "GET",
    headers: {
      // 헤더에 아까 받은 token 함께 보내기 
      Authorization: "Bearer " + token
    }
  });
  const data: OriginalTrack = await res.json();

  // 포맷팅 함수로 필요한 데이터만 받아옴
  const music = formatTrackData(data);

supabase에 저장된 music id를 받아 track정보를 불러오는 로직을 작성했다. 각각의 api 요청에 대한 건 공식 문서에 잘 나와있어서 어렵진 않다. 조금 헷갈릴 뿐...ㅜ 그리고 타입의 경우 spotify에서 반환값을 보여주기 때문에 손수 작성해도 되고, 구글링해서 나오는 이미 만들어진 타입을 사용해도 될 것 같다. 나는 ai와 함께 직접 타입을 작성했다.

• 프로젝트 명 : 레코드판팡
• 프로젝트 소개 : 일상, 기분 등을 노래와 함께 공유할 수 있는 사이트
• 참고 사이트 : 인스타그램, 페이스북, X 와 같은 피드형 SNS

✅ 프로젝트 기능

• 회원가입 / 로그인
• 메인 페이지 뉴스피드 형식 / 게시글과 댓글 수, 좋아요 수 노출
• 작성 페이지 노래 선택 (스포티파이 api 사용) (검색 결과 드롭다운) 앨범 이미지, 제목, 아티스트, 앨범명 등 정보 확인 게시글 내용 (일상, 추천이유 등) 해당 노래에 대한 유튜브 링크 (스포티파이 api 재생기능 사용 불가)
• 상세 페이지 작성자, 작성일 노래 플레이어 노래 정보, 게시글 내용 댓글 CRUD
• 마이 페이지 프로필 수정 (닉네임, 프로필 사진) 작성한 게시글, 댓글, 좋아요 확인 가능

🚩 담당한 부분 기획

1. react-youtube 라이브러리를 사용한 노래 플레이어 만들기

• 이전에 사용했던 이미지 업로드 / 미리보기 기능을 변형하여 구현 (useRef)
• 유튜브 컴포넌트를 숨긴 후, ref로 연결하여 재생 버튼을 클릭하면 재생되도록 구현
  

2. 게시글 좋아요, 취소

• 게시글 DB에 like 라는 열을 만들어 좋아요 누른 유저의 ID를 배열 형태로 저장
• 취소 : 해당 배열에 이미 유저 아이디가 있는 경우 유저 아이디 삭제
• 유지 : 배열을 순회하며 유저 아이디가 있는 경우 좋아요 상태로 표시
  

3. 마이 페이지에 내가 좋아요한 게시글 불러오기

• 초기 DB 구조가 게시글 테이블에 LIKE 열이 포함되어 있음 (좋아요 누른 유저의 ID를 배열로 저장)
• 마이 페이지에서 게시글을 불러올 때 효율 부분에서 떨어진다고 생각이 들어 수정 요청할 예정
• like 테이블을 따로 제작하고 user id, posts id를 개별로 저장하는 방식이 좋아보임
• 테이블에서 user id가 현재 유저와 일치하는 게시글 정보만 불러오면 됨

기획대로 차근차근 기간 안에 꼭 완성할 수 있길!!!

개인과제를 진행하면서 개인적으로 추가해보고 싶은 게 있어서 만들어 본 아주 간단한 모달창

작동 원리

• 모달창 열기와 닫기를 담당하는 state를 만든다.
• 마우스 오버와 관련된 이벤트 (onMouseEnter, onMouseOver 등)을 사용하여 state를 set한다.
• 설정된 state에 맞게 모달창에 조건을 넣어 출력해준다.
• 끝!

우선 나는 롤 챔피언의 상세정보에서 개별의 스킬마다 설명을 모달로 띄우고 싶었기 때문에 각 스킬의 정보를 갖고 있어야 해서 state를 문자열로 설정해주었다.

예를 들어 w 스킬에 마우스를 올리면 isHoverd 라는 state에 w 스킬의 이름을 저장하고, 스킬 이름과 isHoverd가 일치하는 경우에만 div가 출력되도록 설정했다.

모달 코드

  const [isHoverd, setIsHoverd] = useState<string | null>(null);
  const handleHover = (spell: string | null) => {
    setIsHoverd(spell);
  };

• isHoverd : 스킬 이름을 저장하는 state
• handleHover : 스킬 위에 마우스가 올라가면 실행되는 함수

         <div
          className="text-center"
          onMouseEnter={() => handleHover("passive")}
          onMouseLeave={() => handleHover(null)}
        >
          {/* 패시브 이미지 */}
          <Image
            src={detailChampion.passive.image}
            alt={detailChampion.passive.name}
            width={40}
            height={40}
            className="spellImage"
          />
          <p className="spellName relative">
            P
            {isHoverd === "passive" && (
              <div className="absolute flex flex-col items-center left-1/2 -translate-x-1/2 font-normal text-xs top-4">
                <TopArrow />
                <div className="w-max bg-deepBlue text-white px-4 py-2 rounded-lg">
                  {detailChampion.passive.name}
                </div>
              </div>
            )}
          </p>
        </div>

• 마우스가 패시브 스킬 위에 올라가면 onMouseEnter={() => handleHover("passive")} 를 통해 isHoverd가 passive라는 문자열로 set된다
• 마우스가 벗어나면 null로 변경된다.
• isHoverd === "passive" && 조건을 통해 isHoverd 가 passive 일때만 패시브 스킬의 이름을 보여준다.

{detailChampion.spells.map((spell, idx) => (
          <div
            key={spell.name}
            className="text-center"
            onMouseEnter={() => handleHover(spell.id)}
            onMouseLeave={() => handleHover(null)}
          >
            <Image
              src={spell.image}
              alt={`${spell.id}`}
              width={40}
              height={40}
              className="spellImage"
            />
            <p className="spellName relative">
              {idx === 0 ? "Q" : idx === 1 ? "W" : idx === 2 ? "E" : "R"}
              {/* 모달창 부분 */}
              {spell.id === isHoverd && (
                <div className="absolute flex flex-col items-center left-1/2 -translate-x-1/2 font-normal text-xs top-4">
                  <TopArrow />
                  <div className="w-72 bg-deepBlue text-white px-4 py-2 rounded-lg">
                    {spell.description}
                  </div>
                </div>
              )}
            </p>
          </div>
        ))}

• 마찬가지로 onMouseEnter 이벤트를 사용하여 handleHover(spell.id) 를 실행한다.
• spell.id === isHoverd && 여러 스킬이 들어있는 배열을 map으로 순회하고 있기 때문에, 해당 스킬의 id와 isHoverd가 일치하는 경우 해당 스킬의 설명을 띄운다.

적용한 모습!

마우스를 올리면 스킬에 대한 설명이 보인다

MouseOver와 MouseEnter 차이

해당 모달을 위해 검색을 하는데 호버와 관련된 이벤트가 두가지 있었다. over, enter 무슨 차이인가 싶어서 검색해봤더니 전파와 취소에 대한 이야기가 나왔다. 시간이 늦어서 과제 빨리 마무리하고 자고 싶은 마음에 자세히 읽어보지는 못했지만 enter를 쓰는 게 더 나을 것 같다는 생각이 들어서 enter를 사용했다. 참고한 블로그는 이곳이다

발생 문제

Riot API 사용하여 로테이션 챔피언을 불러오기 위해 fetch 작성 중 headers 부분에 빨간줄 경고 출력

오류 발생 부분

const API_URL =
  "https://kr.api.riotgames.com/lol/platform/v3/champion-rotations";
const API_KEY = process.env.RIOT_API_KEY;

export async function GET() { try { const res = await fetch(API_URL, { headers: { "X-Riot-Token": API_KEY, }, }); const data = await res.json(); > return NextResponse.json(data); > } catch (error) { throw error; } }

Route Handlers를 사용하는 것이 필수 과제라 api/rotation/route.ts 경로에서 작업 중이었다.
미션 가이드에는 따로 오류에 대한 말이 없어서 오버로드 관련 검색을 해보았는데 fetch 관련한 게시글은 못찾은 건지 없는 건지 보지 못했고, 타입 관련 오류라는 것만 알아냈다.
headers에 "X-Riot-Token" 옵션이 없어서 그런가? 싶어서 이것저것 만져보긴 했는데 해결은 되지 않았다.

<br/>

#### **문제 원인**
>의외로 원인은 별 거 아닌 것이었다.
경고문이 출력되어 있는 상태로 API_KEY 위에 마우스를 올려보면 타입이 string | undefined 라고 뜬다.
>
![](https://velog.velcdn.com/images/darong_/post/333853fa-b762-4bbf-a9cf-883c7752579a/image.png)
>
그리고 나서 경고문을 다시 읽어보니
`{ "X-Riot-Token": string | undefined; }' 형식은 'undefined' 형식에 할당할 수 없습니다.`
API_KEY 가 undefined 이기 때문에 경고가 뜨고 있는 것 같았다.




<br/>

#### **문제 해결**
>해결 방법은 두가지가 있었다.
>
- **조건문**을 추가하여 API_KEY가 undefined일 때 오류를 생성하여 무조건 string 타입으로 내려보내기.
```tsx
export async function GET() {
  try {
  //API_KEY가 undefined면 오류를 내보냄
    if (!API_KEY) {
      throw new Error("api key undefind");
    }
//자동으로 API_KEY가 string 타입일 때만 이 부분이 실행됨
    const res = await fetch(API_URL, {
      headers: {
        "X-Riot-Token": API_KEY,
      },
    });
>
    const data = await res.json();
    return NextResponse.json(data);
  } catch (error) {
    throw error;
  }
}

이렇게 하면 API_KEY가 string 타입으로 내려오고 있는 걸 확인할 수 있다.

• import 시점에 API_KEY 타입을 string으로 지정하기

  const API_KEY = process.env.RIOT_API_KEY as string;
  >
  export async function GET() {
  try {
    const res = await fetch(API_URL, {
      headers: {
        "X-Riot-Token": API_KEY,
      },
    });
  >
    const data = await res.json();
    return NextResponse.json(data);
  } catch (error) {
    throw error;
  }
  }

  
  이렇게 하면 처음부터 API_KEY가 string 타입으로 내려오기 때문에 오류가 발생하지 않는다.

하지만 혹시라도 API KEY가 지워지거나, 오류가 발생했을 때를 대비하여 첫번째 방법이 좋을 것 같아서 나는 조건문을 추가하는 것으로 해결했다.