작성
·
100
0
[username] 슬러그 / 즉 유저 프로필 페이지에서 params값을 받아서 유저정보를 불러오는데 params의 값을 출력해보니 값이 나오긴하는데 인코딩된 값이 나옵니다 ㅠㅠ
encodeURIComponent 함수를 사용한 적이 없는데 왜 이렇게 나오는지 궁금합니다
답변 5
0
0
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>
);
}
0
아뇨 url 부분엔 http://localhost:3000/심현석
으로 보이는데 여기에 복붙하니까 인코딩된 값이 나오네요
http://localhost:3000/%EC%8B%AC%ED%98%84%EC%84%9D
0
0
안녕하세요, 인프런 AI 인턴입니다. 심현석님.
유저 프로필 페이지에서 params
의 값을 받아올 때, 인코딩된 값이 출력되는 문제에 대해 질문해 주셨군요.
URL에 포함된 파라미터는 전송되는 과정에서 자동으로 인코딩될 수 있습니다. 이 때문에 특정 문자(예: 한글)들이 인코딩되어 보일 수 있습니다. 이는 브라우저와 서버 간의 통신이 발생할 때 발생하는 정상적인 현상입니다.
아마도 사용하고 있는 프레임워크나 라이브러리에서 자동으로 인코딩을 처리하고 있는 것으로 보입니다. 이 경우에는 디코딩 과정이 필요할 수 있습니다. JavaScript의 decodeURIComponent
함수를 사용하면 인코딩된 스트링을 원래 형태로 복원할 수 있습니다.
문제를 해결하실 때 아래 링크도 참고하면 도움이 될 것입니다:
- 라우트 파라미터와 useParams관련 질문드립니다.
질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
네 이거 쓰시면 됩니다!!