inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

build 오류

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

$ npm run build > instagram-clone@0.1.0 build > next build ▲ Next.js 14.2.12 - Environments: .env Creating an optimized production build ... ✓ Compiled successfully Linting and checking validity of types .Failed to compile. Linting and checking validity of types ...next/types/app/page.ts:8:13 Type error: Type 'OmitWithTag<typeof import("D:/Study/React/next/Supabase/instagram-clone/app/page"), "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | ... 6 more ... | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'. Property 'matadata' is incompatible with index signature. Type 'Metadata' is not assignable to type 'never'. 6 | 7 | // Check that the entry is a valid entry > 8 | checkFields<Diff<{ | ^ 9 | default: Function 10 | config?: {} 11 | generateStaticParams?: Function 빌드할때 오류뜹니다 .next 안에 있는 오류인데 지웠다 다시 해도 똑같아요 어떻게 해야 할까요??

  • firebase
  • next.js
  • tailwind-css
  • react-query
  • supabase
br 댓글 2 좋아요 0 조회수 386

Next 빌트인 Image컴포넌트를 사용하지 않는 이유는 뭔가요??

해결됨

한 입 크기로 잘라먹는 Next.js

Next.js에서는 기본적으로 제공하는 빌트인 Image 컴포넌트가 있음에도 불구하고, 강의에서는 일반 HTML img 태그를 사용하고 있습니다. Next.js의 Image 컴포넌트는 이미지 최적화와 같은 여러 이점을 제공하는 것으로 알고 있는데, 왜 이를 사용하지 않고 img 태그를 선택했는지 궁금합니다. 이에 대한 이유나 특별한 상황이 있다면 설명해 주시면 감사하겠습니다.

  • react
  • typescript
  • next.js
장영진 댓글 2 좋아요 0 조회수 317

페이지 이동시 또는 새로고침시 사전랜더링 질문

미해결

한 입 크기로 잘라먹는 Next.js

처음 배울 때에는 브라우저에 요청이 들어올 때 기본적으로 SSR 방식으로 사전 렌더링이 된 후, 하이드레이션 작용이 일어나 그 후 CSR 방식으로 작동된다고 알고 있습니다. 질문하기 쉽게 / 경로를 보여주는 컴포넌트를 Home, book/:id 경로를 보여주는 컴포넌트를 BookDetail 라고 표기하겠습니다. Home 컴포넌트에 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 하고, BookDetail 컴포넌트도 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 진행 할 수 있도록 둘다 설정해 놓았을 때, 처음 HOME 컴포넌트 접속시 getServerSideProps 메서드가 실행되고 BookDetail 로 이동시 getServerSideProps 도 메서드도 실행됩니다. getServerSideProps 메서드는 사전 랜더링 때 실행이 되는 걸로 알고 있는데, 기존에 Next.js 랜더링 방식은 사전 렌더링 후, 페이지 이동은 CSR 로 진행된다고 배웠습니다. 그렇다면 BookDetail 로 이동시 CSR 방식으로 랜더링 된다면 , BookDetail 의 getServerSideProps 메서드는 실행되지 않아야 하는게 아닌가요 ?

  • react
  • typescript
  • next.js
픽셀소프트웨어 댓글 2 좋아요 2 조회수 257

그룹폴더 질문있습니다.

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요 제로초님 강의를 듣다가 문득 궁금한점이 있어서 질문드립니다. 현재 폴더 구조가 app하위에 (afterLogin) 폴더와 (beforeLogin) 폴더가 있는데, 지금 강의에서는 당연한듯이 beforeLogin 폴더의 layout이 뜨고있는데요, 왜 그런건지 궁금합니다. 현재 단계에서는 뭔가 로그인을 했다는 조건같은걸 아직 작성하지 않은것 같아서요 정리하자면 현재 localhost:3000 의 기본 페이지가 afterlogin 폴더의 layout이 아니라 beforeloign의 layout이 뜨는 이유가 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
seongwoo91 댓글 2 좋아요 0 조회수 121

강의 1.3 백엔드 서버 세팅하기에서 빌드시 에러

해결됨

한 입 크기로 잘라먹는 Next.js

12:22 npm run build 시에 에러가 validator 모듈이 없다고 나오네요 validate-decoration.ts 파일에서 import * as validator from 'validator'; packae.json에 업데이트가 안되어 있는 것 같아요.

  • react
  • typescript
  • next.js
여어 댓글 3 좋아요 0 조회수 309

article / section 태그에 관해

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

article 과 section tag 를 자주 사용하시는데, 혹시 어떤 기준으로 사용하시나요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 1 좋아요 0 조회수 194

혹시 MUI에 대한것도 배우나요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이 강의에서 MUI에 대한 것도 배우는지 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
minchoi9979 댓글 2 좋아요 0 조회수 170

섹션25

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이건 무슨 오류 일까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
imhj11777 댓글 2 좋아요 0 조회수 102

2.20 강의 Vercle 에 벡엔드 배포 후 미출력

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. 강좌 잘 보고 있습니다. 다름이 아니라 vercel 에 onebite-books-server 를 배포하였습니다. 로컬에서는 작동을 확인하였습니다. 첫 화면은 잘 나오는데 /api 폴더로 접근시 화면에 swagger 가출력이 안되고 있네요. ㅠㅠ; vercel 로그는 정상 배포 되었구요. 첫화면은 잘 나옵니다. 혹시 환경변수를 셋팅해야 하는가 해서 검토해 보았지만 필요없으시다고 하셔서 그냥 두었습니다. 에러 메시지는 콘솔창에 Failed to load resource: the server responded with a status of 404 () 이런 메시지가 여러개 출력 중입니다. 확인좀 부탁드립니다. 감사합니다.

  • react
  • typescript
  • next.js
