묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
params 에 Promise 객체 타입이 지정되어야 하는 이유? 최신?
안녕하세요! 강의 5:15초 부터의 설명에 조금만 더 자세히 설명해주시면 감사할것 같아서요!"이러한 파람즈도 프라미스로 가져와야겠죠 우리가 최신을 사용하고 있기 때문에 다시 generateMetadata 함수를"라고 스크립트(영상자막)는 나와 있는데, 이유를 설명하는 파트가 잘 안 와닿아서 혹시 설명해주실 수 있나요?직관적으로 생각하면 export generateStaticParams에서 slug 를 params으로 가져오는데 시간이 걸리니까, 기다려야 하니까 await 으로 params를 기다리는건 알겠는데, 'params'가 왜, 어떻게 해서 Promise 타입인지 궁금합니다. 너무 두서없었네요. 정리하자면1.왜 params 가 Promise 객체 타입인지, 코드 어디에서, 어떻게 해서 Promise 객체 타입이 되었는지 궁금합니다.2. 혹시 params 가 Promise 객체 타입인 이유는, 그저, [slug]폴더로 동적페이지로 정의되었으니, 컴포넌트로 들어오는 입력값 {params}는 [] 안에 들어간 변수값이 들어오는 건가요? 그래서 그냥 nextjs 스펙상 무조건promise 로 params 가 주어지게 되는건가요?너무너무 헷갈려서 그런데, 동적라우팅/정적 라우팅 별, 그리고 Clientside /serverside 별로 4가지로 나누어서 params 가져오는 방법을 설명해주실수 있나요? 너무너무 헷갈리네요.... 동적/정적라우팅에 따라 나뉘나요, client/server 에 따라 나뉘나요? 후자인걸로 생각하고 있긴 한데 맞는지 너무 헷갈리네요.. 감사합니다! 좋은 하루 되세요!
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
streaming 페이지 보완 필요
안녕하세요, 잘 학습하고 있는 학생입니다. 강의 따라가면서, streaming 파트는 다 적용을 했습니다. 소개 탭에서 홈 탭으로 이동 시에 태그목록과 포스트리스트도 skeleton 로딩페이지 잘 적용됩니다.'홈'을 눌렀을때, 기존의 '로딩 되는 중에 아무 변화 없이 사용자를 마냥 기다리게 함'에서 현재의 '로딩 되는 중에 skeleton 보여줌으로써 로딩되고 있음을 나타내줌'으로의 개선은 사용자 경험에 있어서, 정말 효과적인 방법이라고 느꼈습니다. 다만, 문제가 있습니다. '홈' 을 눌러 이동하는 경우말고, 태그 목록에서 나머지 'css'태그, 'git'태그 등등 이를 직접 클릭해서 이동하는 경우에는 streaming 이 적용되지 않습니다.예를 들어, 홈을 클릭한 상황에서는 skeleton ui가 잘 나타나지만, 그렇게 홈으로 이동한 상황에서 다른 태그(css,Git 등)로 다시 이동하는 상황에서는 적용되지 않고 그대로입니다. 이를 해결하기 위해선 어떻게 해야 하나요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
remark-gfm
remark-gfm 설치 이후 모든 css 가 망가지고 글자와 이미지만 렌더링 되는데 뭐가 문제일까요? global css 에서 import 한것도 아니고 영상과 같이 Plugin 으로 했어요.next-mdx-remote 깃헙 보니까 업데이트도 1년 지났고 버그 로그 많던데 그거 때문이려나요? https://github.com/hashicorp/next-mdx-remotenext 공식문서에서도 next-mdx-remote 는 더이상 없고 next-mdx-remote-client 만 있던데 그거 쓰면 되는걸까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
마크업 파트 가독성 향상 방법
전부 다 따라하면서 배우고 있습니다!다만, 마크업 파트 에서 이렇게 글자 색으로 인해 가독성이 떨어지는데 마크업 파트 속성을 바꿀 방법은 없을까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
Next.js 블로그 결과물 공유 이벤트 진행 여부
안녕하세요, 선생님. 아직 디스코드에 Next.js 블로그 결과물 공유하면 실용적인 블로그 소스코드 받을 수 있는 이벤트 진행하고 있나요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
블로그 PostCard 이미지 상단 여백
주신 코드 그대로 이해하면서 보고 했는데, 분명 postcard 내부에서 Image태그를 감고 있는 div 태그들을 봐도, object-cover 로 부모 요소를 가득 채우는 양식으로 되고 있는데, 왜 이미지 상단에 여백이 생기는걸까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
flex-col 과 space-y-6 차이
space-y-6과 flex-col 로 gap-6(또는 gap-y-6)을 주는 방식의 차이를 모르겠어요둘다 같은 결과를 초래하는것 아닌가요?이번 코드에서 둘다 사용하시길래, 어떤 상황의 차이로 코드를 다르게 사용했는지 궁금해서 여쭙니다
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
컴파일 에러 및 의존성 충돌 문제
안녕하세요, 진행하다가 여러 이슈가 발생해서 한 번에 묶어 여쭤보고자 합니다!오류가 계속 발생해서 강사님 코드도 보았는데도 잘 모르겠습니다. Q: Hydration Mismatch 에러가 발생합니다. 서버와 클라이언트에서 렌더링되는 HTML이 다르다는데 어떻게 해결하면 될까요? Q: Next.js 15.3.0에서 remarkGfm과 rehype 플러그인들이 호환성 문제가 발생합니다."Cannot read properties of undefined (reading 'inTable')" 에러 // app/blog/[slug]/page.tsx <MDXRemote source={markdown} options={{ mdxOptions: { remarkPlugins: [remarkGfm], rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode], }, }} /> Q: next-mdx-remote에서 rehype 플러그인 사용 시 타입 에러가 발생합니다."Type 'Transformer<Root, Root>' is not assignable to type 'Transformer<any, any>'" 에러// app/blog/[slug]/page.tsx (164번째 줄) rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode],Failed to compile. ./app/blog/[slug]/page.tsx:164:62 Type error: Type '(options?: Options | undefined) => void | Transformer<Root, Root>' is not assignable to type 'Pluggable<any[]>'. 162 | mdxOptions: { 163 | remarkPlugins: [remarkGfm], > 164 | rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode], | ^ Next.js build worker exited with code: 1 and signal: null Q: react-day-picker와 date-fns 버전 충돌이 발생합니다.react-day-picker@8.10.1은 date-fns@^2.28.0 || ^3.0.0을 요구하는데,현재 date-fns@4.1.0이 설치되어 있어서 충돌합니다. // package.json { "dependencies": { "date-fns": "^4.1.0", "react-day-picker": "^8.10.1" } }Error: Command "npm install" exited with 1 npm error code ERESOLVE npm error ERESOLVE could not resolve npm error While resolving: react-day-picker@8.10.1 npm error Found: date-fns@4.1.0 npm error Could not resolve dependency: npm error peer date-fns@"^2.28.0 || ^3.0.0" from react-day-picker@8.10.1
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
TypeError: Invalid URL
안녕하세요,1) 강사님 깃코드에서 코드 clone해서 가져온 후2) 노션 환경 변수 세팅3) npm run dev 실행하니까 localhost:3000에서 저런 에러가 뜨네요어떻게 해결하면 될까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
세션 6의 퀴즈 5번 정답 옵셔널 캐치올 아닌가요?
문제에서도 /docs 가 있고, 해설에도 옵셔널 캐치올에는 /docs가 포함 될때도 사용된다고 되어 있는데, 막상 답은 캐치올을 선택해야 답으로 나오네요.
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
상세 페이지 404 에러 발생
안녕하세요, 짐코딩님.덕분에 재밌는 수업 듣고 있습니다. :) 현재 저는 짐코딩 님의 깃허브에서=> 최종 코드를 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 플러그인 설치 강의까지 학습했습니다! 제가 왕초보라 많이 미흡합니다. 최대한 쉽게 설명해주시면 너무나 감사드리겠습니다!항상 친절한 답변과 강의 감사드립니다.
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
스타일이 적용 안되는 문제
안녕하세요, 선생님.현재 블로그 상세 목차 UI까지 강의 수강했는데 코드 수정한 후 local에 띄어보니 스타일이 적용 안되는 문제가 발생했습니다. 선생님 github에서 해당 강의 관련 코드 다 가져와서 복붙 했는데도 저러네요...제가 왕초보라서 도와주시면 감사하겠습니다!
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
cursorAI에 rule 생성 시 rule type이 안 나오는 현상 발생
안녕하세요,cursor에서 설정 > rules & memories 선택 > Project Rules에서 +Add Rule 선택 > project-structure.mdc생성하면 강사님 화면처럼 rule type 선택할 수 있는 창이 안 뜹니다. 이유가 뭔지 잘 모르겠습니다 ㅜ
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
클라이언트 컴포넌트 사전 렌더링
클라이언트 컴포넌트는 서버에서 사전렌더링이 된다고 했는데 이 의미가 하이드레이션 하는부분만 제외하고 html로 렌더링해준다는 말인가요?서버는 <div data-nextjs-client-component="..."></div>같은 placeholder만 내려주고 서버에서 HTML로 렌더링되지 않는다는 말도 있어서 헷갈립니다ㅠㅠ!!
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
상세페이지 구현 Author의 name 프러퍼티가 조회가 안됩니다.
아무리 해도 안되서, 기존 코드를 복붙하고 사용하고, 공식문서를 봐도 페이지 properties의 Author.people[0] 내부에는 { id: "0219380..." , object: "user" }만 있습니다. 이마저도 문자열이라 name프로퍼티가 없습니다.노션 템플릿도 author가 적용이 되어있는 걸 확인했는데요. 혹시 api가 변경이 된 것일까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
A
안
-
미해결비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)
cursor 프롬프트 답변 한글
저는 답변이 한글로 나오지 않는데요. 선생님의 경우, 한글로 나오네요. 그리고 피그마의 경우, 동일하게 하는데 MCP화면설정이 다르고 내용을 넣어도 다르게 진행되어서요, pro를 사용하셔서 그런걸까요?
-
해결됨Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
unstable_cache 사용 시 적정 revalidate 값 문의
안녕하세요. 지금까지 알려주신 내용에서 Notion 통해 글을 추가/삭제했을 때, 그에 대한 반영이 이루어지기 위해 unstable_cache 적용 시 revalidate 옵션(단위: s(초))을 줘야 하는 것을 확인했습니다.(getPublishedPosts 구현부분에서 언급되지 않은부분이라 강의내용과 공식문서 토대로 동작 확인했습니다.)Notion이 아닌 실제 페이지에서 글쓰기를 했을 때는 revalidateTag 함수를 호출하여 캐시를 무효화시켰었습니다. 문제는 목록 가져올때도 매번 revalidateTag 함수를 사용하게 된다면 캐시 사용하는게 무의미해질거라 생각합니다.즉시 반영을 위해서는 Webhook 연동이 필요해보이나, 생각보다 구현 난이도가 복잡해서 revalidate를 적절하게 주는게 좋을거라 생각했습니다. 그렇다면 효율적인 revalidate 값은 어느정도로 지정하는게 좋을까요?? TanStack Query ClientProvider에서 지정한 것처럼 1분 정도가 적절하려나요?? 그리고 실제 구현 이루어지는 프로그램(ex. 쇼핑몰)에 따라 기준이 달라질 것 같은데요. 이에 대한 강사님 의견 듣고싶습니다.
-
미해결비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)
firebase
firebase 프로젝트 생성하고 설정하고 있는데Authentication > 로그인방법 설정중에어느 방법을 선택해도 아래 이미지와 같이 업데이트 오류라는 문구가 뜨고 저장이 안됩니다. 데이터베이스 만들기 과정에서도 '위치'란에 아무 select박스가 안뜹니다. 프로젝트 생성은 영상과 동일하게 하였는데 프로젝트가 제대로 생성이 안된건지 문제가 뭔지 모르겠습니다.
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
private component 관련 질문
루트 page.tsx에서 사용하는 컴포넌트는pages/_components/ 여기에 바로 넣으셨는데그럼 about 페이지에서만 사용하는 컴포넌트는pages/_components/about/ 이 경로에 배치하면될까요?