inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

상세 페이지 404 에러 발생

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

안녕하세요, 짐코딩님. 덕분에 재밌는 수업 듣고 있습니다. :) 현재 저는 짐코딩 님의 깃허브에서 => 최종 코드를 clone해서 모두 받은 후 그 중에서 Notion API만 변경해서 제 notion과 연결을 한 후 수업을 수강하고 있습니다. (API 연결 활성화가 되어 있는 캡처본/.env에서도 환경변수로 설정 완료) 혼자서 노션 블로그 게시물 등록 및 조회 테스트를 해보다가 2가지 문제점이 발생했습니다. 제가 직접 노션에 추가한 게시물의 경우 '게시물 목록'에는 뜨지만 상세페이지 클릭했을 경우 404 에러 발생 예를 들어) localhost:3000/blog/web (web은 slug 값) 이렇게 타이핑하면 상세 페이지에 잘 들어가는데, 해당 블로그를 클릭해서 들어가면 아직 url에 localhost:3000/blog/243888f~~ 이런식으로 뜨네요 ㅜㅜ 반영이 늦는걸까요 직접 노션에 추가한 게시물을 노션에서 삭제한 후 브라우저에서 보면 사라지지 않고 '게시물 목록'에 뜨고, 상세페이지를 클릭했을 경우 '404 에러 발생' 제가 직접 올린 노션 게시물만 저런 현상이 발생하고. 짐코딩님께서 미리 작성해놓으신 '웹 개발 학습 가이드'나 'Git 시작하기' 등은 상세 페이지를 클릭하면 잘 뜹니다. 이유를 모르겠습니다 ㅜㅜ 코드를 전달 드리고 싶은데, 짐코딩님 코드를 모두 클론한 걸 사용하고 있어서 어떻게 전달드려야 할지 모르겠어서 우선은 404 에러가 뜨는 이미지와 상황 설명만 먼저 전달 드립니다! 참고로 현재까지 저는 remark and rehype 플러그인 설치 강의까지 학습했습니다! 제가 왕초보라 많이 미흡합니다. 최대한 쉽게 설명해주시면 너무나 감사드리겠습니다! 항상 친절한 답변과 강의 감사드립니다.

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
댓글 2 좋아요 0 조회수 161

스타일이 적용 안되는 문제

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

안녕하세요, 선생님. 현재 블로그 상세 목차 UI까지 강의 수강했는데 코드 수정한 후 local에 띄어보니 스타일이 적용 안되는 문제가 발생했습니다. 선생님 github에서 해당 강의 관련 코드 다 가져와서 복붙 했는데도 저러네요... 제가 왕초보라서 도와주시면 감사하겠습니다!

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
댓글 2 좋아요 0 조회수 130

JWT 발급을 Front에서 하는게 맞는건가요??

해결됨

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

안녕하세요. 강의를 듣던 중 궁금한 부분이 있어서 질문드립니다. 토큰 발급은 기본적으로 백엔드에서 처리하는 것으로 알고있는데, 본 강의에서는 frontend/auth.ts 에서 토큰을 발급하고 있습니다. 의도하신건지? 궁금해서 질문드립니다. 감사합니다.

  • aws
  • docker
  • next.js
  • nestjs
  • prisma
진우 댓글 3 좋아요 0 조회수 227

koreanjson 관련 사이트가 접속이 안되요

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

koreanjson.com 접속이 계속 안되서 대체 사이트가 있을까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
skykwj0422 댓글 2 좋아요 0 조회수 96

사전 렌더링과 getServerSideProps

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요, 강의 잘 듣고 있습니다. 강의를 들으며 이해하지 못한 부분들이 있습니다. NextJS는 페이지 요청을 받았을 때 기본적으로 사전 렌더링(서버에서 JS 렌더링)을 한다고 이해하고 있었는데, 그러면 getServerSideProps함수를 선언하지 않아도 사전 렌더링이 진행되는거 아닌가요? 그런데 본 강의에서는 SSR을 진행하기 위해서는 getServerSideProps를 선언한다고 나와있는데, 그러면 SSR=기본적 사전 렌더링이 아닌건가요? 사전 렌더링은 기본적으로 되는게 아니라 명시적으로 getServerSideProps를 선언해야 가능한건가요? 사전 렌더링은 초기 접속 요청 시에만 진행되는게 맞을까요? 페이지 이동 시에는 진행되지 않나요? 따라서 이 페이지 이동 시에 사전 렌더링을 진행하기 위해서 getServerSideProps를 명시적으로 선언하려는 것인가요? (그렇다면 1번질문 해결) 감사합니다.

  • react
  • typescript
  • next.js
학생 댓글 2 좋아요 0 조회수 105

cursorAI에 rule 생성 시 rule type이 안 나오는 현상 발생

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

