[TIL : 230610]

🌊 TIL : 2023년 6월 10일  

 

오늘 한 것

• Youtube Clone Header 제작
• Youtube Clone 데이터 요청 중... 
• git flow 공부
• 프로그래머스 1단계 3문제 풀기 📣

 

 

 

 

잘한 점

상황

사실 아주 쉬운 문제여도 풀어보기 위해 프로그래머스 문제 1단계.. (아주..귀여움)을 풀고 있다. 

 

액션

거의 내팽개치곤ㅋㅋ했는데.. 노력했으니까 조금 더 늘려가자

 

칭찬

 

 

배운 점

배움

 

/videos/:videoId와 같은 route가 있을 때, 이 route에 접근하는 URL이 /videos/123라면 useParams를 사용하면 { videoId: '123' }와 같은 객체를 얻을 수 있다.

const { videoId } = useParams(); 
// useParams hook을 통해 URL 파라미터를 가져와 'videoId'에 할당함을 의미.
// * videoId라는 이름이 파라미터가 실제로 존재해야한다. 
// route 정의가 /videos/:videoId여야 한다.

 

handleSubmit 함수에 이벤트 객체 매개변수에 타입을 지정해줄 때 React.FormEvent<HTMLFormElement>를 지정해주어야 한다. 

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    navigate(`/videos/${text}`);
    setText('');
  };

 

오늘 배움의 의미

typescript를 0.5%정도 더 알게 되다.. 

 

개선점

문제

type Video = HotTrendItem | SearchResultItem;

export default function VideoList() {
  const { keyword } = useParams();
  const {
    isLoading,
    error,
    data: videos,
  } = useQuery<Video[]>(['videos', keyword], async () => {
    return fetch(`/data/${keyword ? 'keyword' : 'HotTrend'}.json`)
      .then((res) => res.json())
      .then((data) => data.items);
  });
  return (
    <>
      <div>리스트 {keyword ? keyword : 'Hot Trend'}</div>
      {isLoading && <p>Loading</p>}
      {error && <p>Something is Wrong</p>}
      {videos && (
        <ul>
          {videos.map((video: Video) => (
            <VideoItem
              key={'id' in video ? video.id : video.id.videoId}
              video={video}
            />
          ))}
        </ul>
      )}
    </>
  );
}

 

코드를 작성했으나 빨간색 에러 표시가 뜬다.

원인

아직 모르겠음.. 사실 받아오는 데이터 종류에 따라 id의 위치가 다른데 search 한 후에는 video.id로 찾을 수 있지만 hot trend 데이터는 video.id.videoId로 불러올 수 있었다. 이렇게 코드를 작성하니

이렇게 출력이 되고 있어서 갈피를 못 잡겠다.

 

그리고 video에 type을 지정해주었는데 json 전체를 type으로 적어주는 것이 맞는 지 잘 모르겠다. 

이렇게 길게 작성하는 것이 진정 옳은 길인가.. 모든 api 요청시 이렇게 인터페이스를 지정해줘야 한단 말인가.. 지금 혼돈에 쌓여있다. 

해결 방법

내일 머리를 깨트려서 다시 본다. 

 

 

그 외

그 외.. 감사하게도!! 멋진 아이디어를 가지고 메인프로젝트를 함께 하자고 권유해주신 분이 계시다 ㅠㅇ ㅠ

사실 메인프로젝트 기간 될 때 까지 팀원을 절대 못 구할 거라 생각해서 조금 의기소침 했는데 제안해주셔서 너무나 감사하다..

근데 내 코딩 실력 떄문에 ㅠㅇ ㅠ.. 피해를 끼칠까봐 조금 더 열심히 공부해야겠다. 아직 next.js는 한 번도 공부한 적 없는데 next.js와 emotion을 파헤쳐봐야겠다. 근데 emotion 언뜻보면 styled-components랑 비슷한 것 같다. 흠흠 

난 짱이 되어야지