묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
next-auth ./auth.ts 질문입니다 !
import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials"; import {NextResponse} from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: '/i/flow/login', newUser: '/i/flow/signup', }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }) if (!authResponse.ok) { return null } const user = await authResponse.json() console.log('user', user); return { email: user.id, name: user.nickname, image: user.image, ...user, } }, }), ] });@/auth.ts 파일 코드입니다. 이런식으로 에러가 나서 에러 창을 확인해보면 전달된 매개변수의 타입이 적절치 않다고 하는데, 강의 그대로 따라가면서 깃허브 참고하면서 코드를 작성했음에도 불구하고 오류가 나옵니다..
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
build 오류
$ 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 안에 있는 오류인데 지웠다 다시 해도 똑같아요어떻게 해야 할까요??
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Next 빌트인 Image컴포넌트를 사용하지 않는 이유는 뭔가요??
Next.js에서는 기본적으로 제공하는 빌트인 Image 컴포넌트가 있음에도 불구하고, 강의에서는 일반 HTML img 태그를 사용하고 있습니다.Next.js의 Image 컴포넌트는 이미지 최적화와 같은 여러 이점을 제공하는 것으로 알고 있는데, 왜 이를 사용하지 않고 img 태그를 선택했는지 궁금합니다.이에 대한 이유나 특별한 상황이 있다면 설명해 주시면 감사하겠습니다.
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
페이지 이동시 또는 새로고침시 사전랜더링 질문
처음 배울 때에는 브라우저에 요청이 들어올 때 기본적으로 SSR 방식으로 사전 렌더링이 된 후, 하이드레이션 작용이 일어나 그 후 CSR 방식으로 작동된다고 알고 있습니다.질문하기 쉽게 / 경로를 보여주는 컴포넌트를 Home, book/:id 경로를 보여주는 컴포넌트를 BookDetail 라고 표기하겠습니다.Home 컴포넌트에 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 하고, BookDetail 컴포넌트도 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 진행 할 수 있도록 둘다 설정해 놓았을 때,처음 HOME 컴포넌트 접속시 getServerSideProps 메서드가 실행되고 BookDetail 로 이동시 getServerSideProps 도 메서드도 실행됩니다.getServerSideProps 메서드는 사전 랜더링 때 실행이 되는 걸로 알고 있는데,기존에 Next.js 랜더링 방식은 사전 렌더링 후, 페이지 이동은 CSR 로 진행된다고 배웠습니다.그렇다면 BookDetail 로 이동시 CSR 방식으로 랜더링 된다면, BookDetail 의getServerSideProps 메서드는 실행되지 않아야 하는게 아닌가요 ?
-
해결됨Next + React Query로 SNS 서비스 만들기
그룹폴더 질문있습니다.
안녕하세요 제로초님 강의를 듣다가 문득 궁금한점이 있어서 질문드립니다.현재 폴더 구조가 app하위에 (afterLogin) 폴더와 (beforeLogin) 폴더가 있는데, 지금 강의에서는 당연한듯이 beforeLogin 폴더의 layout이 뜨고있는데요, 왜 그런건지 궁금합니다.현재 단계에서는 뭔가 로그인을 했다는 조건같은걸 아직 작성하지 않은것 같아서요 정리하자면 현재 localhost:3000의 기본 페이지가afterlogin 폴더의 layout이 아니라 beforeloign의 layout이 뜨는 이유가 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
강의 1.3 백엔드 서버 세팅하기에서 빌드시 에러
12:22 npm run build 시에 에러가 validator 모듈이 없다고 나오네요validate-decoration.ts 파일에서 import * as validator from 'validator';packae.json에 업데이트가 안되어 있는 것 같아요.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
article / section 태그에 관해
article 과 section tag 를 자주 사용하시는데, 혹시 어떤 기준으로 사용하시나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
혹시 MUI에 대한것도 배우나요?
이 강의에서 MUI에 대한 것도 배우는지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션25
이건 무슨 오류 일까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
2.20 강의 Vercle 에 벡엔드 배포 후 미출력
안녕하세요.강좌 잘 보고 있습니다. 다름이 아니라 vercel 에 onebite-books-server 를 배포하였습니다. 로컬에서는 작동을 확인하였습니다. 첫 화면은 잘 나오는데 /api 폴더로 접근시 화면에 swagger 가출력이 안되고 있네요. ㅠㅠ; vercel 로그는 정상 배포 되었구요.첫화면은 잘 나옵니다. 혹시 환경변수를 셋팅해야 하는가 해서 검토해 보았지만 필요없으시다고 하셔서 그냥 두었습니다. 에러 메시지는콘솔창에Failed to load resource: the server responded with a status of 404 ()이런 메시지가 여러개 출력 중입니다. 확인좀 부탁드립니다. 감사합니다.
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
카테고리 변경 시 이미지 로딩
카테고리 관련 강의를 수강 중입니다. 카테고리 변경 시 백그라운드 변경되는 부분이 있는데요해당 부분이 이미지 로딩(변경?)이 매우 늦게 되더라구요해당 부분 개선해보려면 어떤 것을 시도해보면 좋을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
무한스크롤(React Infinite Scroller)의 pageStart
16-02-infinite-scroller 강의 중에 이해가 가지 않는 코드가 한줄 있어서 질문드립니다! InfiniteScroll에 pageStart 옵션이 걸려있는데, 이게 어디에 영향을 주는건가요? 초기 페이지 번호라기에는 이 옵션을 999999 처럼 의미 없는 값을 줘도 문제 없이 작동하고 그러네요..딱히 의미가 없는 코드 같은데 pageStart라는게 어떤식으로 작동되는건지가 좀 궁금합니다..
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
상세 페이지 api관련 궁금증
책의 정보 상세 페이지에 접근하게 되면 책의 상제 정보 요청과, 책의 리뷰에 대한 api 요청이 이렇게 두가지를 하는데요혹시 현업에서도 이런 상세 페이지(상품 정보, 댓글이나 상품평이 필요한 페이지)에서 api요청을 여러번 하게 백엔드 api를 설계 하는 것인가요?? 아니면 두번 요청이 필요한 페이지에 대한 예를 만들기 위해 분리를 해 놓은 것인가요???
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
예전에는 컴포넌트 만들떄 파스칼로 많이 했는데
page.tsx나 index.tsx는 그렇다치는데,searchbar 는 파스칼로 요즘에 안하나요 ?
-
미해결기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
next zustand 사용 시 문의
next zustand 세팅 시, provider 를 사용해야한다는 글이 있어서요.현재 강의처럼 이후에 서비스 개발 시 사용해도 이슈가 없는 부분일까요?https://zustand.docs.pmnd.rs/guides/nextjs#providing-the-storehttps://leonkong.cc/nextjs-zustand-
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
getStaticPaths
getStaticPaths함수는 async키워드를 안붙이는 함수인가요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다
공식문서 내용입니다. 더이상 pending관련 값은 return해주지 않네요 공유차 전달드려요
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
채팅 관련 부분, useInfiniteQuery
안녕하세요, 채팅 관련 부분에, reverseInfiniteQuery를 적용할 수 있을 것 같아, 도전해보던 찰나에 잘 안되어서 질문드립니다!!혹시 역무한스크롤 방식으로 할 수 있는 방법이 있을까요??보통 실무에서 채팅을 어떠한 방식으로 구현하는지 매우 궁금합니다.1. 역무한 스크롤 방식2. 계속해서 refetch를 하는 방식
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의에 대해 질문있습니다.
안녕하세요 강의를 열심히 보면서 하고 있습니다 궁금한 점이 커리큘럼이 html, css, js를 하고 리액트 강의도 있는 건가요? 아니면 리액트 없이 바로 Next.js 강의인가요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
섹션2 사전 렌더링에 대해 궁금한 것이 있습니다.
Next.js의 사전 렌더링에 대해서 설명을 하실때, 유저가 브라우저를 통해 서버에 초기 접속 요청을 할때, 자바스크립트 코드를 실행하여 html을 렌더링한다고 하셨는데 이 html은 해당 서비스의 특정 경로에 대해서만 html을 렌더링하는 것인가요?아니면 그 서비스에 있는 모든 페이지의 html을 렌더링하는 것인가요?