[👨‍👩‍👧‍👦 팀프로젝트] 3주차 회고

💁🏻‍♀️ 소개

벌써 3주차가 되었다. 시간이 왜 이렇게 빠른지..🥲
시간이 오래 걸렸던 카카오 소셜 로그인 문제도 해결되서 마음 편하게 개발을 했다.
하지만 새로운 난관이 발생했다. (자세한 사항은 아래에서)
이번 주는 저번주 보다 기술적 부채가 줄었지만 완벽하게 줄이기는 힘든 것 같다..
하지만 더 노력해서 최대한으로 줄이도록 노력할 것이다.

✅ 3주차 성과

소셜 로그인을 해결했다.
로그인이 되지 않던 문제는, Redirect URI와 Redirect ID가 다른것 뿐만이 아니라
email을 필수 동의로 받지 않아 생긴 문제였다.
이 과정을 해결하면서 소셜 로그인에 대해 많이 배우게 되었다.
다음 일정인 구글 로그인은 조금 더 수월하게 진행할 수 있으면 좋겠다.

그리고 검색 필터링 기능도 구현을 완료 했다.
최상위 컴포넌트에 2개의 컴포넌트를 렌더링 하도록 구성하였었는데, 여기서 문제가 발생했다.
먼저 PostCard 하위 컴포넌트 안에 fetch로 게시글을 받아와 뿌리도록 했는데, 이 컴포넌트는 다른 페이지에서도 사용되고 있었다.

이렇게 구성을 해서 당연히 search 컴포넌트에서 postCard로 접점이 없기 때문에 전달이 안될 수 밖에 없었다.
그리고 PostCard 컴포넌트 안에서 2개의 fetch를 받고 있어 점점 무거워 질 뿐더러, 컴포넌트의 역할이 정확히 명시되어 있지 않고 막 사용되고 있기 때문에 수정을 해야할 부분이였다.

이 부분을 수정할 때, 여러가지 구상을 하였었다.
첫번째는 search 컴포넌트는 어차피 main에서만 사용하기 때문에 따로 분리할 필요가 없으니, 하나로 합친 뒤 postcard에 전달하는 방식으로 개선을 해봤다.
작동은 잘 되었지만 main 컴포넌트의 길이가 너무 길어져 가독성이 떨어져 결국 다시 분리하기로 결정했다.
search 컴포넌트를 새로 만들어서 main으로 검색 쿼리를 넘겼다.

// search
  const handleSearch = () => {
    const query = {
      area: selectedArea,
      period: selectedPeriod,
      price: selectedDeposit,
      gender: selectedGender,
    }

    onSearch?.(query)
  }
  
 // main
   const handleSearch = async (query: SearchQuery, page = 1, size = 5) => {
    const searchParams = {
      page: page.toString(),
      size: size.toString(),
      region: query.area,
      period: query.period,
      price: query.price?.toString() ?? "",
      gender: query.gender.toString(),
    }

    const queryString = new URLSearchParams(searchParams).toString()

    try {
      const response = await fetch(`/api/articles/filter?${queryString}`, {
        method: "GET",
        headers: new Headers({
          "ngrok-skip-browser-warning": "69420",
        }),
      })

      if (!response.ok) {
        throw new Error("서버 연결 실패")
      }

      const data = await response.json()
      if (data.code === "RESPONSE_SUCCESS" && data.status === "OK") {
        handleSearchResults(data.data)
        setSearchBoxOpen(!searchBoxOpen)
      } else {
        throw new Error("API Error: " + data.msg)
      }
    } catch (error: unknown) {
      console.error("에러", searchParams)
      setSearchBoxOpen(!searchBoxOpen)
      messageApi.error("검색 오류" + error)
    }
  }  

이렇게 수정을 마치고 난 뒤 정상적으로 작동이 잘 되는 것을 확인했다.
최종적으로

이러한 구조를 갖게 되었다.

그리고 모집글과 전체글 버튼을 토글할 시, 모집 상태인지 아닌지 여부를 프론트에서 필터링을 하였는데,
페이지네이션에서 보고 있는 페이지만 필터링이 되고 있는 문제를 확인했다.
결국 백엔드에서 모집글 API를 받아서 버튼 토글 시 boolean 형태로 fetch 부분에 적용 했다.

  // 모집글, 전체글 토글
  const toggleRecruitOnly = () => {
    setShowRecruiting(!showRecruiting)
  }
  
  useEffect(() => {
    // 모집글, 전체글
    const fetchData = async () => {
      try {
        const response = await fetch(
          `/api/${userArticle}?page=${currentPage}&size=9&isRecruiting=${showRecruiting}`,
          {
            method: "GET",
            headers: new Headers({
              "ngrok-skip-browser-warning": "69420",
            }),
          },
        )

        // 전체 게시글 개수
        const countResponse = await fetch(`/api/${userArticle}/total`, {
          method: "GET",
          headers: new Headers({
            "ngrok-skip-browser-warning": "69420",
          }),
        })

        if (!response.ok || !countResponse.ok) {
          throw new Error(`서버 상태 응답 ${response.status}`)
        }

        const data = await response.json()
        const countData = await countResponse.json()

        setPosts(data.data)
        setCount(countData.data)
      } catch (error) {
        console.error(error)
        messageApi.error("데이터 불러오기 오류")
      }
    }

    fetchData()
  }, [currentPage, showRecruiting, messageApi])

✅ 트러블 슈팅 정리

• ⛔️ Problem ➡️ 모집글, 전체글 토글 버튼을 클릭 시, 프론트에서 필터링 하였는데, 보이는 페이지만 필터링 되는 문제 발생
  🏃‍♀️ Try ➡️ API 쿼리 부분을 true, false로 버튼 클릭 시 변경되어 서버에 요청하도록 수정
  ✅ solve ➡️ 정상적으로 모집글, 전체글을 불러옴

---

• ⛔️ Problem ➡️ 카카오 소셜 로그인 인가 코드가 전달되지 않는 문제 발견
  🏃‍♀️ Try ➡️ REDIRECT_URI이 https로 되어있어 http로 수정
  ✅ solve ➡️  정상적으로 code를 백엔드로 넘기는데 성공함

---

• ⛔️ Problem ➡️ search 컴포넌트에서 PostCard 컴포넌트로 Props가 전달이 되지 않는 문제 발생
  🏃‍♀️ Try ➡️ PostCard 컴포넌트에서 fetch를 받기 때문에 생긴 문제임을 인지하고, 최상위 컴포넌트에서 fetch를 사용하고 searchBar와 PostCard로 props 전달
  ✅ solve ➡️  정상적으로 검색 필터링 작동

---

📈 반성 및 개인적 성장

문제를 해결하는데 다소 시간이 걸렸지만, 그 시간동안 성장해서 일까?
전에 짜놓은 코드를 보니 무슨 생각으로 저렇게 짰는지 의문만 들었다.
개발을 시작하기 전에 컴포넌트 구성을 어떻게 할 것인지, 어떤 형식으로 작동할 것인지 잘 구상후 개발을 해야한다는 것을 뼈저리게 느꼈다.
앞으로는 꼭 신중히 생각하고 개발을 해야겠다.

⛳️ 4주차 목표

• 구글 로그인 구현
• 신청 현황 프로필, 게시물 불러오기