해커톤 회고

• 짧은 시간에 새로운 도구들을 바로 적용해서 서비스를 제작한다는 건 정말 쉽지 않다…
• Type 정의와의 전쟁.. 여태 내가 작성한 코드는 전부 잠재 오류를 무시한 쓰레기였다.
• useRouter() 의 올바른 사용법 미숙지
• 무시된 개발 원칙, DRY(Don’t Repeat Yourself)
• 아직도 모를 FolderName Null 값 문제.. 😱
• setInterceptors 문제..

As-Is : useRouter를 바보같이 사용한 죄..

  const handleClickNext = async () => {
    // 입력 링크 유효성 검사
    if (!link) {
      alert('링크를 입력해주세요.');
      return;
    }
    // 인사이트 제목, 요약, 키워드 요청
    router.push(
      {
        pathname: '/upload/input-text',
        query: {
          link: link,
          imageList: imageList,
          insightImageList: imageList,
          memo: memo,
          folderNameList: data?.map((folder) => folder.folderName),
          source: source,
        },
      },
      '/upload/input-text',
    );
  };

• router.push 메서드를 통해 다음 페이지로 넘어가도록 작성
• 현재 페이지에서 입력한 정보들을 다음 페이지로 넘겨줘야 했던 상황
• 입력 객체를 전부 넘겨주려고 했으나, query 객체 내에는 객체가 들어갈 수 없던 상황
• 하수(Me) : 그럼 각 속성 별로 보내줘야겠다 ⇒ 지옥의 시작..

그래서 다음 페이지에는요..

  const [insightInput, setInsightInput] = useState<InsightPostRequest>({
    insightUrl: '',
    insightTitle: '',
    insightSummary: '',
    insightMainImage: '',
    insightSource: '',
    viewCount: 0,
    hashTagList: [''],
    insightMemo: '',
    insightImageList: [''],
    folderName: '미드저니',
    enable: false,
    remindType: 'DEFAULT',
    remindDays: [1],
  });

• 게시물 저장에 사용될 요청 객체를 선언,

const { source, memo, imageList, insightImageList, link, folderNameList } = router.query;

  useEffect(() => {
    if (result.title) {
      setInsightInput({
        ...insightInput,
        insightSource: String(source),
        insightUrl: String(link),
        insightTitle: result.title,
        insightSummary: String(result.summary),
        insightMainImage: String(imageList?.[0]),
        hashTagList: result.keywords
          ? Array.isArray(result.keywords)
            ? result.keywords
            : result.keywords.split(', ')
          : [],
        insightMemo: String(memo),
        insightImageList: insightImageList
          ? Array.isArray(insightImageList)
            ? insightImageList
            : [insightImageList]
          : [],
        folderName: String(result.folderName),
      });
      setThumbnail(
        imageList ? (Array.isArray(imageList) ? imageList[0] : imageList) : [],
      );
    }

• 보기만 해도 어지러워지는 useEffect 및 대형 사이드 이펙트 탄생.