프론트엔드 부트캠프 69일차, 팀 프로젝트(15) 타입스크립트~!, 더보기, 활성버튼 표시, 카테고리 검색

 

1. useForm- TypeScript

어제 계~속 헤맸는데 오늘 용님한테 물어보고 바로 답을 얻었습니다.
근데 어디서 찾는거죠 이런거ㅠㅠ

! 물어보고 쓰는 글

type에 아무거나 적어서 마우스대보면
FormState<FieldValues> 형식은... 이라고 친절하게 알려준다!

근데 난 이게 안됐었는데, 어제 썼던 글에 있듯이 useForm<Comment>이런식으로 가져와서였다.

const { register, handleSubmit, formState, setValue, trigger, reset } =
    useForm({
      mode: "onChange",
    });

그래서 useForm뒤에 아무것도 안붙여줬다!

handleSubmit에 타입을 주면 그게 감싸고 있는 onClickUpdate랑 onClickSubmit이 할당할 수 없습니다!!!!! 이래서
그냥 Function 으로 써주었다. 근데 Function이 안되는 곳도 있다.. why? 내쪽은 아니고 골드채 부분이어서 자세힌 못 봤는데 일단 그 부분은 any로 썼다.

formState: FormState<FieldValues>;
  handleSubmit: UseFormHandleSubmit<FieldValues>;
  register: UseFormRegister<FieldValues>;
  onClickUpdate: Function;
  onClickSubmit: Function;

2. Event 타입 지정 'EventTarget' 형식에 'id' 속성이 없습니다.ts(2339)

입력하는건 ChangeEvent, 클릭하는건 MouseEvent를 쓴다.

const onClickMenu = (event: MouseEvent<HTMLDivElement>) => {
    router.push(event.target.id);
    const activedMenu = event.target.id;
    setActivedMenu(activedMenu);
  };

이렇게 쓰면 'EventTarget' 형식에 'id' 속성이 없습니다.ts(2339) 라고 타입 오류가 뜬다.

1. if (event.target instanceof Element) 앞에 붙이기
2. if (event.target instanceof HTMLDivElement) 앞에 붙이기
3. event.target as HTMLDivElement 라고 써주기
*여기서 HTMLButtonElement가 되기도 하고, input이 되기도 하고...자기가 쓴 것에 따라서 바꿔쓰면 된다.

 

const onClickMenu = (event: MouseEvent<HTMLDivElement>) => {
    if (event.target instanceof Element) router.push(event.target.id);
    if (event.target instanceof HTMLDivElement) const activedMenu = event.target.id;
    setActivedMenu(activedMenu);
  };

const activedMenu = (event.target as HTMLDivElement).id;

 

3. state 타입 지정하기

 

  const [activedMenu, setActivedMenu] = useState<string>("");

4. 더보기 버튼을 누르면 나올 게 없을 때 Uncaught(in promise) 에러가 나오는 현상(약간 불쾌한 Error창)

 

  const { data, fetchMore } = useQuery(FETCH_THEMES);

   const loadFunc = () => {
     if (!data) return;
     fetchMore({
       variables: { page: Math.ceil(data?.fetchThemes.length) / 12 + 1 },
       updateQuery: (prev, { fetchMoreResult }) => {
         if (!fetchMoreResult.fetchThemes)
           return {
             fetchBoards: [...prev.fetchThemes],
           };
         return {
           fetchBoards: [...prev.fetchThemes, ...fetchMoreResult?.fetchThemes],
         };
       },
     });
   };

if(!fetchMoreResult.fetchThemes) 에서 걸러질 줄 알았는데 에러 메세지가 떴다.
하얗고 큰 불쾌한 빨간글씨의 에러창이...
이걸 사용자가 보면 진짜 어이없겠지,,,왜냐면 나도 어이없으니까!

그래서 Uncaught 라고 써져있길래 try ... catch를 추가했는데, 그래도 에러메세지가 둥 떴다.

