만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)대시보드

질문1)bgColor에 값을 입력하면 바로 그 색상이 무엇인지 표시 되는데 어떻게 해야 하나요? 질문2)leftIcon에 img src 항목에 영상과 다르게,</img>로 닫아야 하던데 문법이 바뀐 건가요?react v18(v17에서는 typescript error로 실행을 못했습니다) 기준으로 설치되어 있습니다. *제 수준은 자바스크립트 기본 문법정도 이해하고 있고, 현재 그냥 따라해 보는 수준입니다.  

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 먼저 빠르게 답변해주셔서 정말 감사합니다!답변해주신 부분 참고해서 코드를 수정하던 도중 궁금한 점이 생겨 다시 질문 드립니다아래 답변을 참고해서 코드를 변경해봤는데 맞는건지 확인가능할까요?-firebase_admin.tsif (!admin.apps.length) { const config: Config = { credentials: { projectId: process.env.projectId || '', clientEmail: process.env.clientEmail || '', privateKey: process.env.privateKey?.replace(/\\n/g, '\n') || '', }, }; admin.initializeApp({ credential: admin.credential.cert(config.credentials), }); console.info('bootstrap firebase admin'); } else { admin.app(); }else문에 admin.app()을 통해 이미 애플리케이션이 실행되었다면 초기화하지않고 실행한다는 코드인데 이게 맞을까요?? 파이어베이스에 대해 정확히 알지 못해서...ㅠㅠ 번거롭게 해드려 죄송합니다.  -if문안에서 로그 안뜨는 문제는 해결했습니다! console.info('bootstrap firebase admin'); 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 설명해주신 싱글톤? 방식말고 평소에 사용하는 방식으로 바꿔봤는데 맞는지 검사가능할까요??hello.ts import { NextApiRequest, NextApiResponse } from 'next'; const admin = require('../../model/firebase_admin'); export default function handler(_: NextApiRequest, res: NextApiResponse) { const db = admin.firestore(); db.collection('test'); res.status(200).json({ name: 'John Doe' }); }modle/firebase_admin.tsconst admin = require('firebase-admin'); interface Config { credentials: { privateKey: string; clientEmail: string; projectId: string; }; } if (!admin.apps.length) { const config: Config = { credentials: { projectId: process.env.projectId || '', clientEmail: process.env.clientEmail || '', privateKey: process.env.privateKey?.replace(/\\n/g, '\n') || '', }, }; admin.initializeApp({ credential: admin.credential.cert(config.credentials), }); console.info('bootstrap firebase admin'); } module.exports = admin;현재 firestore만 hello.ts에서 test 보내는 방식만 따라해봤습니다!  질문 1. 이 방식으로 사용해도 될까요??이 방식으로 문제될게 있을까요?질문 2. 아래 코드가 출력이 안되는데 이유가 있을까요?console.info('bootstrap firebase admin');위 전체코드에서처럼 if문안에 작성하게되면 콘솔이 영상처럼 터미널에 안뜨는데 왜그런걸까요?if문 밖에 선언하면 잘 출력됩니다.   

선생님! 안녕하세요배포 전 작동 잘 되는 지 확인 후,배포 후 로그인 까지는 잘 되는데, / 하고 사용자 홈페이지에 들어갔을 때 '사용자를 찾을 수 없습니다'오류가 생깁니다.getServerSideProps 코드입니다.export const getServerSideProps: GetServerSideProps<Props> = async ({ query }) => { const { screenName } = query; if (screenName === undefined) { return { props: { userInfo: null, screenName: '', }, }; } const screenNameToStr = Array.isArray(screenName) ? screenName[0] : screenName; try { const protocol = process.env.PROTOCOL || 'http'; const host = process.env.HOST || 'localhost'; const port = process.env.PORT || '3000'; const baseUrl = `${protocol}://${host}:${port}`; const userInfoResp: AxiosResponse<InAuthUser> = await axios(`${baseUrl}/api/user.info/${screenName}`); return { props: { userInfo: userInfoResp.data ?? null, screenName: screenNameToStr, }, }; } catch (err) { console.error(err); return { props: { userInfo: null, screenName: '', }, }; } };https://blah-blah-one.vercel.app/ 배포했습니다.vercel 설정은 아래와 같이 설정했습니다.firebase도메인 등록도 했습니다.다만 배포 후 도메인 주소는 위와 같이 변경되었습니다firebase콘솔도 잘 찍힙니다.어디가 문제 인지 확인해봐야할까요?(제 최종 깃허브 주소입니다. https://github.com/cccodus313/Blah-Blah) 

