Streaming 관련해서 문의드립니다.

안녕하세요 🙂네, 맞습니다! 서버-클라이언트 경계와 스트리밍 동작 방식을 설명드리겠습니다.스트리밍 동작 원리1. 서버 컴포넌트에서:// 서버 컴포넌트 export default function Page() { // await 하지 않고 Promise 자체를 생성 const postsPromise = getPosts(); const tagsPromise = getTags(); return ( }> ); } 2. 클라이언트 컴포넌트에서:// 클라이언트 컴포넌트 'use client' import { use } from 'react'; export default function BlogList({ posts, tags }) { // 여기서 Promise가 resolve됨 const resolvedPosts = use(posts); const resolvedTags = use(tags); return {/* 렌더링 */}; } 핵심 포인트Promise 전달: 서버에서 데이터가 아닌 Promise 객체 자체를 클라이언트로 전달비동기 해결: 실제 Promise resolve는 클라이언트에서 발생스트리밍 효과: 초기 HTML은 빠르게 전송되고, 데이터는 준비되는 대로 점진적으로 스트리밍장점초기 페이지 로딩이 빨라짐여러 데이터 요청을 병렬로 처리 가능사용자는 즉시 UI 골격을 볼 수 있음이 방식으로 서버의 계산 능력과 클라이언트의 반응성을 모두 활용할 수 있습니다 💪

ISR 매커니즘에 대한 궁금증

안녕하세요 🙂 ISR 동작 요약해드리면~!예상 동작 (맞습니다!)미리 생성된 2개 슬러그: 즉시 로드 새로운 슬러그 첫 방문: 1초 지연 후 로드 새로운 슬러그 재방문: 즉시 로드 (캐시됨)그리고 ISR 동작은 반드시 build 후 프로덕션 환경에서 진행해주세요~!npm run build npm start # ✅ 프로덕션 환경에서 테스트

cursor AI 프로젝트 룰 관련 질문 드립니다.

UI가 조금 변경되었는데요! Cursor AI의 Rules 사용법을 룰 타입별로 설명해드리겠습니다.Cursor AI Rules 타입별 사용법1. Always Apply (항상 적용)설명: 모든 채팅과 Cmd+K 세션에 적용되는 글로벌 룰사용 시기:프로젝트 전반의 코딩 스타일 가이드항상 지켜야 할 개발 원칙기본 언어나 프레임워크 설정예시:- TypeScript를 사용하여 개발 - ESLint 규칙 준수 - 함수명은 camelCase 사용 - 주석은 한국어로 작성2. Apply Intelligently (지능적 적용)설명: AI가 컨텍스트를 판단하여 관련성이 있을 때만 자동 적용사용 시기:특정 기술 스택 관련 가이드라인도메인별 베스트 프랙티스조건부 적용이 필요한 규칙예시:- React 컴포넌트 작성 시 hooks 패턴 사용 - API 호출 시 에러 핸들링 필수 - 데이터베이스 쿼리 시 성능 최적화 고려3. Apply to Specific Files (특정 파일에 적용)설명: 지정된 파일 패턴과 일치하는 파일에만 적용사용 시기:특정 파일 확장자나 디렉토리 규칙테스트 파일, 설정 파일 등 특수 용도 파일설정 방법: 파일 패턴 지정 (예: *.test.ts, src/components/**)예시:패턴: src/api/** 룰: axios 사용, 에러 처리 표준화4. Apply Manually (@-mentioned)설명: @를 사용하여 수동으로 호출할 때만 적용사용 시기:특별한 상황에서만 필요한 규칙선택적으로 적용하고 싶은 가이드라인실험적이거나 임시적인 규칙사용 방법: 채팅에서 @룰이름으로 호출예시:룰 이름: performance-optimization 내용: 성능 최적화를 위한 코드 리팩토링 가이드사용: "이 코드를 @performance-optimization 해줘"

json-server 오류가 다른게 뜨네요

전역설치로 해보시겠어요?npm install -g json-server@0.17.4

params 에 Promise 객체 타입이 지정되어야 하는 이유? 최신?

안녕하세요 🙂Next.js 15부터 params가 Promise로 변경되었습니다. 스펙이 그러합니다. Server Component Params 가져오기// app/posts/[slug]/page.tsx export default async function PostPage({ params }) { const { slug } = await params // Next.js 15+ // ... }Client Component Params 가져오기'use client' import { useParams } from 'next/navigation' export default function ClientComponent() { const params = useParams() const slug = params.slug // 동기적 접근 }

미리보기가 안됩니당...

props 로 받은 id 값을 디버깅 해봐야 알 것 같아요원하는 값으로 넘어갔는지 확인이 필요해보여요~!

streaming 페이지 보완 필요

홈탭에서 태그 클릭시 streaming 표시 여부는 구현 방식의 차이입니다.소개 -> 홈 으로 왔을 때 스트리밍이 표시되는 이유는 페이지가 전환되었기 때문입니다.태그도 별도의 페이지로 분리하신 후 loading UI를 적용하시면 됩니다.

unplugin-vue-components

설정에서 dirs 를 아래와 같이 설정해 보시겠어요?// 컴포넌트를 찾을 디렉토리들dirs: ['src/components']

remark-gfm

넵! 영상에서 말씀드렸던 것처럼 공식문서는 지속적으로 계선되기에현재 공식문서에서 권장한다면 해당 가이드를 따라가는 것을 권장드립니다~!

마크업 파트 가독성 향상 방법

https://shiki.matsu.io/guide/install해당 플러그인 참고해보시면 좋을 것 같아요!github에서도 많은 분들의 오픈소스도 참고해보시면 도움이 될 거예요!