묻고 답해요
140만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Nextjs14 에서의 react query사용의 필요성
리액트 쿼리를 사용하면 결국 client side fetching이 됩니다. nextjs13부터 server side fetching이 가능해지고 suspense를 활용한 data streaming은 데이터펫칭에서 새로운 패러다임을 제시했다고 생각합니다. 굳이 리액트 쿼리를 사용할 이유가 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
가운데 정렬
container 중앙으로 이동시킬때.container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; }라고 하셨는데 가운데 정렬하게 될때 ,margin: 0 auto; 하는것과 어떤차이가 있을까요 ??
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
On-Demand ISR 관련 질문
On-Demand ISR 사전 렌더링 방식을 보면서 현재 대부분의 SSR로 구현 되어 있는 어플리케이션을 좀 더 최적화 할 수 있겠다는 생각을 했습니다! 여기서 질문은 API Router를 생성해서 revalidate할 경로를 작성해서 해당 경로의 페이지를 On-Demand ISR 처리되도록 구현해주셨는데요..! 실제로 비지니스 로직을 작성할 때는 많은 페이지들이 존재하는데, 이럴때는 API Router에서 "/" 인덱스 페이지 경로를 하드코딩한 부분을 동적으로 받을 수 있게 처리해서 백엔드 서버와 통신 시, 정상응답을 받았을 때, 해당 API Router를 호출하게 하면 되는걸까요..?!추가로, 페이징 기능 같은 페이지가 있는 경우에는 어떤식으로 On-Demand ISR을 적용하는지도 궁금합니다..!!바쁘시겠지만 답변 해주시면 감사하겠습니다 😀 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
2.8) 레이아웃 설정시 getLayout 메서드말고 if문 써서 이렇게 해도 될까요?
레이아웃 컴포넌트의 경우 여러 페이지에 공통적으로 들어가야 하는 것이기 때문에, _app.tsx에 넣어야 하는 것은 이해했습니다. 그리고 모든 페이지에 들어가는 레이아웃이 아닌 특정 페이지만 들어가는 레이아웃의 경우에 정환님 같은 경우에는 getLayout이라는 메서드를 해당 레이아웃을 필요로 하는 페이지 컴포넌트 함수에 메서드로 주시고 _app.tsx에서는 그 메서드를 불러오게끔 하셨는데요. 제가 머리가 나빠서인지는 모르겠지만, 뭔가 이런 메서드로 레이아웃을 관리하니까 이해하기 어렵고 뭔가 직관적으로 다가오는 느낌이 없어서 힘들더라구요.. 그래서 그냥 router와 if문을 이용해서 특정 페이지의 경우에만 searchable 레이아웃이 나오게 하고, 아닌 경우에는 그냥 페이지를 리턴하도록 하는 게 저한테는 뭔가 더 직관적..? 으로 다가오는데 이런 식으로 사용해도 되는지 궁금해서 여쭈어봅니다.. (코드는 밑에 같이 써놓았습니다!) export default function App({ Component, pageProps }: AppProps) { const router = useRouter(); const isSearchableLayoutPage = router.pathname === '/' || router.pathname === '/search'; return ( <GlobalLayout> {isSearchableLayoutPage ? ( <SearchableLayout> <Component {...pageProps} /> </SearchableLayout> ) : ( <Component {...pageProps} /> )} </GlobalLayout> ); }
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
2.20) vercel에 프로젝트 배포 시 fetch failed 에러가 발생합니다
안녕하세요!다름이 아니라 2.20 실습을 진행하면서 vercel에 앱을 배포하려고 하는데Error: Command "npm run build" exited with 1에러가 발생했습니다. [cause]: Error: connect ECONNREFUSED 127.0.0.1:12345 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16) { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 12345 }vercel 에서 에러 로그를 살펴보니 book/1, book/2, book/3 페이지를 prerendering 할 때 위와 같은 에러가 발생했습니다.로컬에서 앱을 빌드한 후 실행했을 때엔 문제가 발생하지 않았습니다 ㅠㅠ export default async function fetchBookById(id: number): Promise<BookData | null> { const url = `http://127.0.0.1:12345/book/${id}`; try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return response.json(); } catch (error) { console.error(error); return null; } }위 코드는 book/{id}페이지로 들어왔을 때 실행하는 함수입니다! import { useRouter } from "next/router"; import style from "./[id].module.css"; import fetchBookById from "@/lib/fetch-book-by-id"; import { GetStaticPropsContext, InferGetStaticPropsType } from "next"; import Head from "next/head"; export const getStaticPaths = () => { return { paths: [{ params: { id: "1" } }, { params: { id: "2" } }, { params: { id: "3" } }], fallback: true, }; }; export const getStaticProps = async (context: GetStaticPropsContext) => { const id = context.params!.id; const data = await fetchBookById(Number(id)); return { props: { data, }, }; }; export default function Page({ data }: InferGetStaticPropsType<typeof getStaticProps>) { const router = useRouter(); if (router.isFallback) { return ( <> <Head> <title>한입북스</title> <meta property="og:image" content="/thumbnail.png" /> <meta property="og:title" content="한입북스" /> <meta property="og:description" content="한입 북스에 등록된 도서들을 만나보세요" /> </Head> <div>로딩중입니다.</div> </> ); } if (!data) { return { notFound: true, }; } const { id, title, subTitle, author, coverImgUrl, description, publisher } = data; return ( <> <Head> <title>{title}</title> <meta property="og:image" content={coverImgUrl} /> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> </Head> <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }}> <img src={coverImgUrl} /> </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> </div> </> ); } 혹시 몰라 해당 페이지의 전체 코드 같이 남겨봅니다 😭감사합니다!
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
3.2) 페이지 라우팅 설정하기 강의에서 질문입니다.
param의 타입을 지정할 때 string은 이해가 되는데, string의 배열인 형태는 예를 들어 어떤게 있을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
3.7) 올려주신 소스 코드 링크에 문제가 있는 것 같아요!
링크타고 들어가보면 이렇게 뜨면서 다운로드가 불가능하다고 뜨네요!그래도 page router 부분 css 랑 코드 똑같은 것 같아서 전 그 부분 보고 진행했어요 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
혹시 해당 강의에서 테일윈드는 사용안하시나요?
페이지 라우터 프로젝트 생성때 테일윈드는 지금은 안하고 나중에? 뒤에서? 사용한다고 하셨던 기억이있는데 앱라우터 생성할때도 테일윈드는 사용안하는거로 하시네요! 테일윈드는 후반부에 사용되나요? 제기억이 잘못된건가 싶기도해서 여쭤봅니다 ㅎㅎ
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
2.16) 영상 15분 13초쯤 부터 설명해주시는 notFound: true 관련 질문 있습니다
영상처럼if (!book) { return { notFound: true, }; }이렇게 코드 설정을 하면 컴포넌트에서 작성했던if (!book) return "문제가 발생했습니다 다시 시도하세요";해당 코드는 작성하지 않고 폴백중에 로딩만 표시되도록 해도 되는게 맞을까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결Next + React Query로 SNS 서비스 만들기
next-auth 서버 에러 받기
안녕하세요 제로초님 새소식에 throw CredentialsSignin을 해서 next-auth 프론트에서 서버 에러 받기 부분을 하고 있는데throw CredentialsSignin을 하면 저는 서버 주소 localhost:9090/0/i/flow/login?error=... 으로 리다이렉트됩니다. 위 경로를 프론트 주소 localhost:3000으로 수정하려면 어디서 변경해야 하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
fetchUseditems 날짜
피그마에는 startDate, endDate 지정하는게 있는데 playground fetchUseditems에는 날짜 설정이 없네요.다른 방법이 있는건가요?
-
미해결한 입 크기로 잘라먹는 Next.js(15+)
컴포넌트를 만들 때 화살표 함수를 쓰지 않는 이유
안녕하세요선생님 코드를 보다보면 컴포넌트를 화살표 함수를 쓰지 않더라구요. rafce를 사용하지도 않으시고.혹시 이유가 있을까요? 그리고 컴포넌트 파일명 시작을 대문자로 하지 않는 이유도 궁금합니다!스트리밍 적용할 때 loading.tsx를 Loading.tsx라고 하면 적용이 안되더라구요
-
미해결Next + React Query로 SNS 서비스 만들기
metadata
안녕하세요 복습중에 있는데 검색해도 잘모르는내용이라 내용 적어봅니다.넥스트를 배우려는 큰이유중 하나가 SEO 때문인데 넥스트에서 metadata 페이지마다 꼬박꼬박 잘적고 (title ,desc)시맨태그 최대한 이용해서 마크업하면 끝인가요 ?넥스트 내에서 더 해줘야하는 작업이라던가.. 그런게 있을까요 ? (구글 서치콘솔 이런거 말고.. 개발자가 코드 작업시에 놓치면안되는 요구 SEO 작업이 궁금해서요 )
-
미해결Next + React Query로 SNS 서비스 만들기
public 경로
초보적인질문입니다. src기준이니깐 @못쓴다면 public 기준은 ../../../../ 이런식으루 사용해야할까요 ?
-
미해결한 입 크기로 잘라먹는 Next.js(15+)
SSG 폴백 옵션
안녕하세요다이나믹 페이지의 경우 path를 미리 정의해주지 않은 파일들은 빌드가 돼있지 않아 fallback 옵션을 'blocking' 이나 true로 설정해줄 경우 ssr방식으로 사전 렌더링을 하여 html파일을 받아온다고 하셨었는데요빌드 후 npm run start를 하고나서 직접 빌드 되지 않는 파일로 url에 접근해서 들어가면 확인이 가능하나 메인 페이지에서 책을 클릭해서 들어갈 경우 확인이 안되더라구요그래서 네트워크를 보니깐 현재 예제로 쓰이고 있는 프로젝트의 책 리스트들의 경우 Link 컴포넌트로 감싸져있어서 js bundle파일을 프리패칭해서 가지고 오고 있었습니다. 정환님 강의를 봤을 땐 프리패칭이 되고 있지 않는 거 같길래 궁금한데 혹시 어떤 옵션을 적용해주신 걸까요? 추가로 링크 컴포넌트로 감싼 책 리스트의 경우 마우스를 오버시키기만 해도 이렇게 데이터들을 불러오는 거 같은데이건 번들파일이라고 불러야 하나요?? 아님 그냥 요청인 건가요?한번 불러오고나서는 캐싱되지 않고 원래 마우스 오버만 시켜도 왜 계속 불러오는 걸까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결한 입 크기로 잘라먹는 Next.js(15+)
수업 2.14 에서 search 페이지를 ssg로 하신 이유가있을까요?
이전에 그냥 ssr방식으로 페이지를 설정한게 더 효율적으로 보 이는데 search 페이지나 동적 경로를 사용하는페이지에 ssg로 하신이유가있을까요? 단순 이런 방법도 있다는 설명을 위해서 보여주신게 아니라면ssg방식으로 바꿔서 html요소만 먼저 가져오고 그후에 클라이언트에서 서버로 요청을 보내서 받는게 어떤 장점이 있는지 잘모르겠습니다~ssg는 보통 404 페이지 약관같은 요청에 대한 응답을 할필요없는 페이지에 적용하는게 좋지않을까싶은데 일반적인 페이지에서도 ssg를 사용해서 클라이언트에서 서버로 요청을 보내고 받는걸 많이 사용하나요??
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
Chapter 7 영상 화면이 안보입니다.
Chapter 7 (섹션 8) 가장 첫 번째 강의는 보이는데 이후부터는 강의 영상이 나오지가 않네요
-
미해결한 입 크기로 잘라먹는 Next.js(15+)
getServerSideProps 사용 시
안녕하세요 SSR 방식의 사전렌더링을 하기위해 getServerSideProps 함수를 쓴다고 가정을 했을 때 궁금한 게 있습니다.초기 화면에 진입하고나서는 페이지 이동하면서는 CSR 방식으로 렌더링이 된다고 이해하고 있습니다. 그렇다면 현재 예시로 보여주고 계시는 'ONEBITE BOOKS' 프로젝트의 경우 메인 페이지의의 index 파일 말고는 다른 search 페이지나 book 페이지의 경우에는 getServerSideProps 이용하여 SSR방식을 채택할 필요가 없는 게 아닌지 궁금합니다.🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결Next + React Query로 SNS 서비스 만들기
[섹션3] useFormState, 이 호출과 일치하는 오버로드가 없습니다. 에러
"use client"; import style from './signup.module.css'; import onSubmit from '../_lib/signup'; import BackButton from "@/app/(beforeLogin)/_component/BackButton"; import { useFormState, useFormStatus } from 'react-dom'; export default function SignupModal() { const [state, formAction] = useFormState(onSubmit, { message: null }); const { pending } = useFormStatus();[섹선3] 클라이언트 컴포넌트에서 Server Actions 사용하기, 3분 const [state, formAction] = useFormState(onSubmit, { message: null });이쪽부분에[이 호출과 일치하는 오버로드가 없습니다.]라는 빨간에러가 뜨는데 혹시 이유를 알 수 있을까요? [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
memurai 설치가 안됩니다..
안녕하세요 제로초님 postgreSQL까지는 설치하고 데이터베이스 설정도 되었는데memurai 는 아래 오류가 뜨면서 설치부터 안됩니다.해결방법을 찾지 못해서 질문 드립니다..