억수 댓글 2 좋아요 1 조회수 512

카테고리 변경 시 이미지 로딩

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

카테고리 관련 강의를 수강 중입니다. 카테고리 변경 시 백그라운드 변경되는 부분이 있는데요 해당 부분이 이미지 로딩(변경?)이 매우 늦게 되더라구요 해당 부분 개선해보려면 어떤 것을 시도해보면 좋을까요?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 2 좋아요 1 조회수 224

무한스크롤(React Infinite Scroller)의 pageStart

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

16-02-infinite-scroller 강의 중에 이해가 가지 않는 코드가 한줄 있어서 질문드립니다! InfiniteScroll에 pageStart 옵션이 걸려있는데, 이게 어디에 영향을 주는건가요? 초기 페이지 번호라기에는 이 옵션을 999999 처럼 의미 없는 값을 줘도 문제 없이 작동하고 그러네요.. 딱히 의미가 없는 코드 같은데 pageStart라는게 어떤식으로 작동되는건지가 좀 궁금합니다..

  • react
  • node.js
  • seo
  • graphql
  • next.js
ten 댓글 2 좋아요 0 조회수 154

상세 페이지 api관련 궁금증

해결됨

한 입 크기로 잘라먹는 Next.js

책의 정보 상세 페이지에 접근하게 되면 책의 상제 정보 요청과, 책의 리뷰에 대한 api 요청이 이렇게 두가지를 하는데요 혹시 현업에서도 이런 상세 페이지(상품 정보, 댓글이나 상품평 이 필요한 페이지)에서 api요청을 여러번 하게 백엔드 api를 설계 하는 것인가요?? 아니면 두번 요청이 필요한 페이지에 대한 예를 만들기 위해 분리를 해 놓은 것인가요???

  • react
  • typescript
  • next.js
ajrfyd 댓글 2 좋아요 0 조회수 149

next zustand 사용 시 문의

미해결

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

next zustand 세팅 시, provider 를 사용해야한다는 글이 있어서요. 현재 강의처럼 이후에 서비스 개발 시 사용해도 이슈가 없는 부분일까요? https://zustand.docs.pmnd.rs/guides/nextjs#providing-the-store https://leonkong.cc/nextjs-zustand-

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
femaster1 댓글 2 좋아요 0 조회수 505

getStaticPaths

해결됨

한 입 크기로 잘라먹는 Next.js

getStaticPaths함수는 async키워드를 안붙이는 함수인가요?

  • react
  • typescript
  • next.js
이태관 댓글 2 좋아요 0 조회수 276

채팅 관련 부분, useInfiniteQuery

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

안녕하세요, 채팅 관련 부분에, reverseInfiniteQuery를 적용할 수 있을 것 같아, 도전해보던 찰나에 잘 안되어서 질문드립니다!! 혹시 역무한스크롤 방식으로 할 수 있는 방법이 있을까요?? 보통 실무에서 채팅을 어떠한 방식으로 구현하는지 매우 궁금합니다. 1. 역무한 스크롤 방식 2. 계속해서 refetch를 하는 방식

  • firebase
  • next.js
  • tailwind-css
  • react-query
  • supabase
김용민 댓글 2 좋아요 0 조회수 222

강의에 대해 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 강의를 열심히 보면서 하고 있습니다 궁금한 점이 커리큘럼이 html, css, js를 하고 리액트 강의도 있는 건가요? 아니면 리액트 없이 바로 Next.js 강의인가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 252

섹션2 사전 렌더링에 대해 궁금한 것이 있습니다.

해결됨

한 입 크기로 잘라먹는 Next.js

Next.js의 사전 렌더링에 대해서 설명을 하실때, 유저가 브라우저를 통해 서버에 초기 접속 요청을 할때, 자바스크립트 코드를 실행하여 html을 렌더링한다고 하셨는데 이 html은 해당 서비스의 특정 경로에 대해서만 html을 렌더링하는 것인가요? 아니면 그 서비스에 있는 모든 페이지의 html을 렌더링하는 것인가요?

  • react
  • typescript
  • next.js
gga01075 댓글 2 좋아요 0 조회수 171

라우팅 관련 질문 있습니다!

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요 강의 잘 보고 있습니다. 한가지 질문이 있는데요! 라우팅 테스트 중에 (beforeLogin) 하위로 추가 생성되는 라우트는 Link로 접속하면 잘 되는데, 직접 URL로 치고 가면 not-found 페이지가 뜨는데 어떤 이유일까요 ? 질문1) 아래 이미지의 itest 폴더 인터셉팅 잘됨. 하지만 새로고침 하거나 직접 localhost:3000/itest 치고 들어가면 페이지 없음. (원래는 새로고침 시 page.tsx 내용이 보여야 하지 않나요?) 질문2) 테스트겸 localhost:3000/dkwlsWK 라우트를 생성해서 직접 URL치고 들어가니 역시 없는 페이지로 뜹니다. 혹시 (그룹핑) 하거나 페레럴을 사용한 것과 연관이 있을까요 ? 질문3) 아래 이미지 중 @modal/(.)itest 에 default.tsx 로 하면 에러가 나더라구요! (page.tsx로 하면 괜찮지만 페이지를 찾을 수 없음)

  • react
  • next.js
  • react-query
  • next-auth
  • msw
jjongrrr 댓글 2 좋아요 0 조회수 234

인기 태그

인프런 TOP Writers

주간 인기글