묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
domains는 deprecated 되었습니다.
next configuration에서images.domains는 deprecated 되었음으로 remotePatterns를 사용하시길 권장드립니다. images : { remotePatterns: [ { protocol: 'https', hostname: 'shopping-phinf.pstatic.net', pathname: '**', } ] }https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Page Route와 App Route의 빌드 질문
안녕하세요. 강사님 좋은 강의 감사드립니다. 빌드 기호에 관해 질문있습니다.영상 19:05초에App Router의 Static은 Page Router의 SSG와 같다고 하셨는데요.Page Router의 기호 App Router의 기호보시는 바와 같이 Page Router의 Static과 App Router의 Static 문구가 같습니다. (prerendered as static content) 궁금한것은 1App Router의 Static이 Page Router의 SSG와 같다면왜 App Router Static 설명이 Page Router SSG인 (prerendered as static HTML) 설명이 아닌 Page Router의 Static과 동일한걸까요? (prerendered as static content)즉 App Router의 (Static): prerendered as static HTML이어야 맞는 거 아닌가요? (Static) prerendered as static content왜 인 걸까요? 헷갈리네요 ㅜㅜ2.기존 Page Route의 Static은 어떤 식으로 동작한 건가요? 그냥 정적인 페이지인건가요?감사합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의자료가 안뜹니다
강의 자료가 있는 항목을 누르면이렇게 아무것도 뜨지 않습니다 ㅜ
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
혹시 단톡방 입장은 이제 안되나요?
제가 예전에 단톡방 관련 공지를 본거같은데강의 3개를 다 들어서 어떤강의에있는 공지였는지 못찾겠네요..입장 방법이나 조건이 따로있을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 리뷰 강의에 대한 질문
섹션23인 검색 기능 구현 파트 이후로는 포트폴리오 강의가 제공되지 않고 있는데, 이 후의 중고마켓 웹사이트에 대한 포트폴리오 리뷰 강의는 제공되지 않고, 스스로 하되, 포트폴리오 리뷰 자료를 참고하면 되는 건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
vanilla extract는 UI 기능들이 없는거같은데
예를들어 부트스트랩처럼 모달이나 반응형 디자인 같은거를 편리하게 해주는 기능들이요 그냥 다 직접 만들어야 하나요?같이 쓸수있는게 있나요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
JSON Viewer 확장 프로그램
강의에 나오는 JSON 데이터를 한 눈에 보기 힘드신 분들은 아래 확장 프로그램을 통해 JSON 데이터를 시각적으로 구조화해서 좀 더 보기 좋게 확인하실 수 있습니다. JSON Viewerhttps://chromewebstore.google.com/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
백엔드도 '완벽한' 시리즈 코스가 나오나요?
백엔드도 나온다면 완벽한 시리즈로 듣고 싶어서요
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
안녕하세요! 서비스 배포를 하는데 에러가 생겨서 문의드립니다!
안녕하세요! 강의를 쭉 듣고, 배포 단계까지 왔는데 에러가 생겨서 진행이 안되어 문의드립니다!vercel에서 에러는Failed to compile.src/app/[location]/page.tsxType error: Type 'Props' does not satisfy the constraint 'PageProps'.Types of property 'params' are incompatible.Type '{ location: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]Error: Command "npm run build" exited with 1이며, 그전에도Route "/[location]" used params.location. params should be awaited before using its properties. Learn more: 위와 같은 에러가 떴고, 이는 경로 및 쿼리 파라미터를 위한 객체에서 런타임 에러가 뜨는걸로 확인했습니다! 강의를 똑같이 따라갔는데, 위와 같은 에러가 나는게 의아하여 한번 문의드립니다!import HomeButton from "../components/HomeButton"; import { getForecast } from "../utils/getForecast"; type Props = { params: { location: string; }; searchParams: { name: string; }; }; export function generateMetadata({ searchParams }: Props) { return { title: `날씨 앱 - ${searchParams.name}`, description: `${searchParams.name} 날씨를 알려드립니다`, }; } export default async function Detail({ params, searchParams }: Props) { const name = searchParams.name; const res = await getForecast(params.location); return ( <> <h1>{name}의 3일 예보</h1> <ul> {res.forecast.forecastday.map((day) => ( <li key={day.date}> {day.date} / {day.day.avgtemp_c} </li> ))} </ul> <HomeButton /> </> ); } 크리스마스 쉬는날 연락드려, 죄송하며 빠른 답변 부탁드립니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기존강의 수강질문
새 강의도 쿠폰 받아서 잘 구매 하였습니다.궁금한 것은 기존 강의를 다 듣고 새 강의를 수강해야 하는 것인지 기존 강의의 진도와 새 강의의 진도가 어느 부분인지 어떻게 바뀐 것 인지에 대해 이해가 안 가서 어떻게 해야하는지 알려주는 공지 또는 간단 영상이 필요할 것 같습니다.기존 강의의 커리큘럼과 비슷하나 좀 바뀐 부분이 있을 것 같아서요.기존 강의를 다 수강 후 복습 + 새로운 기술을 익힐 겸 새 강의를 수강하는 것이 맞는지,아니면 기존 강의는 수강을 멈추고 새로운 강의를 다시 수강하면 되는 것인지 알려주시면 감사하겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
질문드립니다
안녕하세요,수업 잘 듣고 따라가고 있습니다~~!! 다름이 아니라 , 아무래도 graphQL를 이용한것보다 취직하고싶은 회사에서 대부분REST API를 사용하는거같아 혹시 fetch 또는 axios를 사용하는 방법은 강의에 추가할 계획이 없으실까요?그리고 nextjs에서는 axios를 사용하는 대신에 fetch를 사용하는것이 맞을까요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
next 에러처리 관련 질문
안녕하세요.프로젝트에서 error.tsx를 띄우는 예시로, 백엔드 서버를 종료하여 데이터를 받아오지 못하게 함으로써 error.tsx가 표시되는 경우를 다루셨습니다. 이때, "백엔드 서버를 종료해서 데이터를 받아오지 못하게 함"을 "페이지가 렌더링되지 못하게 함"으로 이해해도 괜찮은지 궁금합니다.이 질문을 드리게 된 이유는, 프로젝트에서 에러를 처리할 때 error.tsx나 에러 페이지를 띄우는 것 외에도 다양한 방식으로 에러를 처리할 수 있기 때문입니다. 예를 들어, 에러 모달을 띄운다거나, 다른 페이지로 이동시키는 등의 방법도 있습니다. 그래서 error.tsx가 어떤 종류의 에러에 대한 대비책인지 명확히 이해하고 싶습니다.저는 error.tsx가 예상치 못한 500번대 서버 에러와 같은 페이지나 컴포넌트 렌더링 실패를 처리하는 페이지라고 이해하고 있는데, 제 이해가 맞는지 궁금합니다.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
기존강의 새 강의
새 강의 구매 할인 어떻게 진행하면 되는건가여ㅛ?방법을 몰라서 문의드립니다.,
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
(0 , _util_delay__WEBPACK_IMPORTED_MODULE_3__.delay) is not a function Error 에 대해 질문있습니다.
7-1 서버 액션 강의를 수강하는 중page.tsx:75 Server Error: Route "/book/[id]" used params.id. params should be awaited before using its properties.라는 문구와 함께 book > [id] 폴더의 page.tsx에서 404 오류가 발생하여 화면이 보여지지 않아 해결을 위해 다양한 시도를 해보던 중 해당 강의의 예제 코드(section7 - chapter1)를 가져와 사용했더니 (with-searchbar) > error.tsx에서(0 , util_delay__WEBPACK_IMPORTED_MODULE_3__.delay) is not a function Error위 와 같은 오류가 뜹니다. 어떻게 해결해야할까요?
-
미해결Next + React Query로 SNS 서비스 만들기
next-auth 사용이유
안녕하세요 섹션4의 next-auth 를 수강하고있습니다. next-auth를 사용하는 이유가 무엇인가요?보통 백엔드에서 로그인 기능을 구현하는 것이 일반적이라고 알고 있습니다.next-auth는 백엔드가 로그인 기능을 구현하지 않았을 때 사용하는 것인가요? 아니면 이미 백엔드에서 구현한 로그인 API를 사용하기 위해서도 next-auth를 사용하는 경우가 있나요?
-
미해결Next + React Query로 SNS 서비스 만들기
Next15의 서버사이드 렌더링과 서버 컴포넌트
안녕하세요! Next 강좌를 보던 중 헷갈리는게 있어 질문을 올리게 되었습니다!다름이아니라, 현재 next15에서 getServerSideProps 등이 사라진걸로 알고있는데 그럼 서버사이드 렌더링을 서버 컴포넌트로 대체하는건지 여쭤보려고 합니다!서버사이드 렌더링과 서버 컴포넌트는 다른 개념이라고 알고있는데 결국 서버사이드 렌더링을 서버 컴포넌트를 이용해서 구현하는 것인지,, 그게 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요
안녕하세요,혹시 최초 프로젝트 생성할때, nextjs15버전으로 설정되었는데 괜찮을까요?14로 다운그레이드 해야할까요?
-
미해결Next + React Query로 SNS 서비스 만들기
회원가입시 왜 리다이렉트 안되죠?
회원가입후 회원가입완료되면 자동으로 메인페이지 이동해야 하는데, 라이디렉트가 안되고 있습니다.db는 확인해보니 제대로 전송되고 있고요.데이터 또한 정상적으로 200 떠서 넘김 처리한거 같은데 뭐가 말썽인지 모르겠습니다.기존꺼 듣다가 15로 업데이트 해서 패키지로 기존에 싹다 날리고, npm i로 다시 설치 했습니다. 그래도 안되서 문의드려요.1. env, 2.handler, 3.browser, 4.https, 5.auth 6.기타 컴포넌트 그대로 복사해서 붙여놨는데도 문제가있네요.그리고 추가로 가입하기 버튼후 새로고침 안하면 계속 대기중으로 표시되는것 같습니다.회원가입 시 프론트서버 회원가입 시 백엔드 서버(npm run start:dev) 회원가입시 브라우저콘솔( 이부분은 확인해보니 매우느리게 status가 200으로 처리가 되었네요) 확인사항: 방금 https://github.com/ZeroCho/next-app-router-15 으로 그대로 zip파일열어서 그대로 실행시켜 봤는데 제 코드랑 같은 현상이 일어나는걸로 봐서는 백엔드 혹은 백엔드와 상호작용에서 뭔가 문제가 있는것 같은데 혹시 문제해결을 알수있을까요? *추가로 새로보시는 분들은 상관없는데,기존에 보시다가 변경되신 분들은 지금 강의 너무 혼란스럽습니다. 진행자 입장에서는 크게 변한게 없다고 하겠지만, 시청하는 입장에서는 패키지 버전부터, 기타 등등 이 바꼈고, 이해안가는 부분만 해당 강의를 시청할려고 다시 듣는데 기존꺼랑 새로운거랑 그냥 아예 섞여버려서 강의가 가독성이 지금 너무 떨어지고있습니다. 인트로부분에 15버전수정은 15버전이라고 기재한다고 했는데, 그것도 일부분만 하고 나머지도 슬쩍 변경이 됬는데, 아예 기존것처럼 해놔서 더 혼동이 오네요. 차라리 업데이트를 한번에 하시지 왜 진행도중에 하시는지 ..조금 불편합니다.. 나중에 참고해주시면 감사하겠습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
antd 적용
antd 편해서 적용하려는데 문제없나요?styled component 문제있다하셔서 css module로 커스텀하려는데 인라인 스타일로 커스텀하면되나요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() 에러?
한입 잘라먹는 NEXT.JS 강좌 풀라우트 캐시 2 4분 30초 쯤에Suspense 를 사용하여 next run build 를 하는 과정이 있습니다그런데 Type error: Type '{ searchParams: { q?: string | undefined; }; }' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 32 | 33 | // Check the prop type of the entry function> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) {계속 이런 에러가 발생해서 구글링 해서 찾아보면 components 및 해당 app 폴더 안에 중첩되는 page.tsx 나 layout.tsx 가 존재하면 이러한 에러가 발생할수도 있다고 하여 각 폴더 마다 파일명을 변경하고 계속 빌드를 시도했지만 에러문구는 해결이 되지않고 있네요...위의 사진은 제가 현재 문제가 발생하고 있는 프로젝트의 전체 폴더 및 파일 구조입니다.어디가 문제일까요...ㅠ 답변 부탁드리겠습니다.