정보처리기사 실기를 선생님과 함께 하고, 시험 합격에 이어서이제 본격적으로 취업을 위한 저만의 프로젝트를 만들어 보겠다는 생각이 들었습니다.마침 Cusor AI의 첫 개강 때 할인 이벤트가 있어서저만의 첫 프로젝트를 시작하기 전에이번 기회에 다시 한번 더 선생님과 함께 나아가고자현재 선생님의 새로운 강의를 수강하고 있습니다. 그리고 어제 새벽에 처음 시작해서 정신을 차려 보니지금 벌써 4강을 진입하는 상황이 되어버렸습니다..결론은 또 엄청난 강의를 만들어 주신 것 같습니다....! 이제 정말 질문인데요.프론트 엔드의 영역이라 생각하고 지금 재미있게 공부 중에 있습니다만백엔드나 전체적으로 다뤄서 풀스택 관련 강의 제작도 목표가 있으실지 해서질문 남겨드립니다. 현재 독학으로 Spring을 공부 중에 있습니다만, 선생님의 자바 백엔드수업도 있다면 재미있게 제가 원하는 개발을 이어나갈 수 있을 것 같아조심스럽게 이 자리에 질문을 남겨드립니다. 아무쪼록 이번에도 놀랍고 대단한 몰입력을 유도하는 강의를 만들어 주셔서정말 감사합니다. 정보처리기사 합격에 이어서 이번에는 선생님 강의를 듣고 취업 성공까지 힘내 보겠습니다!ㅎ(ps 시험 때문에 듣던 선생님의 ppt 자료가 이제는 시험이 아니라 재밌는 창작 같은 공부에 쓰이니까 모든 게 감회가 새롭네요ㅋㅋㅋ)

