// auth.ts import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ credentials: { username: { label: "Username", type: "text", placeholder: "jsmith" }, password: { label: "Password", type: "password" }, }, 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(); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); // route.ts export { GET, POST } from "@/auth"; 각종 커뮤니티 글을 보긴했지만,, 해당 에러는 보이지 않아서 문의 남깁니다.  서버쪽 에러는 [auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror[auth][cause]: TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.authorize (webpack-internal:///(rsc)/./src/auth.ts:31:38) at async Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:241:39) at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:66:24) at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:127:34) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55759 at async eO.execute (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:46527) at async eO.handle (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:57093) at async doRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1345:42) at async cacheEntry.responseCache.get.routeKind (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1555:40) at async DevServer.renderToResponseWithComponentsImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1475:28) at async DevServer.renderPageComponent (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1901:24) at async DevServer.renderToResponseImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:1939:32) at async DevServer.pipeImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:914:25) at async NextNodeServer.handleCatchallRenderRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/next-server.js:272:17) at async DevServer.handleRequestImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/base-server.js:810:17) at async /Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:339:20 at async Span.traceAsyncFn (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/trace/trace.js:154:20) at async DevServer.handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/dev/next-dev-server.js:336:24) at async invokeRender (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:173:21) at async handleRequest (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:350:24) at async requestHandlerImpl (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/router-server.js:374:13) at async Server.requestListener (/Users/kimyoungwoong/Desktop/next-x/node_modules/next/dist/server/lib/start-server.js:141:13)[auth][details]: { "code": "ECONNREFUSED", "provider": "credentials"}이렇게 발생하고 있습니다. 신 버전인 만큼 .env AUTH_SECRET=woong작성 해놨고 .env local 같은 경우는 NEXT_PUBLIC_API_MOCKING=enabledNEXT_PUBLIC_BASE_URL=http://localhost:9090작성해놨습니다. 잘 해결이 안되서 글 남깁니다. 

안녕하세요 강사님혹시 안드로이드 Location Custom 할 수 있는 방법 여쭤볼 수 있을까요!!?아래 글을 확인해서 말씀대로 설정창을 들어가봤는데 Location이 비어있습니다..ㅠㅠ https://www.inflearn.com/community/questions/1239274/%ED%98%84%EC%9E%AC%EC%9C%84%EC%B9%98-%EB%AC%B8%EC%A0%9C 

안녕하세요 강사님깃헙에서는 Pressable로 되어있고 강의에서는 View로 되어있는데 어떤걸로 진행해야될까요?! 

계속 까먹네요 ㅠ^ㅠ 참고~!!cd android ./gradlew build 

안녕하세요 선생님카카오톡 로그인 부분에 에러가 있어서 질문 드립니다!! import axios from 'axios'; import {SafeAreaView, StyleSheet, View} from 'react-native'; import Config from 'react-native-config'; import WebView, {WebViewMessageEvent} from 'react-native-webview'; // kakao api 에서 적었던 uri 를 적어준다. const REDIRECT_URI = 'http://localhost:3030/auth/oauth/kakao'; function KakaoLoginScreen() { const handleOnMessage = (event: WebViewMessageEvent) => { console.log('event.nativeEvent.url :', event.nativeEvent.url); if (event.nativeEvent.url.includes(`${REDIRECT_URI}?code=`)) { const code = event.nativeEvent.url.replace(`${REDIRECT_URI}?code=`, ''); console.log('code :', code); requestToken(code); } }; const requestToken = async (code: string) => { const response = await axios({ method: 'post', url: 'https://kauth.kakao.com/oauth/token', params: { grant_type: 'authorization_code', client_id: Config.KAKAO_REST_API_KEY, redirect_uri: REDIRECT_URI, code, }, }); console.log('response.data :', response.data); }; return ( <SafeAreaView style={styles.container}> <WebView source={{ uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${Config.KAKAO_REST_API_KEY}&redirect_uri=${REDIRECT_URI}`, }} onMessage={handleOnMessage} injectedJavaScript={"window.ReactNativeWebView.postMessage('')"} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); export default KakaoLoginScreen; 카카오 redirect URI 에서도http://localhost:3030/auth/oauth/kakao입력을 했는데console.log('event.nativeEvent.url :', event.nativeEvent.url);이부분의 로그가 왜 저는https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=해당코드&redirect_uri=http://localhost:3030/auth/oauth/kakao 이렇게 나올까용?그래서 if 문을 타지 ㅇ낳아 requertToken 으로 넘어가지 못하고 있습니다.

