FE/#229 유저 검색 페이지 마이그레이션

[Yujin-Baek]

🛠️ 변경사항

• api 호출 방식 변경 axios → fetch

• import 된 라이브러리 설치

  yarn add "@types/uuid"

• useNavigate → useRouter

• react-router-dom의 URL 파라미터 → Next.js dynamic routing

  • 참고자료 : https://opentutorials.org/course/5098/32350

  • react-router-dom 방식

    <Route
      path="/searchUser/:userName"
      element={<SearchUserPage />}
    />

  • Next.js dynamic routing 방식(nickname이 URL 파라미터)

    폴더구조 app/(search)/search-user/[nickname]/page.tsx

• useParams(react-router-dom) → Next.js dynamic routing

  • react-router-dom의 useParams 방식

    import { useNavigate, useParams } from 'react-router-dom';
    // ...
    function SearchUserPage() {
    // ...
    	const params = useParams(); // react-router-dom useParams 사용 선언
    // ...
    	try {
          const res = await tokenApi.get('/members', {
            params: { nickname: params.userName },
          });
          if (res.data.data.length === 0) {
            setData([{ nickname: '검색 결과가 없습니다.', email: '' }]);
          } else {
            setData(res.data.data);
          }
        } catch (error) {
          console.log(error);
          alert('검색 결과가 없습니다.');
          navigate('/');
        }
    // ...

  • Next.js의 dynamic rounting 방식

    • Next.js의 dynamic routing 방식을 사용하면 useParams를 사용하지 않고도 URL 파라미터를 가져올 수 있음

    type ParamsType = {
      params: {
        nickname: string
      }
    }
    
    export default function SearchUserPage({ params }: ParamsType) {
    // ...
    		const res = await fetch(
          `${process.env.NEXT_PUBLIC_BASE_URL}/members?nickname=${params.nickname}`,
          {
            headers: {
              'Content-Type': 'application/json',
              Authorization: `Bearer ${accessToken || persistToken}`,
            },
          },
        )
    // ...

• img태그 → 'next/image’의 Image 태그로 변경

☝️ 유의사항

• NavBar 컴포넌트 마이그레이션 후, import 해야함

👀 참고자료

• https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
• https://opentutorials.org/course/5098/32350

❗체크리스트

• 하나의 메소드는 최소의 기능만 하도록 설정했나요?
• 수정 가능하도록 유연하게 작성했나요?
• 필요 없는 import문이나 setter 등을 삭제했나요?
• 기존의 코드에 영향이 없는 것을 확인하였나요?

[github-actions]

Unit Test Results

86 tests  ±0   86 ✔️ ±0   4s ⏱️ -1s
17 suites ±0     0 💤 ±0 
17 files   ±0     0 ❌ ±0 

Results for commit 2aea10d. ± Comparison against base commit 1f747c6.

[Mayreeel]

동적 라우팅 쓰셨군요! 수고하셨습니다!!