173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 next 강의를 거의 마치고 vercel에 배포까지 완료한 후 마지막 강의인 배포 후 최적화를 강사님과 동일하게 작성 후 vercel --prod 명령어를 통해 프로젝트를 다시 배포하였는데 해당 오류가 나타납니다.. ㅠㅠ book 폴더에서 오류가 나는것 같은데 혼자 해결해보려고 했으나, 원인도 잘 모르겠고 검색해도 잘 안나와서 여쭤봅니다.. -오류- -/book/[id]/page.tsx 코드- import { notFound } from "next/navigation"; import style from "./page.module.css"; import { BookData, ReviewData } from '@/types'; import ReviewItem from "@/components/review-item"; import ReviewEditor from "@/components/review-editor"; import Image from "next/image"; export async function generateStaticParams() { const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`); if(!response.ok) { throw new Error(response.statusText); } const books:BookData[] = await response.json(); return books.map((book) => ({ id: book.id.toString(), })) } async function BookDetail({bookId} :{bookId:string}) { const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}`); if(!response.ok) { if(response.status === 404) { notFound(); } return <div>오류가 발생했습니다...</div> } const book = await response.json(); const { id, title, subTitle, description, author, publisher, coverImgUrl } = book; return ( <section> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <Image src={coverImgUrl} width={240} height={300} alt={`도서 ${title}의 표지 이미지`} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </section> ); } async function ReviewList({bookId}:{bookId : string}) { const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}`, {next:{tags:[`review-${bookId}`]}}); if(!response.ok) { throw new Error(`Review fetch failed : ${response.statusText}`); } const reviews:ReviewData[] = await response.json(); return ( <section> {reviews.map((review) => ( <ReviewItem key={`review-item-${review.id}`} {...review} /> ))} </section> ) } export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) { const {id} = await params; const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}`); if(!response.ok) { throw new Error(response.statusText); } const book:BookData = await response.json(); return { title:`${book.title} - 한입북스`, description:`${book.title}`, openGraph:{ title:`${book.title} - 한입북스`, description:`${book.title}`, images:[book.coverImgUrl], } } } export default async function Page({ params }: { params: Promise<{ id: string }> }) { const resolvedParams = await params; return ( <div className={style.container}> <BookDetail bookId={resolvedParams.id} /> <ReviewEditor bookId={resolvedParams.id} /> <ReviewList bookId={resolvedParams.id} /> </div> ) }
최다빈
2025-01-14T09:12:24.927Z
댓글 2
좋아요 0
조회수 213
미해결
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님 강의수강 중에 궁금한 점이 있어 문의드립니다. 강사님 PC에서는 해당 오류가 안나는데 저 소스에선 해당 에러가 뜨네요. 1.update response = newPost.id 관련해서 타입을 지정하지 않는건 의도 한부분인지 궁금합니다. 2.eslint 설정이 안뜨는 rule 설정이 궁금합니다. 'unknown' 형식에 'id' 속성이 없습니다.ts(2339) ❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.
react-native typescript nestjs react-query zustand
khjeong
2025-01-14T09:00:33.996Z
댓글 2
좋아요 0
조회수 97
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 시간이 1분이고 영상 자체가 없어서요. 그냥 학습자료만 보고 넘어가는 부분인가요? 그리고 전체 강의 코드는 어디서 다운로드 받을 수 있나요?
react react-native 하이브리드-앱 graphql next.js
희소식
2025-01-14T08:51:58.296Z
댓글 2
좋아요 0
조회수 178
해결됨
한 입 크기로 잘라먹는 Next.js
Next 강의에서 App Router 실습을 위해서 강사님께서 올려주신 자료를 다운받으면 위 사진과 같이 강의와는 다르게 Promise 타입이 존재하여 params.id 에 오류가 발생하게 됩니다.
Full Stack 개발자
2025-01-14T05:09:56.296Z
댓글 2
좋아요 0
조회수 81
해결됨
한 입 크기로 잘라먹는 Next.js
Next 강의에서 App Router 실습을 위해서 강사님께서 올려주신 자료를 다운받으면 위 사진과 같이 강의와는 다르게 Promise 타입이 존재하여 searchParams.q에 오류가 발생하게 됩니다. 그래서 Promise 타입을 없애면 오류는 사라지지만 빌드타입에 오류가 아래와 같이 발생합니다. 어떻게 해결하면 될까요?
Full Stack 개발자
2025-01-14T04:38:24.553Z
댓글 2
좋아요 0
조회수 61
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint를 설치하면 이전과 달리 esling.config.mjs로 파일이 설정되며 extend나 rules의 활용이 기존과 다른 방식으로 진행되며 충돌이 일어납니다. stackoverflow나 chatGPT의 도움을 받아 동작은 되지만, 이 부분 다시 설명해주셔야 하는게 아닌지요. (기존에 설명된 부분들도 코드나 적용방식이 달라져서, 플러그인을 활용하도록 합니다) 이 부분을 스스로 혼자 찾아서 수정할 수 있는 역량이 있다면 이 강의를 듣지 않겠지요. 하루 종일 한단원도 나가지 못하고 .. 해결하려다 포기하게 되네요. 2년전에 산 강의를 시간이 없어 이제 듣는 제 문제도 있겠지만.. 이 부분 상세한 설명을 넣어주셔야 할것 같아요.
react node.js seo graphql next.js
이지은
2025-01-13T14:04:20.783Z
댓글 3
좋아요 0
조회수 431
해결됨
한 입 크기로 잘라먹는 Next.js
혹시 백엔드서버를 종료해도 에러가 뜨지안고 정상가동되면 어떻게해야하나요?.. 당황스럽네요 하하 아 캐싱문제네요 강제 새로고침으로 해결했습니다. 감사합니다. 음 아니네요 여전히 이상하네요.. 전 이상하게 Footer에서 먼저 에러가 나네요. force cache가 되어있음에도.. 왜그럴까요?ㅜㅜ
codingforfun
2025-01-13T09:04:55.093Z
댓글 2
좋아요 1
조회수 487
미해결
한 입 크기로 잘라먹는 Next.js
실제 https로 배포된 API를 fetch를 활용하여 SSR을 구현하고있습니다. 문제는 local에서는 yarn build -> yarn start 하고 테스트를 진행하면 fetch가 정상적으로 작동합니다. 하지만 AWS Amplify를 활용하여 Next JS를 배포하고 배포한 사이트에서 fetch(pending 이후에 catch로 빠짐)가 작동하지않습니다. API에 문제가 있나해서 다른 API를 CSR로 테스트를 해보면 정상적으로 200이 됩니다. 원인이 뭘까요?
brh1243
2025-01-13T01:29:45.582Z
댓글 2
좋아요 0
조회수 220
해결됨
한 입 크기로 잘라먹는 Next.js
폴라우트 페이지 2를 보면서 / 인덱스페이지가 강사님은 static 페이지가 아닌 다이나믹 페이지로 빌드가 되는 부분에서 강사님은 fetch에 force-cache를 적용시키면서 이제 다이나믹된 페이지를 static 페이지로 바꾸셨느데 일단 저는 force-cache 옵션을 적용을 안해도 static 페이지이더라구요 강사님과 저랑 다른 점은 api호출하는 함수 부분을 따로 api 폴더에 빼둔거 말고는 다른 점은 없습니다 . 이렇게 따로 빼놓은 뒤 그냥 promis.all로 데이터 패칭을 해서 그대로 화면에 보여줬습니다 (이것저것 시험하느라 Allbook ,RandomBook 컴포넌트를 따로 빼지는 않은 상태입니다. ) export default async function Home() { const [allBooks, randomBooks] = await Promise.all([ fetchBooks(), fetchRandomBook(), ]); 저는 force-cache 를 적용안햇는데도 왜 다이나믹 페이지가 안되고 static 페이지가 되는걸까요 ...
aso
2025-01-13T00:39:51.392Z
댓글 2
좋아요 3
조회수 293
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
// CssModulePage.jsx import styles from "./styles.module.css"; export default function CssModulePage() { return ( <> <button className={styles.버튼스타일}>버튼</button> <div className={styles.네모상자스타일}>네모상자</div> </> ); } .버튼스타일 { background-color: yellow; } .네모상자스타일 { width: 200px; height: 200px; } Server Error Error: The default export is not a React Component in "/section04/04-03-css/page"
react react-native 하이브리드-앱 graphql next.js
이 규성
2025-01-12T09:48:03.563Z
댓글 5
좋아요 0
조회수 316
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
영상이 18분쯤 마무리 되는 것 같은데 영상길이가 87분으로 검은화면만 노출됩니다 확인 부탁드려요!
react react-native 하이브리드-앱 graphql next.js
baby4
2025-01-12T06:30:59.501Z
댓글 2
좋아요 0
조회수 96
미해결
따라하며 배우는 리액트 네이티브 기초
react native cli로 개발할때 mac에서는ios,and 2가지가 있는데 윈도우에서는 android만 되는건가요? ios는 안되는건가요?
정근혁
2025-01-11T12:10:13.470Z
댓글 2
좋아요 0
조회수 744
미해결
Next + React Query로 SNS 서비스 만들기
제가 알기로는 서버 액션은 현재 url, 강의 기준 /i/flow/signup으로 네트워크 요청이 일어나는거로 알고 있는데 msw의 핸들러로 fetch를 하신 이유가 궁금합니다. 작동하는 코드인가요? const onSubmit = async (formData: FormData) => { "use server"; let shouldRedirect = false; try { const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", credentials: "include", body: formData, }); console.log(res.status); console.log(await res.json()); shouldRedirect = true; } catch (error) { console.error(error); } if (shouldRedirect) { redirect("/home"); } console.log("실행됨"); }; 위 코드는 SignupModal에서 msw의 핸들러로 form 제출 요청을 보내는 코드이고, http.post(`${baseUrl}/api/users`, () => { console.log("로그인 성공"); return HttpResponse.json({ message: "msw 성공", }); }), 이 코드는 핸들러 코드입니다. 요청 url인 http://localhost:3000/api/users로 폼 제출이 정상적으로 이루어지는지 궁금합니다.
react next.js react-query next-auth msw
처음끝
2025-01-11T06:52:07.516Z
댓글 2
좋아요 0
조회수 165
미해결
맛집 지도앱 만들기 (React Native & NestJS)
이러한 오류가 계속뜨는데 다른 질문에서 버전을 바꾸라고햇을떄 react-native-safe-area-context랑 react-native-screens 이것들의 버전을 바꾸는 방법을 모르겠습니다 오늘 몇시간넘게 해결이 안돼 너무 답답해서 도와주시면 감사하겠습니다.
react-native typescript nestjs react-query zustand
kjm010629
2025-01-10T16:35:56.238Z
댓글 2
좋아요 0
조회수 253
미해결
맛집 지도앱 만들기 (React Native & NestJS)
질문을 계속해서 죄송합니다 네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ
react-native typescript nestjs react-query zustand
2025-01-10T12:50:06.501Z
댓글 2
좋아요 0
조회수 244
미해결
맛집 지도앱 만들기 (React Native & NestJS)
말씀드린대로 front파일을 만들고 그 안에 전부 프로그램을 옮겻을떄 Parsing error: No Babel config file detected for C:\Users\user\Documents\react native-study\MatzipApp\front\index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. 이러한 에러가 거의 모든 파일에 계속 나는데 왜그러는 걸까요.. ㅠ ㅠ
react-native typescript nestjs react-query zustand
kjm010629
2025-01-10T08:49:41.814Z
댓글 3
좋아요 0
조회수 149
미해결
맛집 지도앱 만들기 (React Native & NestJS)
선생님 준비중인 강의가 혹시 있으실까요? 선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다. 만족도가 이렇게 높은 강의는 첨음이거든요 그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다. 계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ
react-native typescript nestjs react-query zustand
호갱
2025-01-10T06:39:02.134Z
댓글 1
좋아요 1
조회수 147
해결됨
한 입 크기로 잘라먹는 Next.js
아직 사용하기 전에 변수들이 있는 경우 아래 사진과 같이 표시되는데 오류가 발생하지 않도록 설정은 어떻게 하나요?
Full Stack 개발자
2025-01-10T01:47:24.342Z
댓글 1
좋아요 0
조회수 81
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?
react react-native 하이브리드-앱 graphql next.js
한혜원
2025-01-09T10:59:06.747Z
댓글 2
좋아요 0
조회수 167
미해결
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??
react react-native 하이브리드-앱 graphql next.js
한혜원
2025-01-09T09:02:39.699Z
댓글 2
좋아요 0
조회수 179