안녕하세요, cursor에서 설정 > rules & memories 선택 > Project Rules에서 +Add Rule 선택 > project-structure.mdc 생성하면 강사님 화면처럼 rule type 선택할 수 있는 창이 안 뜹니다. 이유가 뭔지 잘 모르겠습니다 ㅜ

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
산독기 댓글 3 좋아요 0 조회수 219

클라이언트 컴포넌트 사전 렌더링

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

클라이언트 컴포넌트는 서버에서 사전렌더링이 된다고 했는데 이 의미가 하이드레이션 하는부분만 제외하고 html로 렌더링해준다는 말인가요? 서버는 <div data-nextjs-client-component="..."></div> 같은 placeholder 만 내려주고 서버에서 HTML로 렌더링되지 않는다는 말도 있어서 헷갈립니다ㅠㅠ!!

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
Subin Ryu 댓글 2 좋아요 0 조회수 68

4.6강 초기 로딩 속도 케이스 비교

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

4.6강 초기 로딩 속도 케이스 비교 세가지 케이스를 적어주셨는데 case1, case3이 같은 건가요? 제가 이해를 못한 건가 싶어서 세 번 돌려봤는데 같아 보여서요.

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwindcss
  • zustand
보노보노 댓글 2 좋아요 0 조회수 104

17강 질문

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

강의 17 부터는 서버와 데이터베이스가 따로 필요한걸까요? 서버를 따로 구축해야 되는지, 데이터베이스를 추가로 설치해야 되는건지 궁금합니다

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 114

섹션6 헤더 마크업 - zustand 적용에 오류가 발생합니다

미해결

Next.js App router 기반 Chat GPT 만들기

// model.ts import { create } from 'zustand'; type State = { model: string; }; type Action = { updateModel: (model: State['model']) => void; }; const useModelStore = create<State & Action>((set) => ({ model: 'gpt-3.5-turbo', updateModel: (model) => set(() => ({ model })), })); export { useModelStore }; // ModelSelect.tsx 'use client'; import { useModelStore } from '@/store/model'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'; const MODELS = ['gpt-3.5-turbo', 'gpt-4', 'gpt-4o']; export default function ModelSelect() { const { model: currentModel, updateModel } = useModelStore((state) => ({ model: state.model, updateModel: state.updateModel, })); const handleChange = (selectModel: string) => { updateModel(selectModel); }; return ( <Select value={currentModel} onValueChange={handleChange}> <SelectTrigger className="w-[180px] border-none focus:ring-transparent"> <SelectValue placeholder="모델 선택" /> </SelectTrigger> <SelectContent> {MODELS.map((model) => ( <SelectItem key={model} value={model} disabled={currentModel === model}> {model} </SelectItem> ))} </SelectContent> </Select> ); } 위 코드 적용 결과 아래와 같은 무한반복 에러가 발생합니다. 강의 내용과 비교해 보아도 문제를 찾지 못했습니다 ㅜㅜ

  • react
  • typescript
  • next.js
  • tailwindcss
  • zustand
  • chatgpt
댓글 2 좋아요 0 조회수 152

[Next.js] 데이터 스트리밍에 대한 문의드립니다.

해결됨

한 입 크기로 잘라먹는 Next.js

페이지단위, 컴포넌트 단위로 스트리밍은 이해되는데, 만약 테이블에 데이터를 불러오는데, 데이터가 100만개 이럴때 테이블의 첫 페이지에 20개만 불러오고 이런 식으로 동작하게 할 수 있는 스트리밍 방식이 있을까요?

  • react
  • typescript
  • next.js
Ethan 댓글 2 좋아요 0 조회수 80

tailwinde-css

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

궁금한 점 : @apply 핑크로 변하지 않아도 실행은 됩니다! 상관 없는걸까요?? styles.module.css tailwind.config

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
skykwj0422 댓글 2 좋아요 0 조회수 80

Vercel 무료버전 서버속도

미해결

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

강사님 강의 잘봤습니다, 개인적으로 만들고 싶은게 있어서 하다가 postgres_changes로 채팅방 기능을 만들어서 배포를 하였는데 로컬에서는 평균 속도가 200ms인데 vercel 무료로 하니까 1.2s 정도 잡히더라구여 그래서 쿼리문제인가 싶어서 컬럼도 필요한것만 가져오고 나름대로 최적화를 진행했는데도 배포에서만 느려가지고 제가 잘못하고 있나... 그래가지고 무료버전이라서 그런지 궁금합니다.

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
donig1225 댓글 2 좋아요 0 조회수 615

"인터넷 연결을 해주세요!" 라는 메세지가 순간적으로 보이는 문제

해결됨

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

작성하시 코드는 인터넷 연결이 정상적으로 되는 환경에서도 "인터넷 연결을 해주세요!" 라는 메세지가 보이게 되는 문제가 있는데, 실무에서는 어떻게 해결을 하시는지 궁금합니다.

  • react
  • react-native
  • next.js
  • expo
