묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
섹션 6 퀴즈 > 5번 문항 dynamic 옵션 값 오타
안녕하세요.섹션 6 퀴즈 내에 5번 문항에서 문제 설명과 해설에 dynamic 옵션의 값이 "force-static"이 아닌 "false static"으로 잘못 나온 것 같은데 확인 부탁드립니다.
-
해결됨이것이 진짜 바이브코딩 - 개발자를 위한 바이브코딩편
자료가 수업에 사용된 내용과 다른 것 같아요
다른 파일들은 잘 모르겠는데 일단 01-common.mdc 이 파일은 수업에 사용하신 것보다 내용이 적어 보여요. 파일 확인 부탁 드리겠습니다.
-
해결됨이것이 진짜 바이브코딩 - 개발자를 위한 바이브코딩편
수업에 사용하신 Cursor 버전 문의
안녕하세요. 수강생입니다.혹시 수업에 사용중이신 Cursor가 버전이 어떻게 되나요.저는 1.5.9 버전인데 커서 핵심 기능과 Rules 설정하면이 좀 달라서요.프로젝트 Rules 화면도 다르고 Add Rule시 제가 사용하는 버전은 아래와 같이 나옵니다. 어떤 Rules를 설정을 해야할지 답변 부탁드립니다.감사합니다.
-
해결됨이것이 진짜 바이브코딩 - 개발자를 위한 바이브코딩편
피그마 아래쪽에 더하기 버튼이 없습니다.
피그마에 접속해서 MCP 플러그인 을 설치하려고 했는데 더하기 버튼이 안 보입니다.아래와 같은 버튼들만 보이는데 어떻게 해야하나요?
-
미해결인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
Prisma schema 에서 relationship 관한 질문 이있습니다
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다.안녕하세요 . 강의 수강중 질문이 생겨서 여기에 이렇게 남깁니다. Courses 테이블에서 Lectures 테이블과 일대다 관계를 이렇게 해주셨는데요. model Course { id String @id @default(uuid()) slug String @unique title String shortDescription String? @map("short_description") description String? @map("description") thumbnailUrl String? @map("thumbnail_url") price Int @default(0) discountPrice Int? @map("discount_price") level String @default("beginner") instructorId String @map("instructor_id") isPublished Boolean @default(false) @map("is_published") createdAt DateTime @default(now()) @map("created_at") updatedAt DateTime @updatedAt @map("updated_at") sections Section[] lectures Lecture[] categories CourseCategory[] enrollments CourseEnrollment[] reviews CourseReview[] questions CourseQuestion[] instructor User @relation(fields: [instructorId], references: [id]) @@map("courses") }model Section { id String @id @default(uuid()) title String description String? order Int courseId String @map("course_id") createdAt DateTime @default(now()) @map("created_at") updatedAt DateTime @updatedAt @map("updated_at") lectures Lecture[] course Course @relation(fields: [courseId], references: [id], onDelete: Cascade) @@map("sections") } model Lecture { id String @id @default(uuid()) title String description String? order Int duration Int? isPreview Boolean @default(false) @map("is_preview") sectionId String @map("section_id") courseId String @map("course_id") videoStorageInfo Json? @map("video_storage_info") createdAt DateTime @default(now()) @map("created_at") updatedAt DateTime @updatedAt @map("updated_at") section Section @relation(fields: [sectionId], references: [id], onDelete: Cascade) course Course @relation(fields: [courseId], references: [id], onDelete: Cascade) activities LectureActivity[] @@map("lectures") }궁금한점은 이미 저희가 나중에 DTO 에서 코스 테이블 레코드 를 가져오면 Sections 테이블과 이미 일대다 관계가 되어있기떄문에 Sections 테이블에서 레코드를 가져오면서 Sections 테이블이 이미 Lectures 와 일대다 관계가 되어있기 떄문에 코스 테이블에서 레코드 가져오면 섹션 테이블 안에 이미 렉쳐 레코드도 같이 따라오는데 코스 테이블에서 따리 중독 관계를 해두신 이유가 궁금합니다.시간 내주셔서 감사합니다
-
미해결인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
File Upload 테스트 중 에러 발생 및 디버깅 방법
파일 업로드 기능 구현 후,Dropzone을 통해 업로드를 진행하고 [강의 수정] 페이지에서 ⨯ [Error: Body exceeded 1 MB limit.To configure the body size limit for Server Actions, see: https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit] 이런 에러를 만났습니다. 해결방안next.config.tx 파일에 serverActions에서 보내는 bodySizeLimit를 300MB로 설정해주세요. 기본이 1MB 라고 합니다.
-
미해결인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
CKE Editor 관련 버전 질문
이런 문제가 발생되어 버전이 일치하지 않아 설치가 안되어 진도를 나가지 못하고 있습니다..
-
미해결인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
이상한 자막이 계속 보입니다.
인프런 자체 자막은 아니라서 영상속에 포함이 된거 같은데 제거 가능할까요보이는 자막은 후반 부에 대부분 보이며 지금 보이는 부분은 [FE] 커리큘럼 관리 구현 부분 입니다.관련 이미지 첨부합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
7.6 챕터에서 클라이언트 컴포넌트로 바꾼 이유가 궁금합니다.
이전 챕터에서 클라이언트 컴포넌트에 대해 다뤘을때 서버에서 사용할 수 없는 훅을 사용할 경우 클라이언트 컴포넌트를 사용해야한다고 이해하였습니다. 그 중 하나가 useEffect이고 그 이유는 useEffect는 컴포넌트가 마운트 되었을 때 즉, 브라우저에 렌더링 되었을 때 실행되기 때문이라고 이해하였습니다.제가 생각했을 때에는 useActionState 훅은 서버에서 실행되어도 상관 없는 훅이라고 생각하는데 맞는지 궁금합니다.만약 맞다면 useEffect 훅을 사용하지 않고 useActionState만 사용한다면 서버 컴포넌트로 사용할 수 있는 것인지도 궁금합니다.
-
미해결비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
4-2 플러터 실행 안되는 문제~
start medium phone api 36 디바이스를 추가하고 실행시키면 첨부한 이미지처럼 검은 화면이 나오거나 안드로이드 폰 배경화면만 나오는데 이건 왜 그런걸까요?우측하단 디바이스 선택하는 곳에서 웹으로는 잘 실행이 됩니다. flutter doctor로 검사해도 별다른 문제가 없는데 커서로 물어보면 주구장창 flutter doctor -v 테스트만 하네요~ ㅜㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기존강의 구매자, 업데이트 끝인가요?
이 강의를 이전에 구입했었고이제 들으려 하니 코드도 강의도 옛날 그대로고 업데이트도 끝난것 같네요
-
해결됨비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
현직 백엔드 개발자입니다. 질문드립니다.
현재 백엔드 개발자로써 근무중인 직장인 입니다. 추후 1인 창업을 목표로 이 강의를 구매하였는데요.개발자가 이 강의를 통해 좀 더 시너지를 극대화시킬 수 있는 방법이 있는지 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
게시물 업로드 시 userId가 undefined로 들어가는 오류
안녕하세요.게시물 업로드 요청 시 500 Internal Server Error 에러가 발생합니다.현재 코드에는 쿠키도 함께 전달되고, 네트워크 탭에서 확인해보면 formData 값도 정상적으로 전송되는 것으로 보입니다. const onSubmit: FormEventHandler = (e) => { e.preventDefault(); // formData 객체에 값 넣기 const formData = new FormData(); formData.append("content", content); preview.forEach((item) => { if (item) { formData.append("images", item.file); } }); // 전송 fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); };그런데 서버에서는 userId가 undefined로 들어가고 User 정보가 없다(?)는 오류가 발생합니다.다른 분들의 Internal server error 관련 질문을 살펴봐도, 이 문제가 프론트에서 확인할 수 있는 부분인지 잘 구분이 되지 않아 질문드립니다.제가 어디를 중점적으로 확인해보면 좋을까요?
-
미해결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 에 따라 나뉘나요? 후자인걸로 생각하고 있긴 한데 맞는지 너무 헷갈리네요.. 감사합니다! 좋은 하루 되세요!
-
미해결프론트엔드 마스터클래스
메모이제이션 뒷부분 짤린건가요?
103강 메모이제이션과 104강 가상화가 매끄럽게 이어지지 않고 끊긴 느낌이라 질문드립니다!
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
유저 포인트 관련해서 질문 드립니다
유저의 상품을 다른 사용자가 구매할 시 '거래 후 잔액'과 '포인트'의 값이 일치해야 되는 게 아닌지 궁금합니다!
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
streaming 페이지 보완 필요
안녕하세요, 잘 학습하고 있는 학생입니다. 강의 따라가면서, streaming 파트는 다 적용을 했습니다. 소개 탭에서 홈 탭으로 이동 시에 태그목록과 포스트리스트도 skeleton 로딩페이지 잘 적용됩니다.'홈'을 눌렀을때, 기존의 '로딩 되는 중에 아무 변화 없이 사용자를 마냥 기다리게 함'에서 현재의 '로딩 되는 중에 skeleton 보여줌으로써 로딩되고 있음을 나타내줌'으로의 개선은 사용자 경험에 있어서, 정말 효과적인 방법이라고 느꼈습니다. 다만, 문제가 있습니다. '홈' 을 눌러 이동하는 경우말고, 태그 목록에서 나머지 'css'태그, 'git'태그 등등 이를 직접 클릭해서 이동하는 경우에는 streaming 이 적용되지 않습니다.예를 들어, 홈을 클릭한 상황에서는 skeleton ui가 잘 나타나지만, 그렇게 홈으로 이동한 상황에서 다른 태그(css,Git 등)로 다시 이동하는 상황에서는 적용되지 않고 그대로입니다. 이를 해결하기 위해선 어떻게 해야 하나요?
-
미해결Next + React Query로 SNS 서비스 만들기
useSuspenseQuery 사용 시 SSR 401 이슈 관련
안녕하세요 강사님 좋은 강의 잘 듣고 있습니다!useSuspenseQuery를 사용 중에 고민이 생겨서 질문 드립니다.제가 구현하고 있는 프로젝트의 대부분 API는 인증이 필요합니다.refresh token은 http only 쿠키로 관리하고, access token은 쿠키에 저장하고, 요청 헤더에 넣어 인증을 하고 있습니다.useSuspenseQuery를 사용하는 페이지에서 SSR 단계에 401 에러가 발생합니다.이후 CSR 전환 시에는 정상적으로 데이터를 불러와 화면은 최종적으로 렌더링됩니다.해당 페이지를 dynamic import로 CSR 강제하면 401이 발생하지 않습니다. 제가 추정한 원인은클라이언트 컴포넌트 내부라도 초기 렌더링 시 SSR 패스에서 useSuspenseQuery가 실행되어 서버에서 API 요청이 발생.이때 공통 axios 인스턴스가 클라이언트 전용 방식으로 쿠키를 읽어 헤더에 토큰을 주입하도록 구현되어 있어, 서버 환경에서는 토큰을 읽지 못해 401이 발생하는 것으로 판단했습니다. 해결을 위해 시도한 방법prefetchQuery +useSuspenseQuery 조합으로, prefetchQuery 단계에서 next/headers를 통해 서버 환경에서 토큰을 읽어 주입하면 401이 사라졌습니다.다만, 모든 useSuspenseQuery 호출 지점마다 prefetchQuery를 추가하는 것은 과도하다고 느껴 대안을 모색 중입니다. 질문 사항왜 SSR에서 실행되나요?클라이언트 컴포넌트 내부에서 호출하는데도 useSuspenseQuery가 SSR 렌더링 단계에서 동작하는 메커니즘을 정확히 이해하고 싶습니다.useSuspenseQuery의 단점/주의점강의에서는 주 사용을 권장해 주셨는데, 모든 데이터 관리에 useQuery 대신 useSuspenseQuery 사용하는게 좋은건지 실제 서비스에서 고려해야 할 단점이나 주의사항이 궁금합니다.401을 피하는 권장 패턴제 환경처럼 서버에서 토큰을 읽지 못해 401이 나는 경우,제가 시도한 방법 인prefetchQuery 적용 외에 권장되는 표준 패턴이 있을까요?prefetchQuery를 여러 곳에서 사용할 때의 리스크여러 페이지/쿼리에서 prefetchQuery를 널리 적용하면 TTFB 지연, 직렬화된 캐시의 HTML 페이로드 증가, 중복 호출 등의 문제가 커질 수 있을까요?그렇다면 적절한 적용 기준이나 완화 전략이 궁금합니다.그리고 어떤 기준으로 prefetchQuery를 적용하면 좋을지도 궁금합니다.문서와 블로그, GPT 등을 찾아봤지만 명확히 정리하기 어렵고, 제가 질문을 드릴 수 있는 최고 전문가라고 생각하여 의견을 여쭙니다.긴글 읽어주셔서 감사합니다! 아래 에러가 발생하는 예시 코드 첨부 드립니다. (APage를 CSR로 강제하면 에러 미발생)import Spinner from "@/components/common/spinner/Spinner"; import A from "@/components/pages/A"; import { Suspense } from "react"; import { ErrorBoundary } from "react-error-boundary"; interface APageProps { params: { id: string; }; } export default async function APage({ params, }: APageProps) { const { id } = params; const parsedId = parseInt(id); return ( <ErrorBoundary fallback={<div>에러가 발생했습니다</div>}> <Suspense fallback={<Spinner fullscreen />}> <A id={parsedId} /> </Suspense> </ErrorBoundary> ); }"use client"; import { useGetAList } from "@/api/A/queries/useGetAList"; interface AProps { id: number; } export default function A ({ id }: AProps) { const { data: probiomeList } = useGetAList(id); // 생략 import { queryKeys } from "@/constants/queryKeys"; import { UseSuspenseQueryCustomOptions } from "@/types"; import { useSuspenseQuery } from "@tanstack/react-query"; import { getAList } from "../A"; import { AList } from "@/types/A"; export function useGetAList( id: number, queryOptions?: UseSuspenseQueryCustomOptions<AList> ) { return useSuspenseQuery({ queryFn: () => getAList(id), queryKey: [ queryKeys.A.BASE, queryKeys.A.GET_A_LIST, id, ], ...queryOptions, }); }
-
해결됨비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
질문)바이브코딩 웹제작
안녕하세요 선생님,혹시 전체 강의를 수강하진 않았지만 이 부분이 가능할것으로 생각들어강의 결제하였는데, 궁금해서 문의드려요lovable이나 replit으로 만든 웹을 안드로이드 앱으로 만들려면 어떻게 해야되는건가요? 이거에 대한 강의나 관련내용이 있을까요??저 그 방법이 있는거 같아서 결제했는데,알려주실수 있나요?강의에 포함안되어 있다면통상적으로 어떤식으로 만드는 궁금합니다.
-
해결됨비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
supabase 연결하는 프로젝트 단위 기준
supabase에 연결할 때, 만드는 서비스마다 프로젝트를 다르게 설정하면 되는 걸까요?아니면 같은 프로젝트에다가 그냥 연결해도 알아서 별개로 DB를 구축해주는 건지 궁금합니다!