inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

커뮤니티를 생성하는 핸들러 생성하기(1)

커뮤니티를 올리고 난 후 404 page

209

157350

작성한 질문수 8

0

커뮤니티 name을 Name1 이렇게 지었으면
http://localhost:3000/r/Name1 이런식으로 바로

넘어가져서 404 page가 뜨는데요 이유가 create.tsx파일

const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();

    try {
      const res = await axios.post("/subs", { name, title, description });

      router.push(`/r/${res.data.name}`);


    } catch (error: any) {
      console.log(error);
      setErrors(error.response.data);
    }
  };

여기서

 router.push(`/r/${res.data.name}`);


이 부분때문에 그런건가요? 원래 커뮤니티 등록하면 넘어가지는게 정상인가요? 강의에서는 안넘어가는걸로 보이는데...

react node.js postgresql docker typescript 클론코딩 next.js

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

질문자님께서 겪고 계신 404 page 문제는 등록된 커뮤니티로 리디렉션을 시도할 때 나타나는 것으로 보입니다. 기술적으로 router.push를 사용하여 생성된 커뮤니티에 바로 접근하는 것은 의도된 행동일 수 있습니다. 하지만, 실제로 해당 커뮤니티 페이지가 존재하지 않거나, 서버 측에서 해당 경로로의 요청을 정상적으로 처리하지 못하는 경우 404 페이지가 반환될 수 있습니다.

강의 “따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)”에서는 이러한 리디렉션 과정이 명확하게 언급되어 있지 않을 수도 있으나, 실제 개발 과정에서는 커뮤니티 생성 후 해당 커뮤니티로의 리디렉션을 시도하는 것이 일반적입니다.

이와 유사한 상황 혹은 문제를 겪은 다른 학습자의 질문을 찾아보지 못했습니다. 그렇기 때문에, 현재 코드의 구현 방식에서 몇 가지 확인해야 할 사항이 있습니다:

  1. 커뮤니티 등록 후 실제로 서버 상에서 해당 커뮤니티 정보가 정상적으로 생성되었는지 확인: 데이터베이스 혹은 서버의 로그를 통해 신규 커뮤니티의 정보가 올바르게 저장되었는지 검증해야 합니다.
  2. 생성된 커뮤니티 경로 요청 처리: 서버 측 라우팅 설정에서 /r/[커뮤니티명] 으로의 요청을 올바르게 처리할 수 있는지, 해당 경로로 요청이 왔을 때 올바른 처리 로직이 구현되어 있는지 확인합니다.
  3. 서버와 클라이언트 간의 동기화 문제: 클라이언트 측에서는 커뮤니티가 생성되었다고 판단하고 리디렉션을 시도하지만, 서버 측에서는 아직 해당 데이터를 처리중이거나 아직 반영되지 않은 상태일 수 있습니다. 이러한 비동기 처리 문제를 검토해야 합니다.

이 문제를 해결하기 위해서는, 추가적으로 서버와 클라이언트의 로그를 확인하며, 라우팅 및 데이터 처리 과정에서의 잠재적 문제점을 조사해야 할 것입니다.

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

toJson을 추가하면 [sub].tsx에서 sub를 받아오지 못합니다.

0

116

2

쿠키 저장이 되지 않습니다.

0

222

1

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', (2)

0

580

1

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE',

0

646

1

overload 에러

0

169

1

docker compose up 오류

0

206

1

부록) remark 강의 중 parmas 오류

0

139

1

3000번은 잘 들어가지는데 80번은 안됩니다.

1

292

0

tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.

0

1039

2

tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?

0

651

2

useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?

0

804

2

리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이

0

4584

2

data 폴더가 생성되지 않아요.

0

523

1

docker-compose up 오류

0

814

1

회원 가입 페이지 기능 생성(3) 중 에러

0

379

2

Entity에 toJSON 코드 입력 후 404 에러

0

252

1

context에서 useEffect 선언 부분 질문 있어요.

0

294

1

src 폴더구조

0

509

2

서버 실행 시 에러 관련하여 답변받고 1차 조치했는데 여전하여서 질문 남깁니다

0

297

1

엔티티 모두 작성 후 서버 실행 시 에러가 발생합니다

0

311

1

회원가입 누르면 404에러가 뜹니다 ;-;

1

420

1

nextjs버젼에 대해서 질문드립니다.

0

372

1

<npm run dev>시 -61 에러가 나타납니다!

0

353

1

docker-compose.yml 은 왜 루트에 하나염

0

327

1