인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

심현석님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

에러 상황 처리하기(유저 정보 없음)

params 질문

작성

·

100

0

[username] 슬러그 / 즉 유저 프로필 페이지에서 params값을 받아서 유저정보를 불러오는데 params의 값을 출력해보니 값이 나오긴하는데 인코딩된 값이 나옵니다 ㅠㅠ

encodeURIComponent 함수를 사용한 적이 없는데 왜 이렇게 나오는지 궁금합니다

답변 5

0

심현석님의 프로필 이미지
심현석
질문자

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네 이거 쓰시면 됩니다!!

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

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

아, 한글도 원래 기본적으로 인코딩됩니다. ascii코드 아니면 인코딩돼요

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

0

인프런 AI 인턴님의 프로필 이미지

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

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

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

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

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

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