ibtg 댓글 1 좋아요 0 조회수 87

next.js 서버fetch 에러 fallback ui 구현 방법

미해결

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

next 공식문서를 살펴보면 단순 서버 fetch (서버액션x) 관련 에러 핸들링 방법은 딱히 안나와 있는 것 같아 질문드립니다. 만약 SectionA, SectionB, SectionC 서버 컴포넌트 내에서 각각 서버 fetch가 일어난다 가정했을 때 SectionB에서만 요청이 실패했다면 SectionB 영역만 fallback ui를 띄우고 나머지 SectionA, SectionC는 정상적으로 데이터를 렌더링하도록 구현하는 방법이 없을까요? error-boundary 라이브러리는 클라이언트 환경에서만 사용가능해 서버 컴포넌트에선 사용할 수 없고 next 내부적으로 설계되어있는 에러 바운더리(error.js 등)는 전역에러를 캐치하는 걸로 알고있습니다. 때문에 페이지 내 특정 영역만 fallback ui를 띄우는 용도는 아닌 것 같더라구요. 혹시 다른 방법이 있나 궁금합니다 감사합니다!!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
변재정 댓글 2 좋아요 0 조회수 197

next.js 서버fetch 에러 fallback ui 구현 방법

해결됨

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

next 공식문서를 살펴보면 단순 서버 fetch (서버액션x) 관련 에러 핸들링 방법은 딱히 안나와 있는 것 같아 질문드립니다. 만약 SectionA, SectionB, SectionC 서버 컴포넌트 내에서 각각 서버 fetch가 일어난다 가정했을 때 SectionB에서만 요청이 실패했다면 SectionB 영역만 fallback ui를 띄우고 나머지 SectionA, SectionC는 정상적으로 데이터를 렌더링하도록 구현하는 방법이 없을까요? error-boundary 라이브러리는 클라이언트 환경에서만 사용가능해 서버 컴포넌트에선 사용할 수 없고 next 내부적으로 설계되어있는 에러 바운더리(error.js 등)는 전역에러를 캐치하는 걸로 알고있습니다. 때문에 페이지 내 특정 영역만 fallback ui를 띄우는 용도는 아닌 것 같더라구요. 혹시 다른 방법이 있나 궁금합니다 감사합니다!!

  • react
  • typescript
  • next.js
변재정 댓글 2 좋아요 0 조회수 232

git checkout 되돌리기

미해결

Git & GitHub, 원리부터 차근차근 - 근본깃 [AI 더빙]

추가 질문이 있는데요, git checkout [commit ID] 명령어는 현재 working directory의 tracked 파일들과 staging area 의 파일들을 해당 commit 의 상태로 되돌린다고 배웠는데요. 만약... 최종 커밋 이후 working directory에서 작업을 수행하다가, 실수로 git checkout 을 입력해버리면, 다시 기존의 (커밋되지 않은) working directory는 복구할 수 없는 것일까요?

  • git
  • github
yuntae.kang 댓글 2 좋아요 0 조회수 258

파일별 git checkout

해결됨

Git & GitHub, 원리부터 차근차근 - 근본깃 [AI 더빙]

안녕하세요. git checkout [commit ID] 를 통해 예전의 커밋으로 되돌릴 수 있다고 배웠는데요. 현재 working directory에 rectangle 및 circle 이 있고, 현재 커밋 버전이 3일 때, - rectangle 파일은 커밋 2로 되돌리고, - circle 파일은 커밋 1로 되돌리고 싶을 경우 각각의 파일에 대하여 다른 버전의 커밋으로 되돌리는 것이 가능한지 궁금합니다. 실무에서는 이런 일이 빈번하게 일어날 것으로 예상이 되어서요. 이를테면 a 파일에 버그가 난 걸 모른 채로 b 파일을 작업해서 커밋을 완료했는데, a 파일의 버그를 뒤늦게 발견하여 되돌리고자 하는데 이때 b 파일의 작업 내역은 되돌리고 싶지 않을 수 있으니까요. 감사합니다.

  • git
  • github
yuntae.kang 댓글 1 좋아요 0 조회수 92

material 붉은 밑줄

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

이런식으로 저도 그렇고, 로펀님도 그렇고 material 가져올때 붉은 밑줄이 나오는데, 이거 안 나오게 하는 방법이 있나요?

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
빌더 댓글 2 좋아요 0 조회수 139

04-02 Next 페이지 이동

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

useState(0) 부분에서 오류가 나 실행이 안됩니다. 오류를 못찾겠어요ㅠㅠ 알려주세요

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
skykwj0422 댓글 2 좋아요 0 조회수 103

인기 태그

인프런 TOP Writers

주간 인기글