안녕하세요CSR 경험만 있다보니, 프론트 서버에 로그인한다는 개념이 뭔가 와닿지가 않아서요백엔드 서버에 쿠키로 인증이 되는데, 왜 프론트 서버에 로그인하는게 필요할까요?클라이언트 사이드만 있을 때랑 뭔가 다른 느낌이네요..ㅠ

login버튼을 클릭했을 때 처음에 login페이지에 갔다가 replace로 인해서 i/flow/login으로 갈 때 인터셉팅 라우팅이 적용되어 페러렐 라우트를 사용한 (.)i/flow/login으로 이동하게 되는것 까지 이해하고 적용을 시켰고 이동은 잘 하지만 아래와 같은 에러가 발생합니다.아래는 저의 LoginModal.tsx 코드입니다."use client"; import { useState } from "react"; import style from "@/app/(beforeLogin)/_component/login.module.css"; import { useRouter } from "next/navigation"; export default function LoginModal() { const [id, setId] = useState(); const [password, setPassword] = useState(); const [message, setMessage] = useState(); const router = useRouter(); const onSubmit = () => {}; const onClickClose = () => { router.back(); }; const onChangeId = () => {}; const onChangePassword = () => {}; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03" > <g> <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={onSubmit}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="id"> 아이디 </label> <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" /> </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor="password"> 비밀번호 </label> <input id="password" className={style.input} value={password} onChange={onChangePassword} type="password" placeholder="" /> </div> </div> <div className={style.message}>{message}</div> <div className={style.modalFooter}> <button className={style.actionButton} disabled={!id && !password}> 로그인하기 </button> </div> </form> </div> </div> ); } 저의 폴더 구조는 아래와 같습니다. 

5-3 강의에서 HeaderButton 컴포넌트를 만드신 후에, AddPostHeaderRight 컴포넌트에서 HeaderButton 을 호출하셨는데, 혹시 특별한 이유가 있을까요?  AddPostScreen 에서 headerRight에 HeaderButton 을 그대로 사용하지 않고, AddPostHeaderRight 를 만드신 점이 궁금합니다. 어떤 것을 구현하는데에는 다양한 방법이 있지만, 강사님이 그렇게 하신 데에 특별한 이유가 있는지, 배울점이 있을 수도 있을것 같아서 질문 드립니다!  강의 2회독 중인데, 저는 useEffect(() => { navigation.setOptions({ headerRight: () => <HeaderButton labelText={'등록'} />, }); }, []);이렇게 하실 줄 알았는데, 한번 더 함수로 랩핑 하셔서 호기심이 생겼습니다.

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, ReactNative 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 잘라서 올리지 말아주세요.)윈도우라 1-2,1-3은 패스하고 1-4까지 진행했고 1-5를 진행하려고 하는데 강의 환경이 맥이라 햇갈립니다. 윈도우에서는 어떻게 하면 될까요..?

 1. '[4-5] GoogleMap 커스텀 스타일 적용하기' 강의까지 문제 없이 진행 후 '[5-0] 마커 표시하기' 강의로 넘어와서 <Marker />컴포넌트를 넣었을 때 발생한 문제입니다.  2. 강의를 따라서 MapHomeScreen.tsx 파일 내 Marker 관련 코드를 동일하게 적용.VScode에서 Error가 발생하지 않아 시뮬레이터를 실행시켰습니다.  3. 시뮬레이터 실행 시 해당 에러 발생.(ios, android 모두 동일한 에러가 지속적으로 나타났습니다.)* <Marker />를 주석처리하면 에러가 나타나지않고, 지도가 잘 나타납니다.react-native 버전과 react-native-maps 버전 문제 확인, npm uninstall react-native-mapsnpm install react-native-maps --save-exact npx pod-install ios등등 여러가지 시도해도 보았습니다.= 에러가 해결되지 않았습니다.   4. 강사님께서 제공해주시는 깃허브 코드 확인.https://github.com/InKyoJeong/Matzip/blob/lecture/5-0/front/src/screens/map/MapHomeScreen.tsx 제공된 코드 전체를 저의 MapHomeScreen.tsx 파일에 붙여넣기 후 VScode 내 Error없음을 확인. npm start --reset-cache로 다시 시뮬레이터 실행. = 해결안됨여전히 시뮬레이터에서 TypeError: this.getNativeComponent is not a function (it is undefined) 에러 발생..   5. StackOverFlow검색 및 Google검색 결과..StackOverFlow에서는 해결사례를 찾을 수 없었습니다.Google 검색을 통해서도 명확한 해결사례를 찾을 수 없는 상황에서 아래와 같은 사이트에서 제시한 방법을 통해 에러가 더 이상 뜨지 않는 것을 확인하였습니다. 출처 : https://github.com/react-native-maps/react-native-maps/issues/4861 주석처리. 마커가 잘 뜨는 것을 확인.  6. Error가 해결된 것이 맞지만, 잘 못된 방법인 것 같아 질문드립니다. 

