Cộng đồng Hỏi & Đáp của Inflearn

아 제로초님 강의는 아이디 부분이 다 영어라서 인코딩되지 않았던거였네요 그럼
그럼 AI 답변과 같이 decodeURIComponent 함수 사용하면 될까요 ?

import style from './profile.module.css';
import BackButton from '../_component/BackButton';
import UserInfo from './_component/UserInfo';
import { useSession } from 'next-auth/react';
import { Metadata } from 'next';
import { User } from '@/model/User';
import { getUserServer } from './_lib/getUserServer';
import { auth } from '@/auth';
import { HydrationBoundary } from '@tanstack/react-query';
import { dehydrate } from '@tanstack/react-query';
import { QueryClient } from '@tanstack/react-query';

import { getUserPosts } from './_lib/getUserPosts';
import UserPosts from './_component/UserPosts';
export async function generateMetadata({ params }: { params: Promise<{ username: string }> }) {
    // Promise<{ username: string }>는 Promise 객체를 반환하는 비동기 작업의 결과가 특정한 형태의 객체라는 것을 나타냅니다.
    const { username } = await params;
    console.log(username);
    const user: User = await getUserServer({ queryKey: ['users', username] });
    return {
        title: `${user.nickname} 프로필`,
        describe: `${user.nickname} 프로필에 오신걸 환영합니다`,
    };
}
export default async function Profile({ params }: { params: { username: string } }) {
    const { username } = await params;
    const session = await auth();
    console.log(username);
    const queryClient = new QueryClient();
    await queryClient.prefetchQuery({ queryKey: ['users', username], queryFn: getUserServer });
    await queryClient.prefetchInfiniteQuery({
        queryKey: ['posts', 'users', username],
        queryFn: getUserPosts,
        initialPageParam: 0,
    });
    const dehydratedState = dehydrate(queryClient);

    return (
        <HydrationBoundary state={dehydratedState}>
            <main className={style.main}>
                <UserInfo username={username} session={session} />
                <UserPosts username={username} />
            </main>
        </HydrationBoundary>
    );
}

아뇨 url 부분엔 http://localhost:3000/심현석
으로 보이는데 여기에 복붙하니까 인코딩된 값이 나오네요
http://localhost:3000/%EC%8B%AC%ED%98%84%EC%84%9D

유저아이디에 특수문자가 들어갔나요? 주소창을 통해 입력하는 경우는 자동으로 encoding될 수 있습니다

안녕하세요, 인프런 AI 인턴입니다. 심현석님.

유저 프로필 페이지에서 params의 값을 받아올 때, 인코딩된 값이 출력되는 문제에 대해 질문해 주셨군요.

URL에 포함된 파라미터는 전송되는 과정에서 자동으로 인코딩될 수 있습니다. 이 때문에 특정 문자(예: 한글)들이 인코딩되어 보일 수 있습니다. 이는 브라우저와 서버 간의 통신이 발생할 때 발생하는 정상적인 현상입니다.

아마도 사용하고 있는 프레임워크나 라이브러리에서 자동으로 인코딩을 처리하고 있는 것으로 보입니다. 이 경우에는 디코딩 과정이 필요할 수 있습니다. JavaScript의 decodeURIComponent 함수를 사용하면 인코딩된 스트링을 원래 형태로 복원할 수 있습니다.

문제를 해결하실 때 아래 링크도 참고하면 도움이 될 것입니다:
- 라우트 파라미터와 useParams관련 질문드립니다.

질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.