노션 API 통합해서 API키 제대로 입력했고, 블로그템플릿 데이터베이스에서 링크 오픈하고, 그 링크에서 사이트주소랑 쿼리스트링 다 날리고 ID 부분만 제대로 입력했고, 다 제대로 했습니다.그런데 계속 노션 API 연결 안된다고 에러가 뜹니다. 아예 다 지우고 다시 만들고 해봐도 안됩니다. 왜그런걸까요? ㅠㅠ 그리고 현재 @notionhq/client 의 버전에서는database.query가 아니라 dataSources.query입니다.const { Client, APIErrorCode } = require("@notionhq/client") try { const notion = new Client({ auth: process.env.NOTION_TOKEN }) const myPage = await notion.dataSources.query({ data_source_id: dataSourceId, filter: { property: "Landmark", rich_text: { contains: "Bridge", }, }, }) } catch (error) { if (error.code === APIErrorCode.ObjectNotFound) { // // For example: handle by asking the user to select a different data source // } else { // Other error handling code console.error(error) } }  

프로젝트 개발 중에, src/components 폴더에 재사용할 것들을 만들어서 사용하는 것과, src/app/_components 를 사용하는 것을 배웠는데, 둘의 사용성 차이가 있나요? 굳이 이 두 기능을 둘 다 사용을 할 필요가 있을까요? 오히려 하나만 사용하는게 좋지 않나 싶었습니다. 반드시 분리를 해야만 하는 특별한 이유가 있어서 굳이 분리를 하게 되는 것일까요?

강사님, Vibe 코딩에 관심이 있어서 강의를 수강하고 있는데앞부분에 알려주신 API KEY 입력 관련해서 Google AI Studio에서 API KEY 받아서 알려주신 대로 Cursor 입력해서 사용하는데,, Cursor 화면 인터페이스가 영상 촬영하신 2월달과 달라진거 같고설명주시는 Gemini 2.0 flash도 조회가 안되는거 같은데... 현재 Cursor 환경이 달라진 걸까요? 궁금해서 문의드립니다.

1.간편캡쳐--> 내가 원하는 만큼 드래그해서 캡쳐하기 2.크기지정캡쳐--> 크기 지정을 한후 캡쳐하기이렇게 해서 해보려고 하는데 잘 안됩니다 (에러가 계속 생김)혹시 괜찮으시면 강의 만들어 주실수있을까요?

저는 아무래도 정답이 C 같은데.. 질문에서 /docs도 포함되어야 한다고 했으므로, 옵셔널 캐치올만이 루트 경로(/docs)까지 모두 처리할 수 있는거 아닌가요? 다 학습하고 혼란이 오네요.. 

강사님, 안녕하세요. 좋은 강의를 열어주셔서 감사합니다!현재 업로드한 강의는 모두 들었으나, 아래 영상은 미제공되어 업로드 일정 문의드립니다.1. 8/30 업로드 예정이나 미업로드된 강의(54, 55, 56, 57)2. 영상 편집 중으로 미업로드된 강의(59)3. 8/31 업로드 예정이나 미업로드된 강의(62, 63, 64, 65, 66, 67, 68, 69)

Stream을 구현할 때 posts, tags 정보를 서버사이드에서 호출하고 promises 를 클라이언트 컴포넌트에 넘겨 use 훅으로 받는데요. 서버와 클라이언트의 경계가 살짝 이해가 안되네요. 서버사이드에서 promise객체를 클라이언트로 던지고 클라이언트에서 promise를 resolve하는 건가요?

안뇽하세요. 몇일 전 구매하고 열강하고 있는 개발자입니다.  ISR 매커니즘에 대한 궁금증이 있는데요. 저희가 작성한 코드에 보면 export const generateStaticParams = async () => { const { posts } = await getPublishedPosts(); return posts.map((post) => ({ slug: post.slug, })); }; 이렇게 게시글들을 미리 ISR 하는 코드가 있습니다. 특정 게시글의 slug 정보 기반으로 미리 SSG 만드는 것으로 이해했는데요. 그래서 빌드를 하면 SSG + 두 개의 슬러그 페이지가 존재합니다. (getPubishedPosts의 기본 사이즈가 2개이기 때문) 그런데 제가 궁금한게 위 ISR 적용하기 전에 빌드한 후 상세 페이지에 진입을하면 약 1초 정도? 딜레이가 발생하고 화면이 렌더링이 되는데요. ISR을 적용한 후 기대한 동작은미리 생성된 두 개의 slug에 대해서는 바로 화면에 보이지만 무한스크롤로 발생한 동적 블로그에 대해서는 빌드 전과 동일하게 1초의 딜레이가 발생하고 이후 접근 시 정적페이지가 생성되어 빠르게 보이는게 맞지 않나요?하지만 현재 동작을 보면 미리 생성된 slug를 제외한 모든 게시글에 대해 빠르게 화면이 보여 제가 이해한게 아닌가 싶네요. 공식문서를 봐도 이해가 잘되지 않아 확인차 문의드립니다.

안녕하세요 강사님! 강의 항상 재밌게 잘 보고 있습니다.다름이 아니라 cursor AI가 영상의 버전과 다른 것 같은데, 프로젝트 룰을 어떤 걸로 설정해야하는지 모르겠습니다.공식 문서와 다른 블로그들을 참고해도 모르겠어서 질문 올립니다ㅠㅠ 

안녕하세요! 강의 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 에 따라 나뉘나요? 후자인걸로 생각하고 있긴 한데 맞는지 너무 헷갈리네요.. 감사합니다! 좋은 하루 되세요!

안녕하세요, 잘 학습하고 있는 학생입니다. 강의 따라가면서, streaming 파트는 다 적용을 했습니다. 소개 탭에서 홈 탭으로 이동 시에 태그목록과 포스트리스트도 skeleton 로딩페이지 잘 적용됩니다.'홈'을 눌렀을때, 기존의 '로딩 되는 중에 아무 변화 없이 사용자를 마냥 기다리게 함'에서 현재의 '로딩 되는 중에 skeleton 보여줌으로써 로딩되고 있음을 나타내줌'으로의 개선은 사용자 경험에 있어서, 정말 효과적인 방법이라고 느꼈습니다. 다만, 문제가 있습니다. '홈' 을 눌러 이동하는 경우말고, 태그 목록에서 나머지 'css'태그, 'git'태그 등등 이를 직접 클릭해서 이동하는 경우에는 streaming 이 적용되지 않습니다.예를 들어, 홈을 클릭한 상황에서는 skeleton ui가 잘 나타나지만, 그렇게 홈으로 이동한 상황에서 다른 태그(css,Git 등)로 다시 이동하는 상황에서는 적용되지 않고 그대로입니다. 이를 해결하기 위해선 어떻게 해야 하나요?

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 블로그 결과물 공유하면 실용적인 블로그 소스코드 받을 수 있는 이벤트 진행하고 있나요?

주신 코드 그대로 이해하면서 보고 했는데, 분명 postcard 내부에서 Image태그를 감고 있는 div 태그들을 봐도, object-cover 로 부모 요소를 가득 채우는 양식으로 되고 있는데, 왜 이미지 상단에 여백이 생기는걸까요? 

space-y-6과 flex-col 로 gap-6(또는 gap-y-6)을 주는 방식의 차이를 모르겠어요둘다 같은 결과를 초래하는것 아닌가요?이번 코드에서 둘다 사용하시길래, 어떤 상황의 차이로 코드를 다르게 사용했는지 궁금해서 여쭙니다 

안녕하세요, 진행하다가 여러 이슈가 발생해서 한 번에 묶어 여쭤보고자 합니다!오류가 계속 발생해서 강사님 코드도 보았는데도 잘 모르겠습니다.  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  

안녕하세요,1) 강사님 깃코드에서 코드 clone해서 가져온 후2) 노션 환경 변수 세팅3) npm run dev 실행하니까 localhost:3000에서 저런 에러가 뜨네요어떻게 해결하면 될까요?  

문제에서도 /docs 가 있고, 해설에도 옵셔널 캐치올에는 /docs가 포함 될때도 사용된다고 되어 있는데, 막상 답은 캐치올을 선택해야 답으로 나오네요.