묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
안녕하세요 급하게 next.js를 배워아햐는데
현재 react.js는 수강한상태이고 타입스크립트는 수강안한 상태입니다.급하게 회사에서 next.js를 배우라고해서 인강을들어아햐는데 타입스크립트 모르고 react.js만 알아도 수강하는데 아무지장없을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
더보기 버튼 클릭 시 페이지 이동 (page=1 -> page=2) + 무한스크롤 구현 기능 구현이 필요해서 아래와 같이 구현해보았는데 어쩔땐 되고 어쩔땐 안되더라구요...만약 데이터를 10개씩 불러올 경우 10개 -> 20개 -> 30개 -> 40개 이러다 갑자기 다시 10개가 됩니다...원래 useInfiniteQuery 무한스크롤 구현 시 페이지이동하면서 기존 데이터를 보존하는 방법이 불가능한건지 아님 제가 코드를 잘못짠건지 궁금합니다... const useInfiniteQuery = (params: Params) => { const searchParams = useSearchParams() const page = searchParams.get('page') return useInfiniteQuery({ queryKey: [CONTENTS_KEY, params], queryFn: ({ pageParam }) => { return getContentsApiClient({ ...params, ...outLinkParams(), page: Number(pageParam) }) }, getNextPageParam: (lastPage, _, lastPageParam) => { // 마지막 page라면 hasNextPage가 false const lastPageNumber = Math.ceil(lastPage.totalCount / (params.size || 10)) if (lastPageNumber === lastPageParam) { return undefined } return Number(lastPageParam) + 1 }, initialPageParam: Number(page) || 1, placeholderData: keepPreviousData, }) } //더보기 버튼 // 클릭 시 페이지 이동 function AddMore({ fetchNextPage, totalPages }: { fetchNextPage: () => void; totalPages: number }) { const searchParams = useSearchParams() const pathname = usePathname() const params = new URLSearchParams(searchParams.toString()) const pageNo = Number(searchParams.get('page') || 1) params.set('page', (pageNo + 1).toString()) if (totalPages === pageNo) return null return ( <div className={cn('wrap')}> <Link className={cn('link')} href={`${pathname}?${params.toString()}`} onClick={fetchNextPage} scroll={false} > <span className={cn('label')}>더보기</span> </Link> </div> ) } 강의 잘 듣고있습니다. 감사합니다! 참고로 백엔드는 문제가 없습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
api 를 호출해야만 ISR 이 적용 되는것 같은데 자동으로 적용하려면 어떻게 해야 하나요?
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다!
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
토스페이먼츠 개발자 화면이 강의와 많이 달라졌는데 확인 부탁드립니다.
https://developers.tosspayments.com/ 언어별 코드 예제를 복사 붙여넣기만 하면 연동 끝 이라고 방식이 변경된것 같습니다.확인 부탁드립니다.
-
미해결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)
[수업 노트] ISR 공식 문서 링크 변경
현재 강의 수업노트에 첨부된 ISR 공식 문서 링크에 접속하면 SSR 관련 문서로 표시되고 있습니다.문서 링크가 아래로 변경된 것으로 보입니다.https://nextjs.org/docs/pages/guides/incremental-static-regeneration
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
Git Graph가 강사님처럼 나타나지 않는데요.
강사님처럼 메인 탭으로 열리지 않고, 좌측 하단에 작게 열리고 작게 열린 부분에서 마우스 우측 클릭해도 이전 버전으로 돌아가는 메뉴가 안 뜹니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
9.2) 14분 10초 - SEO 패러렐 라우트 페이지 미적용 문제
62. 검색 엔진 최적화(SEO)에서 보면상세페이지의 메타데이터 설정하는 부분에서이전시간에 적용한 인터셉트/패러렐 라우트 때문인지모달 형태로 뜨면 book/[id]에 설정한 메타 태그가 적용되지 않고, 최상위 (with-searchbar) 부분에 적용한 부분이 뜹니다.하지만 새로고침해서 최초 접속 상태로 상세페이지에 접근하면 book/[id]에 설정한 meta태그랑 오픈그래프가 보입니다!이게 의도하신 부분 맞을까요? 어차피 링크로 공유할때는 맨 처음 접속하는 것과 마찬가지니까 크게 상관 없는 부분일까요!?강의 잘 수강하고 있습니다! 감사합니다.
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
구글에드센스 velcel 상업적이용
안녕하세요.좋은강의 제공해주셔서 감사합니다. vercel 무료 티어 같은 경우 구글에드센스를 상업적 이용으로 치부하고 있어 규정에 어긋나게 되는거 같은데 다른 대안이나 방안이 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
데이터 패칭과 프리패칭 순서
안녕하세요 강사님,복습하는 과정 중에 Page Router 기준으로 SSR + 프리패칭 + Hydration 흐름을 제가 이해한 대로 정리해보았는데, 이게 맞는지 확인 부탁드립니다.사용자가 /a 페이지에 있을 때 <Link href="/c" prefetch> 가 있으면, 브라우저는 백그라운드에서 /c.js (코드 스플리팅된 JS 청크)만 미리 받아 캐시에 저장해둔다.→ 이 단계에서는 HTML이나 데이터(getServerSideProps 결과)는 가져오지 않는다.사용자가 실제로 /c를 클릭하면, 서버가 getServerSideProps를 실행해서 데이터를 패칭하고, 그 결과를 반영한SSR HTML + JSON을 브라우저에 내려준다.브라우저는 HTML을 먼저 렌더링해서 FCP가 나오고, 이어서 캐시에 있던 /c.js를 실행한다.그 후 React가 HTML과 JS를 매칭시켜 Hydration을 수행하여 이벤트 핸들러를 연결한다.즉, SSR 페이지 전환 시1. User 클릭 → (서버) HTML 생성 및 데이터 패칭 → (브라우저) HTML 렌더링 → JS 실행 → Hydration이고, 프리패칭은 그 전에 JS만 준비해 두는 과정으로 이해했습니다.제가 이해한 흐름이 맞을까요? 머메이드로 도식화하자면 다음과 같습니다. 위가 맞다면, 빠른 페이지 전환을 위해하는 프리패칭을 했지만 결국 데이터 패칭 및 HTML을 서버에서 다시 그려오는데 빠른 전환이 가능한건지 궁금합니다.혹시 여기서 놓치고 있는 부분이나, 실제 네트워크 요청에서 다른 점이 있다면 알려주시면 감사하겠습니다!
-
해결됨비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
2-3강 질문이 있습니다
2-3 강 7분~안녕하세요. Cursor Rule 관련 부분이 질문이 있습니다.7분 무렵보면 AI 가 자동 초안을 생성하여 일관성을 향상시켜준다고 하였는데, 이것은 외부 파일을 이어 받아 프로젝트를 진행할때 필요한 과정인건가요? 만약 제가 혼자서 처음부터 끝까지 Cursor 에서 작업을 한다면 따로 Cursor Rule 을 만들 필요까지는 없는건지 아니면 그 경우에도 일관성을 위해 어느정도 코드를 만들어 놓은 상황에서 이것을 진행하여 AI 가 조금 지나고 났을때 잊지 않게 해야하는지 궁금합니다.
-
미해결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)을 주는 방식의 차이를 모르겠어요둘다 같은 결과를 초래하는것 아닌가요?이번 코드에서 둘다 사용하시길래, 어떤 상황의 차이로 코드를 다르게 사용했는지 궁금해서 여쭙니다
-
해결됨비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
수업을 듣다보니 생기는 궁금점
훌륭한 강의를 설명해주셔서 감사합니다. 벌써 2주차를 끝내고 계속 복습중인데, 문득 궁금증이 생겼습니다.만약 API 를 끌어왔을때 Cursor 가 잘못된 값을 추출한다고 가정했을때에는 그 가능성에 대비하기 위해 Cursor AI 한테 검토를 다시 해봐줘.라고 말을 해야할까요? 아니면 Cursor AI 한테애당초 시킬때꼼꼼하게 제약들을 많이 걸어둬야할까요 ?팁이 있으시다면 알려주시면 감사드리겠습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
정상 동작하는 (완성본) 데모 사이트 링크
정상 동작하는 (완성본) 데모 사이트 링크입니다.수업 노트에 올라와 있는 링크에서 동작이 안될 경우 아래 링크를 참고해주세요. 👉https://vod-onebite-books-client-page-router-ver.vercel.app
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
컴포넌트,페이지 파일명 기준
안녕하세요 정환님강의를 듣다 우연히 궁금한 점이 생겨 문의드립니다.제가 리액트 > 타입스크립트 > next.js 까지 쭉 듣고있는데요!파일명을 짓는 기준이 궁금하여 문의드려요 리액트 컴포넌트파일명을 지을때는 맨 앞글자가 대문자가 기준인 것으로 알고있었는데next.js 에서 ${페이지}.tsx 로 지으실때는search-layout.tsxglobal-layout.tsx이런식으로 대시방식을 사용하시는것같더라구요!!혹시 현업에서 사용하는 파일명짓는 기준이나일반적인 react,next.js에서 사용하는 파일명 기준이 있을까요??실무를 겪어보지 못해 잘 몰라서 해당건 질문드립니다,,,,,, 강의 항상 잘 듣고있어요 감사합니다 🙂
-
미해결비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
2-6 강 영화웹사이트 만들기 (Stagewise )
저는 Stagewise 를 작동시키면 이렇게 뜨는데, 그 이유가 대표적으로 어떤 이유인지 궁금합니다.Localhost8000 이라 3000 을 8000 으로 바꾸었는데, 이렇게 뜨네요. 어떤 에러인지 혹시 아시는지 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
✅ Supabase에서 테이블 옆에 Unrestricted가 뜨는 이유와 해결법 정리
Supabase에서 Table Editor > 테이블 옆에 Unrestricted가 아래처럼 뜨시는 분들은 RLS disabled를 클릭한 후에 RLS를 Enable로 해주시면 됩니다.RLS(Row Level Security)가 꺼져 있으면, 누구나 API로 테이블 데이터를 볼 수 있습니다.실제 서비스에서는 RLS를 반드시 켜고, 접근 정책(Policy)을 설정해야 데이터가 안전하게 보호됩니다.RLS 활성화는 Table Editor에서 “Enable RLS” 클릭 → 정책 추가로 진행하면 됩니다.