묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
prefetch 속성 질문
섹션 3. Page Router 핵심정리12.2.4)프리페칭안녕하세요 프리페칭 관련하여 실습을 진행하던 중 궁금한 사항이 있어서 질문드립니다 ! Next.js는 요청한 페이지의 js 번들과 현재 페이지 내에서 이동할 것 같은 페이지(Link 태그 및 router.prefetch로 설정한 페이지)를 프리페칭 한다고 배웠습니다. 근데 이때, Link 태그를 사용한 페이지 중 이동이 적을 것 같은 페이지는 <Link href="/" prefetch={false}>를 통해 프리페칭을 막을 수 있다고 배워 해당 내용을 실습했습니다. 근데 처음에 강력 새로고침을 진행하면 초기에는 프리페칭을 하지 않지만 약 5초 정도 지나면 추후에 제가 prefetch={false}로 설정한 Link 태그 js 번들 파일을 네트워크 탭에서 불러오는 것 같아 왜 그런지 궁금하여 질문드립니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
이미지 수정시 CORS 에러 발생에 관하여
안녕하세요, 현재 이미지 업로드 및 수정 과제를 진행중에 발생한 CORS 에러에 대해 질문드립니다. 새로운 게시글의 이미지 input 데이터를 graphQL에 전송하는 것은 문제가 없습니다.수정하는 게시글에서 이미지를 onChange를 통해 updateFile에 업데이트하는 것도 문제가 없습니다.최종적으로 수정을 완료하는 graphQL에 통신을 하는 과정에서 다음과 같은 에러가 발생합니다.며칠전에 같은 작업을 했을 때에는 문제가 없었던 부분이라 질문드립니다.
-
해결됨Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
notepad와 project rules 질문
안녕하세요~ 강의 잘 보고 있습니다! 현재 cursor 0.49.6 버전을 사용중입니다.영상에서 사용중인 버전은 Rule Type을 설정할 수 없는데 현재 제가 사용중인 버전에서는 아래와 같이 여러 옵션을 선택할 수 있습니다여기서 궁금한게 Notepad로 만들지 않고 Project Rules로 설정한 후 Manual로 설정하면 제가 원할때마다 직접 참고할 수 있도록 할 수 있는 것 같더라구요. 뭔가 notepad 기능들이 project rules로 흡수된 것 같은데 project rules로 등록해서 사용해도 문제 없을까요..??
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
generateStaticParams() 와 데이터 캐싱
5.3) 풀 라우트 캐시 3. 동적 경로에 적용하기 7:20generateStaticParams() 를 export하면 page component의 fetch() 메서드에서 명시적으로 데이터 캐싱 옵션을 설정하지 않아도 해당 페이지는 무조건 static page가 된다고 설명해주셨는데, 그럼 { cache: "force-cache" }로 되어있다고 생각하면 될까요? { cache: "force-cache" }를 안써도 되는지 궁금합니다.또, export const dynamicParams = true 또는 false의 설정에 따라 어떤 영향을 받는지도 함께 설명해 주시면 감사하겠습니다. 🙂 뭔가 저는 generateStaticParams() 를 export + export const dynamicParams = true + 데이터 캐싱 옵션 설정하지 않은 경우에도 새로운 id 경로로 접속 요청이 들어왔을 때, 내부적으로{ cache: "force-cache" } 로 적용되어 데이터 캐싱이 되는지 궁금한 것 같습니다. 🤔
-
해결됨제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
seo 팁 생성기 1차 구현에 대해
안녕하세요~ 선생님~ ^^선생님 설명대로 잘 따라하니 정말 깔끔하고 정교한 SEO 팁 생성기가 되네요!OPENAI API를 사용하니 답변도 아주 정말 정교하고 치밀하게 잘 나오고요 ^^그런데 만약 이런 어플을 제작했다고 하면 매번 이렇게 터미널을 열고(커서를 열고) 수동으로 타이핑해서 프로그램을 실행 시키는게 여간 사용성이 안좋던데(제가 실제 적용하거나, 친구에게 주는것 등에서)이거 나중에 윈도우에서 아이콘 클릭해서 일반적인 프로그램 실행시키듯이 할수도 있는건가요?나중에 이번 강의에서 그거 배우는지 궁금해요~(차차 배워나가면 나중에 알게 되겠지만... 지금 너무 궁금해서요 ^^)
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
카톡에서 썸네일이 안뜹니다
import SearchableLayout from "@/components/searchable-layout"; import style from "./index.module.css"; import { ReactNode } from "react"; import BookItem from "@/components/book-item"; import { InferGetStaticPropsType } from "next"; import fetchBooks from "@/lib/fetch-books"; import fetchRandomBooks from "@/lib/fetch-random-books"; import Head from "next/head"; // next에서는 이렇게 작성하면 서버사이드렌더링으로 페이지를 생성할 수 있다. export const getStaticProps = async () => { // 컴포넌트보다 먼저 실행 되어서, 컴포넌트에 필요한 데이터 불러오는 함수 // Promise.all을 사용하여 병력적으로 두 개의 비동기 작업을 병렬로 실행 const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks, }: InferGetStaticPropsType<typeof getStaticProps>) { return ( <> <Head> <title>한입북스</title> <meta property="og:image" content="/thumbnail.png" /> <meta property="og:title" content="한입북스" /> <meta property="og:description" content="한입북스에 등록된 도서들을 만나보세요" /> </Head> <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> </> ); } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; }; 영상과 같이 public 폴더에 파비콘과 썸네일 파일을 올렸는데 파비콘은 되는데 썸네일과 디스크립션과 타이틀이 안나오고 그저 링크만 보이네요
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
코드블록이 포함된 글 width문제
노션 글에 코드블록을 포함시키고 코드가 한 줄로 긴 경우에 width가 부모보다 커져서 스타일이 깨지게 됩니다. global.css에 스타일을 적용해봐도 해결이 안됩니다 ㅠㅠ
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
book/[id] 코드를 작성할 때 오류가 납니다
도서의 데이터를 불러오는 과정에서 Promise 객체에 id를 이미 사용해 book에 저장한 데이터들을 구조분해할당할 때 id가 이미 선언되었다고 오류가 발생합니다 ㅠㅠ 강의에서는 Promise 객체로 URL 파라미터를 받아오는 게 아니어서 어떻게 해결할 수 있는지 모르겠습니다...아래는 코드랑 오류 메시지입니다! 코드의 붉은 줄에 커서를 올리면 블록 범위 변수 'id'를 다시 선언할 수 없다고 나옵니다
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 외 질문
수업 외 질문인데요. 시작은프리캠프 강의에서 사용된 캐릭터 움직이는 애니메이션?은 어떤 프로그램으로 만드신거에요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
vsc 에서 npm init 설치시 오류
PS C:\Users\user\Documents\prepare\front> npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See npm help init for definitive documentation on these fieldsand exactly what they do.Use npm install <pkg> afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (front)PS C:\Users\user\Documents\prepare\front> 터미널을열고 저도 패키지 네임 다음 react-nodebird-front를 작성하고 싶은데 어떤방법이 있을까요?
-
해결됨Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
Markdown MDX 관련 질문입니다.
에러화면 /mdx-page 렌더링이 안됩니다... 작업 순서패키지 설치npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdxnext.config.tsimport type { NextConfig } from 'next'; import createMDX from '@next/mdx'; const nextConfig: NextConfig = { /* config options here */ // experimental: { // typedRoutes: true, // }, images: { remotePatterns: [ { hostname: 'picsum.photos', }, { hostname: 'images.unsplash.com', }, { hostname: 'www.notion.so', }, { hostname: 'prod-files-secure.s3.us-west-2.amazonaws.com', }, ], }, pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], }; const withMDX = createMDX({ // Add markdown plugins here, as desired }); // Merge MDX config with Next.js config export default withMDX(nextConfig); mdx-components.tsximport type { MDXComponents } from 'mdx/types'; export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, }; }app/mdx-page/page.mdx# Welcome to my MDX page! This is some **bold** and _italics_ text. This is a list in markdown: - One - Two - Three Checkout my React component:package.json{ "name": "notion-blog-nextjs", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint", "lint:fix": "next lint --fix", "format": "prettier --write ." }, "dependencies": { "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.3.2", "@notionhq/client": "^3.0.1", "@radix-ui/react-select": "^2.2.4", "@radix-ui/react-separator": "^1.1.6", "@radix-ui/react-slot": "^1.2.2", "@types/mdx": "^2.0.13", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "lucide-react": "^0.507.0", "next": "15.2.5", "postcss": "^8.5.3", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.5.0", "tailwind-merge": "^3.2.0" }, "devDependencies": { "@eslint/eslintrc": "^3", "@eslint/js": "^9.26.0", "@tailwindcss/postcss": "^4.1.5", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.2.5", "eslint-config-prettier": "^10.1.2", "globals": "^16.0.0", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "tailwindcss": "^4.1.5", "tw-animate-css": "^1.2.9", "typescript": "^5" } }
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
serverComponent=false일 때 쿠키 세팅을 하는 이유?
안녕하세요! supabase.ts 파일에서 createServerSideClient 함수에서 serverComponent=false일 때 쿠키 세팅을 하는 이유가 무엇인가요? 이 쿠키는 수파베이스 로그인할 때 외에 어디서 사용되나요? 코드에서는 createServerSideClientRSC, createServerSideMiddleware 함수는 사용하지 않고 있는데, 그냥 정의만 해놓은 건가요? 서버컴포넌트에서 쿠키를 조작하면 어떤 오류가 발생하나요?
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
getUser 에 갑자기 serverComponent가 추가된 이유?
9-1강의 수업노트 봤는데요, 코드에서 getUser 함수는 2군데서 사용되는데, 항상 인자가 serverComponent가 true로 전달되더라구요. 그러면 getUser를 사용할 때 인자를 넘기지 않고, getUser 함수는 아래와 같이 코드를 만들어도 되는 건가요?export const getUser = async () => { const supabase = await createServerSideClient(true); const user = await supabase.auth.getUser(); return user?.data?.user; };
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
getUser 에 갑자기 serverComponent가 추가된 이유?
9-1강의 수업노트 봤는데요, 코드에서 getUser 함수는 2군데서 사용되는데, 항상 인자가 serverComponent가 true로 전달되더라구요. 그러면 getUser를 사용할 때 인자를 넘기지 않고, getUser 함수는 아래와 같이 코드를 만들어도 되는 건가요?export const getUser = async () => { const supabase = await createServerSideClient(true); const user = await supabase.auth.getUser(); return user?.data?.user; };
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
useCallback의 디펜던시 배열에 supabase 넣는 이유?
const getUserInfo = useCallback(async () => { const result = await supabase.auth.getUser(); if (result?.data?.user) setUser(result?.data?.user); }, [supabase]);이 코드를 이해 못했어요. 왜 dependency 배열에 supabase가 들어가나요? userId 넣으면 왜 안되나요?
-
해결됨Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
수파베이스 인증 토큰에서 개인정보 지우는 법?
안녕하세요! 수파베이스 로그인 하면, sb-로 시작하는 쿠키가 생성되는데요,이 쿠키 value를 디코딩해보면 이메일, 이름 같은 정보들이 나와서 보안에 취약할 것 같아요어떻게 하면 이러한 개인정보를 노출하지 않을 수 있을까요??
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
강의 수강중 궁금한점이 생겨서 질문드립니다
제공해주신 백엔드 서버는 어떤 기술 스택으로 백엔드가 구성이 되었는지 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
프리페칭에 대한 질문
안녕하세요. 강의를 듣고 정리하면서 제가 이해한 게 맞는지 확인하고 싶어 질문드리게 되었습니다!클라이언트 컴포넌트를 포함하고 있는 서버 컴포넌트의 경우, 프리페칭 시 RSC payroad만 미리 가져오고 이후 해당 서버 컴포넌트에 접근하게 되면 클라이언트 컴포넌트를 실행하기 위해 JS Bundle을 불러오는 건가요?페이지를 캐시 및 하드 새로고침으로 진행했을 때 아래처럼 인덱스 페이지에서 이동할 수 있는 페이지인 search페이지와 book/1페이지의 RSC payroad만 프리페칭 되어있는 걸 볼 수 있었습니다.이후 위의 Link 태그를 통해 search 페이지로 이동했을 때 아래처럼 새롭게 search 페이지의 RSC payroad가 나타나는 이유가 뭔가요? book 페이지도 똑같이 RSC payroad가 새롭게 추가되는데 이미 인덱스 페이지에서 프리페칭을 통해 RSC payroad를 불러왔는데 추가되는 이유가 궁금합니다! 2번과 연관되어 있는데 search 페이지로 이동했을 때 인덱스 페이지의 RSC payroad가 네트워크에 나타나지 않는 건 인덱스 페이지에서 이동한 것이기 때문에 프리페칭이 일어나지 않기 때문인가요? 이것도 2번과 연관된 질문입니다! search 페이지나 book/1페이지에서 새로고침을 진행하고 인덱스 페이지로 넘어갈 때는 새롭게 인덱스 페이지에 대한 RSC payroad가 나타나지는 않는데 그 이유가 궁금합니다URL에 직접적으로 book/5로 이동하게 만들었는데, 프리페칭으로 네트워크상에 인덱스와 search, book/1의 RSC 페이로드뿐만 아니라 clinet-component 파일과 searchbar 파일에 대한 JS Bundle도 함께 들어와있는데 search 페이지가 동적인 페이지여도 같은 레이아웃을 사용하고 있는 인덱스 페이지가 정적인 페이지이기 때문에 clinet-component와 searchbar의 JS Bundle이 같이 프리페칭 된 건가요?
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커서에서 깃을 커맨드 프롬프트창에서 커밋하는 방법은 없나요? 마우스 클릭 말고요.
커서에서 깃을 커맨드 프롬프트창에서 커밋하는 방법은 없나요? 마우스 클릭 말고요.
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
캐시 관련 질문사항이 있습니다!
안녕하세요! 캐시관련 질문 사항이 있습니다! 현재, 강의 내용에선, react query를 사용한 클라이언트측 캐시와, unstable_cached 를 사용한 서버 캐시를 둘다 같은 하나의 데이터에 적용하신 모습을 확인하였습니다. 궁금증은, 현재 블로그 목록 조회는 두개 캐시 기법이 모두 적용되어 있는데, 둘 중 하나만 캐시를 해 놓아도 될 것 같다 라는 생각이 드는데, 이게 맞는지 궁금합니다. 혹시, 하나만 선택해야 된다면 이번 블로그 목록 케이스에서는 어떤 방식의 캐시를 적용하시는걸 추천하시나요?