그래서! in promise라고 써져있는 걸 보고 async와 await를 추가했다.

const onClickMoreButton = async () => {
    if (!data) return;

    try {
      await fetchMore({
        variables: { page: Math.ceil(data?.fetchThemes.length) / 6 + 1 },
        updateQuery: (prev, { fetchMoreResult }) => {
          console.log(fetchMoreResult.fetchThemes);
          if (!fetchMoreResult.fetchThemes)
            return {
              fetchThemes: [...prev.fetchThemes],
            };
          return {
            fetchThemes: [...prev.fetchThemes, ...fetchMoreResult?.fetchThemes],
          };
        },
      });
    } catch (error) {
      Swal.fire((error as Error).message);
    }
  };

이렇게 하니 예쁜 Swal 모달창이 뜬다 ^3^
지금은 에러 메세지 말고

이걸로 바꿨다.


이제 카테고리별로 보는 기능을 만들어보겠다!~

 

 

++) 2023년 1월 6일에 추가... 볼 때 마다 생각한 건데, 받아올 데이터가 없으면 아예 더보기가 사라지게 만들고 싶다. 

react query배울 때 다음꺼가 있는지 없는지 받아오는 게 있었던 것 같은데, 가능한가? 

5. 카테고리로 검색하기

 

 const [genre, setGenre] = useState("");

  const { data, fetchMore } = useQuery(FETCH_THEMES, {
    variables: {
      search: genre,
    }
  });

genre라는 state를 만들고 패치쿼리 보낼 때 이 스테이트를 같이 보내주면 되지 않을까? 싶은데,
그럼 state가 바뀔때마다 다시 쿼리가 보내져야하는데 그게 되나?

const onClickGenre =
    (el: string) => (event: MouseEvent<HTMLButtonElement>) => {
      console.log(props.genre);

      props.setGenre(el);
      props.refetch(FETCH_THEMES, {
        variables: {
          search: props.genre,
        },
      });
    };

이렇게 함수를 써봤는데 어.. 정말 음... 당연히 안되나 /? 리패치 쓰는 방법이 이게 아닌 것 같다.
일단 이걸 presenter에서 쓰고 있었는데 container로 가져왔다. 이게 refetch, setGenre, genre 다 보내는 것도 불편하고, 패치테마s쿼리 또 가져오는 것도 불편하기 때문에...! container에서 하는 게 맞는 것 같다.

장르 누를때마다 쿼리를 보내는 수밖에 없나?!

그래서 최종코드 !!!!!

 const [genre, setGenre] = useState("");

  const { data, fetchMore } = useQuery(FETCH_THEMES, {
    variables: {
      genreId: genre,
    },
  });
  
   const onClickGenre = (id: string) => () => {
    console.log(id);

    setGenre(id);

    // refetch({ genreId: genre }); // 리패치로 하면 한박자씩 느리다.
  };

누를때마다 누른 애의 id값을 가져와서 genre를 바꿔준다. 그러면 자동으로 필터되어 보인다!

근데 grid autofill때문인가? 왼쪽 라인이 튀어나왔다가 들어갔다가! ㅠㅠㅠ
그리고 버튼 누르면 색 바뀌게 해야하고 전체 누르면 전체 다 보이게 해야하고 아무것도 장르01 지우고 아무것도 없는 장르는 빼야하지 않나 장르태그가 너무 얌체같이(????) 들어간 것 같기도

6. 선택여부에 따라 버튼색 바뀌게 하기

//container
const [myIndex, setMyIndex] = useState(
    Array(fetchGenres?.fetchGenres.length).fill(false)
  );

  const onClickGenre =
    (id: string, i: number) => (event: MouseEvent<HTMLButtonElement>) => {
      const temp = Array(fetchGenres?.fetchGenres.length).fill(false);
      temp[i] = true;
      setMyIndex(temp);
      setSelectAll(false);
      setGenre(id);
    };

  const onClickAllGenre = () => {
    setGenre("");
    setSelectAll(true);
  };
  
