[Codecamp-team project] Day 19 사진찍기, 댓글 구현하려다 API 구멍들 발견, 무한스크롤을 위한 page 없는 API들 발견

📌 이제와서 팀플 뒤돌아보기

기능을 구현하면서 느끼는건데 우리 팀플은 굵은 기능보다 자잘자잘한 기능이 참 많다
그래서 API 목록도 엄청남...
근데 그 API들마다 page도 들어가야하고 프론트에서는 그걸 다 무한스크롤로 뿌려줘야하고...
각각 필터있는 곳이 많아서 필터별로 또 따로 뿌려줘야하고...

실력이 늘어나는 코딩이라기 보단 엄청난 노가다 코딩같단 생각이 든다

📌 API 지옥

프론트에서 기능 하나 붙이려고 플레이그라운드를 뒤지면 없는 API가 우르르 나온다
다행히 플레이그라운드에서 찾으면 그 API 안에 page가 없거나 필수 return값이 없거나...
우리가 애초에 기획서를 제대로 짜지 않은 탓 같다
처음부터 필요한 기능과 API를 정리하고 시작했으면 이렇게 구멍이 생길 때마다 메꾸는 방식은 아니였을텐데 이제와서 후회가 된다
아니 어쩌면 정리를 안한게 아니라 기획안을 뒤집는 바람에 정리를 못한걸지도..?

📌 단체사진, 개인 프로필 찍기

스튜디오 이웃에 가서 프로필 사진을 찍었다
사진은 역시 어렵고, 원본 보기는 역시 괴롭다
뭔가 8만원이란 거금을 써서 미친듯이 엄청난 인생사진을 겟하고 싶었는데 그정도까진 아닌 것 같은 느낌..?
사실 사진을 신경 쓸 정신이 없다 지금

📌 "Rendered more hooks than during the previous render" 에러 발생

또 처음 보는 에러를 마주했다
rendering 관련 에러 메세지라 엄청 무서웠다
괜히 useEffect랑 연결될 것 같고 next js 근본적인 원리까지 다시 다 짚어봐야할 것 같고... 시간은 진짜 없고...

구글링을 통해 이 에러에 대해 친절히 정리해둔 블로그를 발견!
https://velog.io/@yhe228/React-Error-Rendered-fewer-hooks-than-expected-react-hooks-%EA%B7%9C%EC%B9%99

이 블로그를 보고 나서 생각해보니 유저인지 전문가인지 구분해주는 함수를 삼항연산자 안에 직접 불러서 생긴 오류 같았다

[전문가 여부 구분 API]

import { gql, useQuery } from "@apollo/client";
import { IQuery } from "../types/generated/types";

const IS_SPECIALIST = gql`
  query isSpecialist {
    isSpecialist
  }
`;

export function getSpecialist() {
  const { data } = useQuery<Pick<IQuery, "isSpecialist">>(IS_SPECIALIST);
  return data;
}

[해당 함수를 불러 온 header의 햄버거버튼 메뉴]

[수정 전] : 삼항 연산자 안에서 hooks인 useQuery를 직접적으로 사용해서 에러가 뜬 것 같다

const isSpecialist = getSpecialist();

  const onClickMyPage = () => {
    setOpen(false);
    isSpecialist.isSpecialist && router.push("/expert-my-page");
	isSpecialist.isSpecialist || router.push("/my-page/");
  };

[수정 후]

const isSpecialist = getSpecialist()?.isSpecialist;

  const onClickMyPage = () => {
    setOpen(false);
    isSpecialist && router.push("/expert-my-page");
    isSpecialist || router.push("/my-page/");
  };