안녕하세요 강사님!이 쪽 부분이 에러가 뜨는데 어디를 확인해 봐야할까요? 아 그리고, 제 페이지에서도 강사님처럼 밑에 메세지 창들이 쭉 떠야하나요? 

userInfo가 받아와지지 않아서 계속 "사용자를 찾을 수 없습니다'페이지가 뜹니다.현재 아래와 같이 계속 뜹니다,강의를 다시보기 해보아도 문제가 발생합니다.어디를 확인해봐야할까요...?

안녕하세요, 강의를 따라하던 중 사용자를 찾을 수 없다는 페이지가 떠서 어디서 오류가 났는지 확인을 못하겠어서 질문드립니다. 혹시몰라 이 강의 까지 커밋한 깃허브 주소 올려봅니다,,https://github.com/cccodus313/Blah-Blah/tree/startimport { ServiceLayout } from '@/components/service_layout'; import { useAuth } from '@/contexts/auth_user.context'; import { InAuthUser } from '@/models/in_auth_user'; import { Avatar, Box, Button, Flex, FormControl, FormLabel, Switch, Text, Textarea, useToast, VStack, } from '@chakra-ui/react'; import { GetServerSideProps, NextPage } from 'next'; import { useState, useEffect } from 'react'; import ResizeTextarea from 'react-textarea-autosize'; import axios, { AxiosResponse } from 'axios'; import MessageItem from '@/components/message_item'; import { InMessage } from '@/models/message/in_message'; interface Props { userInfo: InAuthUser | null; } async function postMessage({ message, uid, author, }: { message: string; uid: string; author?: { displayName: string; photoURL?: string; }; }) { if (message.length <= 0) { return { result: false, message: '내용을 입력해주세요', }; } try { await fetch(`/api/message.add`, { method: 'post', headers: { 'content-type': 'application/json', }, body: JSON.stringify({ uid, message, author, }), }); return { result: true, }; } catch (err) { console.error(err); return { result: false, message: '등록 실패', }; } } const UserHomePage: NextPage<Props> = function ({ userInfo }) { const [message, setMessage] = useState(''); const [isAnonymous, setAnonymous] = useState(true); const [messageList, setMessageList] = useState<InMessage[]>([]); const toast = useToast(); const { authUser } = useAuth(); async function fetchMessageList(uid: string) { try { const resp = await fetch(`/api/message.list?uid=${uid}`); if (resp.status === 200) { const data = await resp.json(); setMessageList(data); } } catch (err) { console.log(err); } } useEffect(() => { if (userInfo === null) return; fetchMessageList(userInfo.uid); }, [userInfo]); if (userInfo === null) { return <p>사용자를 찾을 수 없습니다.</p>; } const isOwner = authUser !== null && authUser.uid === userInfo.uid; return ( <ServiceLayout title={`${userInfo.displayName}의 홈`} minH="100vh" backgroundColor="gray.50"> <Box maxW="md" mx="auto" pt="6"> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex p="6"> <Avatar size="lg" src={userInfo.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Flex direction="column" justify="center"> <Text fontSize="md">{userInfo.displayName}</Text> <Text fontSize="xs">{userInfo.email}</Text> </Flex> </Flex> </Box> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex align="center" p="2"> <Avatar size="xs" src={isAnonymous ? 'https://bit.ly/broken-link' : authUser?.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Textarea bg="gray.100" border="none" boxShadow="none !important" placeholder="어떤이야기를 하고 싶나요?" borderRadius="md" resize="none" minH="unset" overflow="hidden" fontSize="xs" mr="2" minRows={1} maxRows={7} as={ResizeTextarea} value={message} onChange={(e) => { if (e.target.value) { const lineCount = (e.target.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1; if (lineCount > 7) { toast({ title: '최대 7줄까지만 입력가능합니다', position: 'top-right', }); return; } } setMessage(e.target.value); }} /> <Button disabled={message.length === 0} bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" onClick={async () => { const postData: { message: string; uid: string; author?: { displayName: string; photoURL?: string; }; } = { message, uid: userInfo.uid, }; if (isAnonymous === false) { postData.author = { photoURL: authUser?.photoURL ?? 'https://bit.ly/broken-link', displayName: authUser?.displayName ?? 'anonymous', }; } const messageResp = await postMessage(postData); if (messageResp.result === false) { toast({ title: '등록실패', position: 'top-right' }); } setMessage(''); }} > 등록 </Button> </Flex> <FormControl display="flex" alignItems="center" mt="1" mx="2" pb="2"> <Switch size="sm" colorScheme="orange" id="anonymous" mr="1" isChecked={isAnonymous} onChange={() => { if (authUser === null) { toast({ title: '로그인이 필요합니다', position: 'top-right', }); return; } setAnonymous((prev) => !prev); }} /> <FormLabel htmlFor="anonymous" mb="0" fontSize="xx-small"> Anonymous </FormLabel> </FormControl> </Box> <VStack spacing="12px" mt="6"> {messageList.map((messageData) => ( <MessageItem key={`message-item${userInfo.uid}-${messageData.id}`} item={messageData} uid={userInfo.uid} displayName={userInfo.displayName ?? ''} photoURL={userInfo.photoURL ?? 'https://bit.ly/broken-link'} isOwner={isOwner} /> ))} </VStack> </Box> </ServiceLayout> ); }; export const getServerSideProps: GetServerSideProps<Props> = async ({ query }) => { const { screenName } = query; if (screenName === undefined) { return { props: { userInfo: null, }, }; } try { const protocol = process.env.PROTOCOL || 'http'; const host = process.env.HOST || 'localhost'; const port = process.env.PORT || '3000'; const baseUrl = `${protocol}://${host}:${port}`; const userInfoResp: AxiosResponse<InAuthUser> = await axios(`${baseUrl}/api/user.info/${screenName}`); return { props: { userInfo: userInfoResp.data ?? null, }, }; } catch (err) { console.error(err); return { props: { userInfo: null, }, }; } }; export default UserHomePage;