//presenter
<S.GenreList>
        <S.Genre onClick={props.onClickAllGenre} isPicked={props.selectAll}>
          전체
        </S.Genre>
        {props.fetchGenres?.fetchGenres.map((el: IFetchGenres, i: number) => (
          <S.Genre
            onClick={props.onClickGenre(el.id, i)}
            isPicked={props.myIndex[i]}
            key={el.id}
          >
            {el.name}
          </S.Genre>
        ))}
      </S.GenreList>

좀 복잡해보이긴 하는데 이 방법밖엔 생각이 안 났다. 함수도 두 개나 쓰고...!!!
더 좋은 방법을 찾고 싶다.

7. img의 src 속성 css에서 주기

// 인라인
<img src="/img/pingping.png" />


// css 
img {
    content: url("/img/pingping.png");
  }

🐻 프론트엔드
- 각자 맡은 부분에 api 넣기, 애니스크립트가 아닌 타입스크립트로 바꾸기

🐻‍❄️ 백엔드
- 으쌰으쌰 api! 오늘 로그인도 성공~

🍚 점심
- X 죄인은 먹을 자격이 없다.

🍬 간식
- 잰이가 준 사과맛 마이쮸

☕️ 커피
- X 와 커피도 진짜 습관이구나...!

🎵 노래
- X

👀 비고
- 오늘... 오늘도 힘들었는데?!

어째서 오늘도 힘든 것일까

오늘 늦게 출근해서 10시넘어 퇴근했으니 그렇게 오래 있었던 것은 아니다. 내 생각엔 밥을 안 먹어서 같다.

내일은 간단하게 먹을 달걀 같은 거라도 챙겨야겠다. 아니 이렇게 말하니까 진짜 게임 아이템 같아...!

타입스크립트... 타입 지정은 해도해도 또 나왔다. 완전 초보라서 배우는 갭이 커서 이건 어쩔수없이 any야! 했던 것들을 다시 뒤집어엎고 그러면서 깃 충돌나고... 그래도 이 정도 충돌은 괜찮다. 사실 지금까지 중대한 실수를 하지 않았다는 것만으로도 감사하고 있다. 충돌난 부분 복구해놨으니 내일 또 변경해야지. 아, Feature하나에 하나만 담는 것은 뭔가 어렵다. 하다보면 자꾸 다른 것도 같이 하게 돼서 여러개가 담긴다. 하지만 Feature 나누고 이슈를 쓰는 이유가 있겠지..? 이 부분도 좀 더 주의하자.

 

날씨가 그렇게 덥지는 않았다. 잠시 우체국에 다녀왔는데 다녀올만 했다. 뭔가 우체국에... 다녀온다니! 진짜 근무하다가 갔다오는 느낌이었다. 그리고 오늘 늦기도 했고... 그래서 수박 주스, 사과 주스, 흑당 밀크티를 샀다. 흑당 밀크티는 전에 타이거슈가 얘기한 게 생각나서 샀다. 편의점에서 놓칠 수 없는 혜택 1+1, 2+1도 받아서 샀다. 그리고 난 욕심쟁이라 수박 주스랑 사과 주스 두 개 다 먹고 싶어서 하나씩 남겼다... 근데 수박 주스가,,, 수박 사탕맛 주스였어. 이 음료 시리즈 좋아하는데 약간 실망이야... 사드린 분들께도 약간 죄송했다.

메인에 넣는 거 안된다고 했다...
내 개인 포트폴리오에나 넣어야지.. ㅎ
나는 화려한 게 하는 편이라고들 했다... 내 취향만 맞추는게 아닌 대중적인,, 눈을 기르자..

 

+ 막내님 사진 찍어드린거 보정했다💛💛