login 시 let setCookie = response.headers.get('Set-Cookie'); 가져오려고 할 때 response.headers에는 뜨는데 samesite 때문에 cookie를 가져올 수 없습니다.  개발자도구에서 samesite 에러 어떻게 해결할 수 있을까요??아래와 같이 수정했는데 같은 오류가 발생합니다. if (setCookie) { const parsed = cookies.parse(setCookie); cookies().set('connect.sid', parsed['connect.sid'], { sameSite: 'None', secure: true }); } 

안녕하세요 선생님 선생님의 cli 셋팅을 잘 따라라고마지막으로 프로젝트 생성을 위해 npx react-native@0.72.6 init AwesomeProject --version 0.72.6를 하였는데 설치도중 error bundler: failed to load command: pod 에러가나왔는데 구글링을해봐도 해결이되지 않아서요어떤문제가 있는걸까요?

안녕하세요 강사님제가 이미지 업로드 강의를 따라 구현하고 있는데요사진 추가 버튼을 클릭해도 아무런 액션이 일어나지 않는데혹시 그게 제 pc 가 노트북이 아니라 pc 라서 그런걸까요? 어디까지 접근하는지 보려고log 를 남겼는데 console.log('useImagePicker');로그가 찍히는데console.log('handleChange');해당 부분은 로그가 찍히지 않습니다.AddPostScreen.tsx 에서<ImageInput onChange={iamgePicker.handleChange} />이렇게 onChange 로 호출하는데 혹시 잘못된 부분이 있거나더 살펴봐야될 곳이 있을까요?function useImagePicker({initialImages = []}: ImagePickerProps) { console.log('useImagePicker'); const [imageUris, setImageUris] = useState(initialImages); const uploadImages = useMutateImages(); const addImageUris = (uris: string[]) => { setImageUris(prev => [...prev, ...uris.map(uri => ({uri}))]); }; const handleChange = () => { console.log('handleChange'); ImagePicker.openPicker({ mediaType: 'photo', multiple: true, includeBase64: true, maxFiles: 5, cropperChooseText: '완료', cropperCancelText: '취소', }) .then(images => { const formData = getFormDataImages(images); uploadImages.mutate(formData, { onSuccess: data => addImageUris(data), }); }) .catch(error => { if (error.code !== 'E_PICKER_CANCELLED') { //에러처리 } }); }; return {imageUris, handleChange}; } export default useImagePicker;

2-5강의 4분정도쯤에 createDrawerNavigator함수를 사용하면 강의에서는 타입을 잘 잡아주지만 저는 반환타입이 any로 잡힙니다. IDE를 껏다켜봐도 변함이없네요.. 뭐가 문제인걸까요?createDrawerNavigator함수: Drawer변수 타입:

환경변수만 설정이 필요해서 저부분 강의로 보고 따라했는데 android 환경변수를 잘 받아와요.그런데 강의에서도 ios는 따로 설정한 부분이 없어서 똑같이 재빌드만 했는데 undefined 나와요. 다른 곳에서 검색해보면 ios는 xcode 들어가서 추가 설정이 있는데 제가 무엇을 더 해야할까요?ex) https://velog.io/@chloedev/RN [RN] react-native-config 환경변수 사용하기 아니라면 제가 [5-7] 강의 부분 말고 다른 부분도 추가적으로 봐야 ios 환경변수를 적용할 수 있을까요?.evn 설정  android 터미널 ios 터미널

안녕하세요 제로초님. 강의 잘 보고 있습니다. <img src={photo.link} alt={photo.Post?.content} /><div className={style.image} style={{backgroundImage: `url(${photo.link})`}} />여기서 css를 보니 img에 display none을 주고 div에 style의 bg로 이미지를 주셨던데 왜 이렇게 하신건지 특별한 이유가 있나요? 궁금합니다.

병렬 라우팅에 문제가 있는 거 같아 문의 드립니다.강의 그대로 패러렐 라우트, 인터셉터 라우트까지 모두 따라했었는데,"Application error: a client-side exception has occurred (see the browser console for more information)."브라우저에 이런 에러가 뜨면서, 콘솔창에는 아래와 같이 에러가 뜨더라구요.app-index.js:33 Warning: Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside Router, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)window.console.error @ app-index.js:33Show 1 more frameShow lessUnderstand this errorreact-dom.development.js:9126 Uncaught TypeError: initialTree is not iterable at applyPatch (apply-router-state-patch-to-tree.js:17:53) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:74:30) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30) at eval (navigate-reducer.js:142:88)Understand this errorapp-index.js:33 The above error occurred in the <Router> component: at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler. 그래서 어디서 난 에러인지 추리려고 인터셉터 라우트 부분은 아예 빼버리고,패러랠 라우트 부분으로 확인해보는데, 패러랠 라우트 부분부터 아예 에러가 나서 이것이 문제인 거 같더라구요. { "name": "z-com", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "classnames": "^2.5.1", "dayjs": "^1.11.13", "next": "14.2.11", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.20", "eslint": "^8", "eslint-config-next": "14.2.11", "postcss": "^8.4.47", "tailwindcss": "^3.4.12", "typescript": "^5" } }  package.json과 디렉토리 구조는 이런 상태이구요.@modal/compose/tweet/page.tsx@modal/compose/tweet/modal.module.css@modal/default.tsx이 세 파일은 깃헙 ch2-2 에 나온대로 그대로 적었습니다. import {ReactNode} from "react"; import style from '@/app/(afterLogin)/layout.module.css'; import Link from "next/link"; import Image from "next/image"; import ZLogo from '../../../public/zlogo.png'; import NavMenu from "@/app/(afterLogin)/_component/NavMenu"; import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; // import RightSearchZone from "@/app/(afterLogin)/_component/RightSearchZone"; type Props = { children: ReactNode, modal: ReactNode } export default function AfterLoginLayout({ children, modal }: Props) { return ( <div className={style.container}> <header className={style.leftSectionWrapper}> <section className={style.leftSection}> <div className={style.leftSectionFixed}> <Link className={style.logo} href="/home"> <div className={style.logoPill}> <Image src={ZLogo} alt="z.com로고" width={40} height={40} /> </div> </Link> <nav> <ul> <NavMenu /> </ul> <Link href="/compose/tweet" className={style.postButton}> <span>게시하기dd</span> {/* <svg viewBox="0 0 24 24" aria-hidden="true" className="r-jwli3a r-4qtqp9 r-yyyyoo r-1472mwg r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp"><g><path d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"></path></g></svg> */} </Link> </nav> <LogoutButton /> </div> </section> </header> <div className={style.rightSectionWrapper}> <div className={style.rightSectionInner}> <main className={style.main}>{children}</main> <section className={style.rightSection}> {/* <RightSearchZone /> */} <TrendSection /> <div className={style.followRecommend}> <h3>팔로우 추천</h3> <FollowRecommend /> <FollowRecommend /> <FollowRecommend /> </div> </section> </div> </div> {modal} </div> ) }layout.tsx도 위에 코드와 같이 거의 그대로 적었구요. 참고로 layout.tsx에서 console.log(modal) 했을 때, undefined 뜹니다.근데 또 explore로 이동한 뒤 게시하기 버튼을 누르면 modal이 뜹니다.이것 저것 다해보다가 도저히 안풀려서 문의드립니다.제가 어디서 놓친 걸까요...  

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 파일 코드입니다. 이런식으로 에러가 나서 에러 창을 확인해보면 전달된 매개변수의 타입이 적절치 않다고 하는데, 강의 그대로 따라가면서 깃허브 참고하면서 코드를 작성했음에도 불구하고 오류가 나옵니다..

$ 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 안에 있는 오류인데 지웠다 다시 해도 똑같아요어떻게 해야 할까요??

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