유저 api 하나 간단히 만드는 줄 알았는데..리팩터링하고 또하고모델과 컨트롤러 파일로 만들고 (모르신다면 MVC 패턴)에러 핸들링의 기초까지 싹 다 훑어버림1시간도 안되는 강의지만조심하세요 프린이 여러분들...근데 잘보면 뒤에 계속 API를 추가하기 때문에 여기서 정신차리셔야합니다... 꺾였지만 계속 가는 마음이 중요합니다 고고

안녕하세요! 질문 입력 컴포넌트 강의를 듣던 중 toast 처리부터 아래와 같은 오류가 납니다.또한 Anonymous 버튼도 실행이 되지 않습니다.어떤 문제 일까요? import { ServiceLayout } from '@/components/service_layout'; import { useAuth } from '@/contexts/auth_user.context'; import { Avatar, Box, Button, Flex, FormControl, FormLabel, Switch, Text, Textarea, useToast } from '@chakra-ui/react'; import { NextPage } from 'next'; import { useState } from 'react'; import ResizeTextarea from 'react-textarea-autosize'; const userInfo = { uid: 'test', email: 'cccodus313@gmail.com', displayName: 'park chae yeon', photoURI: '', }; const UserHomePage: NextPage = function () { const [message, setMessage] = useState(''); const [isAnonymous, setAnonymous] = useState(true); const toast = useToast(); const { authUser } = useAuth(); return ( <ServiceLayout title="user home" minH="100vh" backgroundColor="gray.50"> ; <Box maxW="md" mx="auto" pt="6"> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex p="6"> <Avatar size="lg" src={userInfo.photoURI} mr="2" /> <Flex direction="column" justify="center"> <Text fontSize="md">{userInfo.displayName}</Text> <Text fontSize="xs">{userInfo.email}</Text> </Flex> </Flex> </Box> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex align="center" p="2"> <Avatar size="xs" src={isAnonymous ? 'https://bit.ly/broken-link' : authUser?.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Textarea bg="gray.100" border="none" boxShadow="none !important" placeholder="어떤 이야기를 나누고 싶나요?" borderRadius="md" resize="none" minH="unset" overflow="hidden" fontSize="xs" mr="2" minRows={1} maxRows={7} as={ResizeTextarea} value={message} onChange={(e) => { if (e.target.value) { const lineCount = (e.target.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1; if (lineCount > 7) { toast({ title: '최대 7줄까지만 입력가능합니다', position: 'top-right', }); return; } } setMessage(e.target.value); }} /> <Button disabled={message.length === 0} bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" > 등록 </Button> </Flex> <FormControl display="flex" alignItems="center" mt="1" mx="2" pb="2"> <Switch size="sm" colorScheme="orange" id="anonymous" mr="1" isChecked={isAnonymous} onChange={() => { if (authUser === null) { toast({ title: '로그인이 필요합니다', position: 'top-right', }); return; } setAnonymous((prev) => !prev); }} /> <FormLabel htmlFor="anonymous" mb="0" fontSize="xx-small"> Anonymous </FormLabel> </FormControl> </Box> </Box> </ServiceLayout> ); }; export default UserHomePage;  

안녕하세요!강의대로 따라하다가 FirebaseError: Firebase: Error (auth/invalid-api-key). 오류가 나왔습니다.model/firebase_client.ts 부분입니다.import { initializeApp, getApps } from 'firebase/app'; import { Auth, getAuth } from 'firebase/auth'; import getConfig from 'next/config'; const { publicRuntimeConfig } = getConfig(); const FirebaseCredentials = { apiKey: publicRuntimeConfig.apiKey, authDomain: publicRuntimeConfig.authDomain, projectId: publicRuntimeConfig.projectId, }; export default class FirebaseAuthClient { public static instance: FirebaseAuthClient; private auth: Auth; public constructor() { const apps = getApps(); if (apps.length === 0) { console.log('firebase initializeApp'); initializeApp(FirebaseCredentials); } this.auth = getAuth(); console.log('firebase auth client constructor'); } public static getInstance(): FirebaseAuthClient { if (!FirebaseAuthClient.instance) { FirebaseAuthClient.instance = new FirebaseAuthClient(); } return FirebaseAuthClient.instance; } public get Auth(): Auth { return this.auth; } } next.config도 확인했습니다ㅠㅠ.env 파일명도 확인했고, firebase일반설정에 들어가 웹 API 키도 확인하였습니다. 혹시몰라 깃허브 예제코드와도 비교했지만 해결하지 못했습니다ㅠㅠ 무슨 문제일까요?

안녕하세요. Vercel 배포 후 상세페이지 meta tag내 thumbnail 이미지가 생성되지 않는 이슈가 발생합니다. (500 에러 발생)구글 참고하여 verce l내 runtime을 기존 Node 18에서 Node 14로 변경하고 빌드하여 해결하긴 했는데, 빌드 메세지가 아래처럼 발생합니다.(Error: Node.js version 14.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.)Node 18로 빌드하고 난 후 vercel에서 runtime log를 확인해 보면 아래와 같은 에러가 발생하는데 구글링을 해봐도 14로 내리는 것 외엔 해결책을 찾을 수 없어 Node 18로 빌드하여 해결하신 분이 있는지 올려봅니다.[pid=22][err] /tmp/chromium: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory [pid=22] <process did exit: exitCode=127, signal=null> [pid=22] starting temporary directories cleanup

안녕하세요, 요창님 :)강의 잘 보고 있습니다! 보던 중 한 가지 궁금한게 생겨서요!실제 현업에서도const pageToStr = Array.isArray(convertPage) ? convertPage[0] : convertPage; const sizeToStr = Array.isArray(convertSize) ? convertSize[0] : convertSize;위와 같은 코드(?) 가 자주 쓰이나요? 먼저 위를 예시로 들면 분명 client 에선 page을 number로 넘겼으나 api 에서 배열인지 아닌지 확인해줘야 하는 것은 인터넷에 찾아보니 next의 req.query의 타입이 string | string[] 이므로 타입을 지정해주고 있기 때문에 위에서 저렇게 체크를 해주는 것이라 이해했습니다.그럼 많은 부분에서 저렇게 배열을 구분하는 코드가 들어갈텐데 조금은 비 효율적이라 생각해현업에서는 다르게 사용할 것 같아서 질문 드립니다.!!

2:34환경을 초기화할때 사용 할 메서드 이름을 bootstrap 이라고 정하신 이유가 궁금합니다...!

안녕하세요, 사용자 정보 조회 API 부분에서컨트롤러에 보면screenName이 없을 경우에 대해서 예외처리를 해주고 있습니다.if (screenName === undefined || screenName === null) { throw new BadReqError('screenName이 누락되었습니다.'); }위와 같은데저 에러를 구현해보고 싶어서 테스트 해봤는데 되지 않아서 고민하다가 질문드려요.[screenName].ts 형식의 Dynamic route로 되어 있어서 screenName이 누락된다면 해당 컨트롤러를 수행하지 않아 위 에러가 발생하지 않을 것 같은데 맞을까요?제가 next는 이제 막 배워가고 있는 단계라서 잘 몰라서 위 이유가 맞는지 잘 모르겠습니다. 제가 발생시키지 못 하고 있는 중이라면 어떻게 해야 저 에러를 발생시킬 수 있는지 또한 같이 답변 부탁드립니다!!요약dynamic route로 인해 screenName이 누락되었을 경우 컨트롤러를 실행하지 않는다고 생각했는데 맞을까요?실행시킬 수 있는 에러라면 어떻게 해야 저 예외처리를 실행 시킬 수 있나요?

 redirect_uri_mismatch구글 로그인 버튼 생성하여 팝업을 실행시키면 위와 같은 에러가 나옵니다.안되는 이유를 찾던 중 강의에서는 authDomain에FIREBASE_AUTH_HOST 를 입력하셨는데 host를 입력하지 않고,firebaseconsle에서 확인할 수 있는 domain 을 가져와서 값을 넣으니 동작 하였습니다. 아래와 같은 형식authDomain: "blah-tutorial-3e756.firebaseapp.com",영상을 찍을 때와 버전이 달라져서 그런건지 문의드리며 혹시 비슷한 이슈로 팝업에서 에러를 받는 수강생들에게 도움이되길바랍니다.

강의에서 14버전으로 사용하셔서 설치하려했더니 오류가 나서 오류 해결방법 공유합니다.$ arch -x86_64 zsh해당 명령어 입력 한뒤 다시 nvm install 원하는 버전 입력하시면 됩니다!위와 같은 명령어 입력시 셸이 Intel 아키텍처 환경으로 전환되어 node 버전이 낮은것도 잘 설치 됩니다! 

실무 vue nuxt 사용 프론트 개발자입니다.. 다른건 다이해가 가는데 firebase admin 이부분 좀 소스코드예시를 파일로 올려주시면 안될까요? 아니면 깃허브에서 전체 예제 소스를 다운받을 수 있도록 해주시면 감사하겠습니다..

안녕하세요 이번에 배우면서 일부분 리팩토링 하면서(?) 진행 중입니다. 그런데 하다가 보니이런 R_CONNECTION_TIMED_OUT 오류가 나오더라고요 관련 코드들 싹 다 찾아보니 www. 관련 검색해도 안나오고 뭔지 모르겠네요 따로 추가하신 거라도 있을까요? /www.welcometoscotland.com/blog/2013/06/19/%20glasgow-a-green-urban-oasis-with-style net::ERR_CONNECTION_TIMED_OUTImage (async)eval @ chakra-ui-image.esm.js:89eval @ chakra-ui-image.esm.js:126commitHookEffectListMount @ react-dom.development.js:20568commitLifeCycles @ react-dom.development.js:20629commitLayoutEffects @ react-dom.development.js:23421callCallback @ react-dom.development.js:3945invokeGuardedCallbackDev @ react-dom.development.js:3994invokeGuardedCallback @ react-dom.development.js:4056commitRootImpl @ react-dom.development.js:23146unstable_runWithPriority @ scheduler.development.js:468runWithPriority$1 @ react-dom.development.js:11276commitRoot @ react-dom.development.js:22985performSyncWorkOnRoot @ react-dom.development.js:22324eval @ react-dom.development.js:11327unstable_runWithPriority @ scheduler.development.js:468runWithPriority$1 @ react-dom.development.js:11276flushSyncCallbackQueueImpl @ react-dom.development.js:11322flushSyncCallbackQueue @ react-dom.development.js:11309unbatchedUpdates @ react-dom.development.js:22433legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015hydrate @ react-dom.development.js:26081renderReactElement @ index.js:721doRender @ index.js:880_callee$ @ index.js:601tryCatch @ runtime.js:45invoke @ runtime.js:274prototype.<computed> @ runtime.js:97asyncGeneratorStep @ index.js:185_next @ index.js:203eval @ index.js:208eval @ index.js:200_render @ index.js:637render @ index.js:640eval @ next-dev.js:110eval @ fouc.js:13requestAnimationFrame (async)displayContent @ fouc.js:8eval @ next-dev.js:109Promise.then (async)eval @ next-dev.js:69./node_modules/next/dist/client/next-dev.js @ main.js?ts=1683339159009:567options.factory @ webpack.js?ts=1683339159009:633__webpack_require__ @ webpack.js?ts=1683339159009:37__webpack_exec__ @ main.js?ts=1683339159009:1236(anonymous) @ main.js?ts=1683339159009:1237webpackJsonpCallback @ webpack.js?ts=1683339159009:1179(anonymous) @ main.js?ts=1683339159009:9

안녕하세요. 로그인 버튼 클릭시 콘솔창에 다음과 같은 에러가 발생합니다.rebaseError: Firebase: Error (auth/auth-domain-config-required). at createErrorInternal (index-16e22603.js:497:1) at _assert (index-16e22603.js:503:1) at getIframeUrl (index-16e22603.js:9318:1) at _openIframe (index-16e22603.js:9343:1) at async BrowserPopupRedirectResolver.initAndGetManager (index-16e22603.js:9609:1) w https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth공식 문서를 보니 authDomain configuration is not provided 일때 발생하는 에러라고 합니다.auth/auth-domain-config-requiredThrown if authDomain configuration is not provided when calling firebase.initializeApp(). Check Firebase Console for instructions on determining and passing that field.아래는 로그인버튼 컴포넌트에 onClick입니다.코드상에는 에러가 발생하지 않았습니다.<GoogleLoginButton onClick={() => { signInWithPopup(FirebaseClient.getInstance().Auth, provider) .then((result) => { console.info(result.user); }) .catch((error) => { console.error(error); }); }} />루트 폴더에 .env 파일도 잘 있구요 ㅜㅜ아래는 루트 폴더에 next.config.js 파일입니다.module.exports = { reactStrictMode: true, publicRuntimeConfig: { publicApiKey: process.env.publicApiKey || '', authDomain: process.env.FIREBASE_AUTH_HOST || '', projectId: process.env.projectId || '', }, }; 로그인 버튼 컴포넌트도 강사님 코드와 일치합니다..아래는 models/firebase_client.ts 입니다.원인이 뭘까요!?import { initializeApp, getApps } from 'firebase/app'; import { Auth, getAuth } from 'firebase/auth'; import getConfig from 'next/config'; const { publicRuntimeConfig } = getConfig(); /** 환경변수는 node.js이기 때문에 서버에서 사용할 수 있고, 클라이언트에서 바로 접근할 수 없기 때문에 config 설정을 해주고 * 아래처럼 가져와서 쓸 수 있도록 해준다. */ const FirebaseCredentials = { apiKey: publicRuntimeConfig.apiKey, authDomain: publicRuntimeConfig.authDomain, projectId: publicRuntimeConfig.projectId, }; /** Firebase의 Authentication 모듈을 사용하기 위해 FirebaseClient 클래스를 정의하는 코드 */ export default class FirebaseClient { private static instance: FirebaseClient; private auth: Auth; /** 이미 초기화된 Firebase 애플리케이션이 있는지 검사하고, 없다면 FirebaseCredentials를 사용하여 Firebase 애플리케이션을 초기화 */ public constructor() { /** 앱이 몇 개 있는지 찾는 것 */ const apps = getApps(); /** 앱이 한 번도 초기화되지 않았다면 초기화를 시작 */ if (apps.length === 0) { console.info('firebase client init start'); initializeApp(FirebaseCredentials); } /** 초기화가 되었으면 Auth를 가져와서 할당 */ this.auth = getAuth(); console.info('firebase auth'); } /** 인스턴스를 가져옴 */ public static getInstance(): FirebaseClient { if (FirebaseClient.instance === undefined || FirebaseClient.instance === null) { FirebaseClient.instance = new FirebaseClient(); } return FirebaseClient.instance; } /** auth를 반환 */ public get Auth(): Auth { return this.auth; } }

강사님 안녕하세요. 이 전 질문에 대한 답변으로 get 요청에 대한 문제는 해결했습니다 감사합니다^^그런데 이후 다음과 같은 문제가 발생하였습니다. package-lock.json 삭제하고, node_modules 폴더도 삭제한 뒤 yarn 으로 패키지 재설치하였고,yarn dev, yarn build 등 명령어를 입력하면 다음과 같은 에러 메시지가 출력되면서 localhost:3000에 진입할 수 없습니다.@types/react를 최신버전으로 다시 설치해봤고, 강의에서 사용중인 버전인 ^17.0.37으로도 다시 설치해봤고, vscode 종료 후 재실행하여도 동일한 에러메시지가 계속 출력됩니다.해당 에러 메시지는 npm run dev 명령어를 입력해도 @types/react를 설치하라는 에러가 발생합니다.자체 해결https://stackoverflow.com/questions/71843307/next-js-is-not-recognizing-types-react위 스택오버플로우 답변을 보고 @types/react 버전을 18.0.1 버전으로 변경했습니다. 결과적으로 문제는 해결되었습니다.그러나 의문점은, 강의에서 사용하는 버전은 ^17.0.37인데 저의 경우만 18.0.1버전으로 변경해야 작동하는 것인지?아니면 다른 분들도 작동하지 않으시는지? 저만 그런것이라면 원인이 무엇일지 궁금합니다. ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info  - Loaded env from /Users/hanair/dev/blahx2/.env It looks like you're trying to use TypeScript but do not have the required package(s) installed. Please install @types/react by running:         yarn add --dev @types/react If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory). error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.  package.json 파일은 다음과 같습니다.{   "name": "blahx2",   "private": true,   "scripts": {     "dev": "next dev",     "build": "next build",     "start": "next start",     "lint": "next lint"   },   "dependencies": {     "@chakra-ui/react": "1.8",     "@emotion/react": "^11.10.6",     "@emotion/styled": "^11.10.6",     "firebase": "^9.20.0",     "firebase-admin": "^11.7.0",     "framer-motion": "^6.5.1",     "next": "12.0.7",     "react": "17.0.2",     "react-dom": "17.0.2",     "styled-components": "^5.3.3"   },   "devDependencies": {     "@types/node": "^16.11.13",     "@types/react": "^17.0.58",     "@types/styled-components": "^5.1.18",     "@typescript-eslint/eslint-plugin": "^5.8.0",     "@typescript-eslint/parser": "^5.8.0",     "babel-eslint": "^10.1.0",     "babel-plugin-styled-components": "^2.0.2",     "eslint": "8.4.1",     "eslint-config-airbnb": "^19.0.2",     "eslint-config-airbnb-base": "^15.0.0",     "eslint-config-airbnb-typescript": "^16.1.0",     "eslint-config-next": "12.0.7",     "eslint-config-prettier": "^8.3.0",     "eslint-plugin-babel": "^5.3.1",     "eslint-plugin-import": "^2.25.3",     "eslint-plugin-jsx-a11y": "^6.5.1",     "eslint-plugin-prettier": "^4.0.0",     "eslint-plugin-react": "^7.27.1",     "eslint-plugin-react-hooks": "^4.3.0",     "prettier": "^2.5.1",     "typescript": "^4.5.4"   } }