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

안녕하세요!! 수업 잘듣고있습니다.jsx내에서 div태그 속에 여러 css-in-js 변수들을 입력하려면 어떻게 해야하나요??아래와 같이 className 방식을 사용했는데 기존 css 방식이어서 안먹히는건가요...?<ProfileLink> <div className={clsx[styles.Click, styles.LinkLight].join(" ")}> <img src="/ic_link.png" /> </div> <Click> <img src="/ic_location.png" /> </Click> </ProfileLink>

제가 코드를 한 번에 입력하지 않고 나눠서 강의를 봐서 놓친 것일 수도 있는데..@Entity("votes")를 입력하면 제일 위쪽에 자동으로 import {Entity} from "typeorm" 등의 코드가 강의에서는 생기던데 혹시 import 코드가 자동으로 생성되지 않는 이유는 무엇일까요? 

선생님이 설명하신 것처럼 따라서 했는데 저장할 시 저절로 2칸 tab되는 기능이 안되는데 어디서 잘못된 지 알려주시면 감사하겠습니다.

console.log로 action과 post를 찍어봤는데 post의 값이 이상합니다redux dev tools도 확인해보면 제가 지금 넣은 데이터의 형식이 content만 들어가 있습니다 어떻게 해야하나요?

playgroud 에서 회원을 생성 이후 login 페이지에서 로그인을 성공적으로 하였으나 login success 페이지에서 fetchuserloggedin 이 성공적으로 이루어 지지 않는거 같습니다. 회원가입을 여러번 해서 다른 계정으로 시도해도 name 부분이 표시가 되지 않네요. 혹시 뭐가 문제일까요?  import { useState } from "react"; import { gql, useMutation } from "@apollo/client"; import { IMutation, IMutationLoginUserArgs, } from "../../../src/commons/types/generated/types"; import { accessTokenState } from "../../../src/commons/stores"; import { useRecoilState } from "recoil"; import { useRouter } from "next/router"; const LOGIN_USER = gql` mutation loginUser($email: String!, $password: String!) { loginUser(email: $email, password: $password) { accessToken } } `; export default function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loginUser] = useMutation< Pick<IMutation, "loginUser">, IMutationLoginUserArgs >(LOGIN_USER); const [, setAccessToken] = useRecoilState(accessTokenState); const onChangneEmail = (event) => { setEmail(event.currentTarget.value); }; const onChangnePassword = (event) => { setPassword(event.currentTarget.value); }; const onClickLogin = async () => { try { //1.로그인 뮤테이션 날려서 accessToken 받아오기 const result = await loginUser({ variables: { email, password, }, }); const accessToken = result.data?.loginUser.accessToken; console.log(accessToken); //받아온 accessToken 을 글로벌 스테이트에 저장해야지 모든 애들이 쓸수 있음 if (accessToken === undefined) { alert("로그인에 실패했습니다: 다시 시도해주세요"); return; } setAccessToken(accessToken); // 3. 로그인 성공 페지이로 이동하기 void router.push("/section23/23-01-login-success"); } catch (error) { if (error instanceof Error) alert(error.message); } }; return ( <> 이메일:{" "} <input onClick={onChangneEmail} type="text" placeholder="이메일 입력" /> 비밀번호:{" "} <input onClick={onChangnePassword} type="password" placeholder="비밀번호 입력" /> <button onClick={onClickLogin}>로그인</button> </> ); } import { useQuery, gql } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; export default function LoginPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님 환영합니다!</>; }

프로필 탭 들어갈 시  Button is not defined 이라는 오류가 뜹니다 제 코드는 import React from "react"; import PropTypes from "prop-types"; import { List } from "antd"; import Item from "antd/lib/list/Item"; import { StopOutlined } from "@ant-design/icons"; import { isStyledComponent, keyframes } from "styled-components"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: 20 }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(Item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={Item.Nickname} /> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList; 입니다 무엇이 문제 일까요?

router.get("/", async (req, res, next) => { try { if (req.user) { // findOne에서 에러가 생기는 거는 try catch문으로 처리가 안된 const user = await User.findOne({ where: { id: req.user.id }, }); res.status(200).json(user); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } });이부분에서 아직 로그인을 하지 않아서 유저 정보가 없을때 User.findOne에서 에러가 나기 때문에 if문으로 감싸서 아직 유저정보가 없을 때를 예외 처리 해주셨는데 어차피 User.findOne에서 에러가 나면 catch문으로 이동해서 에러가 처리가 되는데 굳이 if else로 예외 처리 하신 이유가 있나요?

안녕하세요, 강의를 따라하던 중 사용자를 찾을 수 없다는 페이지가 떠서 어디서 오류가 났는지 확인을 못하겠어서 질문드립니다. 혹시몰라 이 강의 까지 커밋한 깃허브 주소 올려봅니다,,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;

검색 해보니까 input태그에 자식을 넣어서 발생하는 에러라고 하는데 코드에는input태그에 props를 넣은것 빼곤 그럴만한 에러사항이 없습니다. 무엇이 문제인가요..?ㅠ    index.jsimport BoardWrite from "../../../src/components/units/board/write/BoardWrite.container"; export default function GraphqlMutationPage() { // 한 줄일 땐 괄호() 필요 없음 return ( <div> <div>########## 여기는 페이지입니다.####### </div> <BoardWrite />;<div>########## 여기는 페이지입니다.####### </div> </div> ); }  BroadWrite.container.js:import { useMutation } from "@apollo/client"; import { useState } from "react"; import BoardWriteUI from "./BoardWrite.presenter"; import { 나의그래프큐엘셋팅 } from "./BoardWrite.queries"; export default function BoardWrite(props) { const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState(); const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { // variables 이게 $ 역할을 함 writer: writer, title: title, contents: contents, }, }); console.log(result); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> <BoardWriteUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={onChangeContents} /> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> </div> ); }  BroadWrite.presenter.jsimport { RedInput, BlueButton } from "./BoardWrite.styles"; export default function BoardWriteUI(props) { return ( <div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> <div> 작성자: <RedInput type="text" onChange={props.bbb} /> 제목: <input type="text" onChange={props.ccc} /> 내용: <input type="text" onChange={props.ddd} /> <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>; </div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> </div> ); } BroadWrite.styles.jsimport styled from "@emotion/styled"; export const RedInput = styled.input` border-color: red; `; export const BlueButton = styled.input` background-color: blue; `;

redux toolkit을 이용해서 코딩을 하고 있고 credentials까지 강의 나와있는대로 다 작성을 한 상태입니다post action creator는 이렇게 작성하였고export const addPost = createAsyncThunk( "/post", async (data, { fulfillWithValue, rejectWithValue }) => { try { console.log(data); const response = await axios.post("/post", data); console.log(response.data); return fulfillWithValue(response.data); } catch (error) { throw rejectWithValue(error.response); } } );에러메시지는 POST http://localhost:3065/post 500 (Internal Server Error)redux dev tools에 rejected 요청으로 온 여러 정보가 있는데 그중에 뭐가 필요한 정보인지 몰라서 제로초님이 필요하신 정보를 얘기해주시면 추가적으로 추가 하겠습니다status(pin):500statusText(pin):"Internal Server Error"일단 이 두개가 상태 메시지입니다

자유게시판 대댓글 등록 & 조회 기능 구현을하는데 playground에서 회원정보 인증에서 오류가 발생합니다.피그마 상에서도 일반회원에 대한 내용만 있고 비회원일 경우없는 것을 보면 대댓글 기능 자체가 로그인이 되어있을 경우를 상정한건가요?일단 docs에는 유저토큰 정보를 요구하지는 않는데... 회원정보가 필요한가요? 대댓글 자유게시판에서 대댓글기능 작동하는 건가요...?

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

어떤 부분때문에 이런 오류가 나는 걸까요? 이미지 등록 버튼을 눌러서 파일 선택하면 이 오류 메세지가 뜹니다.

가비아 에서 도메인 결제 후 터미널 dig 부분에서 막혀서 질문 드립니다. 가비아  AWS 여기까지 잘 따라 왔는데 터미널에서 오류가 뜨네요 강의에서 2-3일 걸릴수도 있다했는데 현재 6시간 이상 지나도 안돼서 궁금함에 질문 남겨요.. 기다리면 될까요? 아님 잘못한 부분이 있을까요?

deprecated 되는 걸로 알고있고안써줘도 되는 것 같은데 리액트랑 타입스크립트 버전업에 따른 결과인가요?

안녕하세요! 질문 입력 컴포넌트 강의를 듣던 중 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;  

강사님 안녕하세요 혹시 쿼리문좀 백엔드에서 잘못되는거 같은데한번 봐주시면 안될까요...아무리 _id로 할려고해도 같은 유저가 질문하게 되면 컨텐츠로도 확인해야해서요 ㅠㅠ 강사님 댓글이라도 대댓글 이거에 관한 힌트라도 얻을수있게 남겨주시면 감사하겠습니다..아무리해도 쿼리문에서 필요한게 없으니 어떻게 해야할지를 모르겠습니다...

터미널에 다음과 같은 경고가 뜹니다.warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works TypeError: Failed to fetch at webpack_require.hmrM (http://localhost:3000/_next/static/chunks/webpack.js?ts=1690436755699:1201:20)작성한 코드AppLayout.jsimport { Menu } from "antd"; import Link from "next/link"; import PropTypes from "prop-types"; import React from "react"; const items = [ { label: ( <Link href="/"> <a>홈</a> </Link> ), key: "home", }, { label: <Link href="/profile">프로필</Link>, key: "profile", }, { label: ( <Link href="/signup"> <a>회원가입</a> </Link> ), key: "signup", }, ]; function AppLayout({ children }) { return ( <div> <Menu mode="horizontal" items={items}></Menu> {children} </div> ); } AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; index.jsimport React from "react"; import AppLayout from "../components/AppLayout"; function Home() { return ( <AppLayout> <div>Hello, Next!</div> </AppLayout> ); } export default Home; Fast Refresh 관련 문서를 보고 새로 고침도 해보고, 캐시도 지워보고, 익명 함수를 기명 함수로 바꿔보았지만 소용이 없었습니다.npm run dev를 실행하고 localhost에 접속할 때마다 보입니다.웹페이지 우측 하단에 vercel mark 같은 것이 잠시 깜빡이는데 그 때에도 fast refresh 관련 warnning이 뜹니다.next.js 12 버전, antd 5버전을 사용 중이며 질문 시점에 강의는 Section1의 1강 수강 했습니다.

안녕하세요!다음과 같이 hook이 선언되기 전에 if조건문이 위치하여 오류가 발생하였습니다. useMutation은 조건문이 실행되기 전에 선언해주면 해결되었는데 useQuery는 router를 사용하기 때문에 조건문보다 먼저 선언이 될 수 없었습니다.그래서 조건문을 없애기 위해서 router.query.boardId 를 string타입으로 변환하여도 상관이 없나요?1차 오류 발생if (!router || typeof router.query.boardId !== "string") return <></>; const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs >(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId }, }); const [deleteBoardComment] = useMutation< Pick<IMutation, "deleteBoardComment">, IMutationDeleteBoardCommentArgs >(DELETE_BOARD_COMMENT);//오류 원인 React Hook "useMutation" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? const { data } = useQuery<//string으로 변환 const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs>(FETCH_BOARD_COMMENTS, { variables: { boardId: String(router.query.boardId) }, });