중고마켓 피그마에서 로그인부분에 이메일 찾기가 있는데, 플레이그라운드에 없는 것 같아서 문의 드립니다. 비밀번호는 resetUserPassword를 사용하면 될 것은데, 이메일찾기는 제가보기엔 보이지 않아서요!

Server ErrorInvariant Violation: Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a documentThis error happened while generating the page. Any console logs will be displayed in the terminal window. 이러한 에러가 뜨는데 왜 발생하는 걸까요.const [contents, setContents] = useState(""); 18 | > 19 | const [나의함수] = useMutation(나의그래프큐엘셋팅) | ^ 20 | 21 | const onClickSubmit = async () => { 22 | const result = await 나의함수({      import { useState } from "react" import {나의그래프큐엘셋팅} from './BoardWrite.queries' // export는 골라서 가져오기 import BoardWriterUI from "./BoardWrite.presenter"; // export-default로 한 개만 가져오기 import { useMutation } from "@apollo/client"; // import BoardWriterUI from "./BoardWrite.presenter"; // export-default로 한 개만 가져오기 // import BoardWriterUI, {apple} from "./BoardWrite.presenter"; // export-default와 export 함께 가져오기 // import * as S from './BoardWrite.styles' // 모든 export를 가져와줘 // S.BlueButton // S.RedInput export default function BoardWrite() { 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 coChangeContents = (event) => { setContents(event.target.value) } return ( <BoardWriterUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={coChangeContents}/> ) }-컨테이너import { gql } from "@apollo/client" const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer : String, $title : String, $contents: String) { createBoard(writer : $writer, title : $title, contents : $contents) { _id number message } } ` -쿼리  

라우팅을 넘어갈수가 없습니다Application error: a client-side exception has occurred (see the browser console for more information). 이런 오류가 뜨네요

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.  const movieId = request.data.result[Math.floor(Math.random() * request.data.results.length)].id; 부분 작성 후 컴파일 시 리액트에서  Cannot read properties of undefined 에러가 발생합니다. 하나가 아니라 여러개 발생하는데 조치방법이 있을까요?

npm cors를 설치하고회원가입 버튼을 누르니까 에러가 납니다왜 안되는 건지 알려주세요..

로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다.상태랑 로직 관리를  useReducer, React Context API, React Query, redux, graphql  정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!

선생님! 안녕하세요배포 전 작동 잘 되는 지 확인 후,배포 후 로그인 까지는 잘 되는데, / 하고 사용자 홈페이지에 들어갔을 때 '사용자를 찾을 수 없습니다'오류가 생깁니다.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) 

version: "3.9" services: db: image: postgres:latest container_name: poster restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PW}" volumes: - commu:/var/lib/postgresql/data volumes: commu: {} 우선, docker compose down -v 명령어로 컨테이너를 삭제하고, data 폴더도 지워주세요.그리고 docker-compose.yml 파일에서 volumes를 저런 식으로 변경해주면 됩니다.변경 했으면 docker compose up 으로 컨테이너를 다시 생성해주면 정상적으로 연결됩니다.버전은 강의에서 나온대로 3으로 사용해도 상관 없습니다.

퀴즈를 해결하려고 해당 코드를 작성했는데 로그인을 하려고 하면 Context creation failed: 토큰 만료라는 400 오류가 뜹니다. (새로 가입해서도 해봤는데 똑같은 오류가 떴습니다.)또한 useAuth를 사용했는데도 로그인 없이 성공페이지로 바로 접속됩니다. 뭐가 문제일까요?useAuth export const useAuth = ():void => { const router = useRouter() useEffect(()=>{ if(localStorage.getItem("accessToken")===null){ alert("로그인 ㄱ") void router.push("/z_quiz/section46/02") }},[]) }완료 코드 import { gql, useQuery } from "@apollo/client" import type { IQuery } from "../../../../src/commons/types/generated/types" import { useAuth } from "../../../../src/components/commons/hooks/useAuth" const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } ` export default function LoginSuccessPage():JSX.Element { const { data } = useQuery<Pick<IQuery,"fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN) useAuth() return <>{data?.fetchUserLoggedIn.name}님 환영합니다.</> }로그인 코드/* eslint-disable @typescript-eslint/no-misused-promises */ import { gql, useMutation } from "@apollo/client" import { type ChangeEvent, useState } from "react" import type { IMutation, IMutationLoginUserArgs } from "../../../../src/commons/types/generated/types" import { useRecoilState } from "recoil" import { accessTokenState } from "../../../../src/commons/stores" 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():JSX.Element { 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 onChangeEmail = (event: ChangeEvent<HTMLInputElement>):void => { setEmail(event.currentTarget.value) } const onChangePassword = (event: ChangeEvent<HTMLInputElement>):void => { setPassword(event.currentTarget.value) } const onClickLogin = async ():Promise<void> => { try { const result = await loginUser({variables: { email, password }}) const accessToken = result.data?.loginUser.accessToken if (accessToken=== undefined) { alert("로그인 실패") return ;} setAccessToken(accessToken) localStorage.setItem("accessToken", accessToken) void router.push("./success.tsx") } catch(error) { if (error instanceof Error ) alert(error.message) } } return ( <> 이메일: <input type="text" onChange={onChangeEmail} /> 비밀번호: <input type="password" onChange={onChangePassword} /> <button onClick={onClickLogin}>로그인</button> </> ) }

강의의 중고마켓 포트폴리오를 만들고 있는 수강생입니다해당 포트폴리오는 배포를 못한다고 알고 있는데, 배포링크 없는 프로젝트를 면접관이 안좋게 보지 않을지 걱정됩니다(git소스코드와 함께 readme에 gif, 기타 설명은 첨부하려고 합니다)그래서 다 수강한 후에 강의의 프로젝트와 함께, 배포까지 하는 새 프로젝트를 만들어볼까 생각중인데이경우 파이어베이스나 node.js를 활용해서, 제가 직접 기본적인 백엔드만 구축하려고 하는 새 프로젝트가 취업에 도움이 될지 궁금합니다.. 비효율적인가 싶기도 하고요아니면 다른 좋은 방법이 있을까요..?

ApolloClient를 이용해서 graphql 연동 시 다음과 같은 에러가 발생합니다.사용 환경이 localhost가 아니라 "Access-Control-Allow-Origin" 정보가 일치하지 않아 거부되고 있습니다. backend-practice graphql연동 시 localhost:3000 만 허용되는 것 같습니다.아래 에러 정보 공유합니다.Access to fetch at 'http://backend-practice.codebootcamp.co.kr/graphql' from origin 'http://10.10.9.109:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. ApolloClient에서 no-cors로 설정시에는 서버 에러를 수신하게 되어 현재 연동이 어려운 상태입니다.어떻게 해야 할까요?

프로필페이지 에서 세로고침을 할때 로그인이 풀리면서 로그인 정보가 사라지면서 에러가 발생하는 현상이 있었습니다const Profile = () => { const { me } = useSelector((state) => state.user); const dispatch = useDispatch(); useEffect(() => { if (!(me && me.id)) { Router.push("/"); } }, [me && me.id]); useEffect(() => { dispatch(loadFollowers()); dispatch(loadFollowings()); }, []); return ( <> <Head> <title>프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉 목록" data={me?.Followings} /> <FollowList header="팔로워 목록" data={me?.Followers} /> </AppLayout> </> ); };그런데 이해가 안되는점은 Router.push로 me에 대한 정보가 없으면 루트 페이지로 넘어가게 만들어두었는데도 로그인 정보가 없다고 에러가 발생하고 그래서 로그인 정보를 가져오는 loadMyInfo를 사용해도 계속 에러가 발생한다는 점입니다.이부분이 일단 첫번째로 이해가 안되는 점이고아래 질문자님들이 질문하신 내용으로 me?.Foolowings로 일단 해결하고 넘어갔습니다그런데 또 프로필 페이지에서 세로고침을 해보니까 이번에도 me에 대한 정보가 없다고 나옵니다me에 대한 정보가 없어서 발생하는 에러인데 팔로워에 대한 정보를 불러오는 리듀서에서 에러가 발생합니다 하지만 사진에 state 정보를 보시면 me에 정보가 들어있습니다. 아마 me 정보를 갱신하기 이전에 발생한 action에 대한 에러인거 같은데 어떻게 해결하면 좋을까요? 

안녕하세요 선생님! 전에 Bad request 400 문제로 글 올렸던 사람입니다답변 주신 부분은 잘 확인 했습니다.그런데 variables는 잘 작성했구 연결도 했습니다. 그런데 useEffect로 boardId가 유효하면 실행, 아니면 loading이라는 문구를 내보내게 작성한 후 확인을 해보니 아래와 같은 문제가 있었습니다console.log(router.query.boardId);에서 undefined가 떳길래useRouter가 작성됐는지 import했는지랑 확인했고, 문제 없었습니다. 또, ReferenceError: boardId is not defined 메시지가 떳습니다 . . ] 그래서 다른 방법으로 해결을 해보고자console.log(router.query.boardId);가 담긴 index에서 import를 선언하는 부분 최상위에 "use client"를 작성하고, import { useRouter } from 'next/router' 를 'next/navigation'으로 바꿨더니아래와 같이 오류가 확인 됐습니다.. .아래는 문제가 있는 컴포넌트입니다(useEffect 지움, next/router로 바꿈)"use client" import { useRouter } from "next/router"; import { gql, useQuery } from "@apollo/client"; import { Avatar, AvatarWrapper, Body, BottomWrapper, Button, CardWrapper, Contents, CreatedAt, Header, Info, Title, Wrapper, Writer } from "../../../styles/boardnewpage"; export const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { _id writer title contents createdAt } } `; export default function BoardDetailPage() { const router = useRouter(); console.log(router.query.boardId); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, }); if (!data) { // boardId가 없는 경우에 대한 처리 (예: 로딩 스피너 표시 등) return <div>Loading...</div>; } return ( <Wrapper> <CardWrapper> <Header> <AvatarWrapper> <Avatar src="/images/ic_profile.png" /> <Info> <Writer>{data?.fetchBoard?.writer}</Writer> <CreatedAt> {data?.fetchBoard?.createdAt} </CreatedAt> </Info> </AvatarWrapper> </Header> <Body> <Title>{data?.fetchBoard?.title}</Title> <Contents>{data?.fetchBoard?.contents}</Contents> </Body> </CardWrapper> <BottomWrapper> <Button>목록으로</Button> <Button>수정하기</Button> <Button>삭제하기</Button> </BottomWrapper> </Wrapper> ); }  아래는 위 컴포넌트를 실행하고 나서 뜨는 화면 입니다if문을 지우고 나면 저번에 올렸던 질문 글 처럼 화면은 넘어가는데 varibales 데이터들만 안뜹니다...! + 로딩 뜬 화면의 개발자도구 화면 입니다!! 확인해주시고 답변 주시면 감사하겠습니다.!!!😂🥹

저의 경우 '나만의 페이지'라고 하지 않고, my_page(소문자)로 해서 실행했는데, 안되더라구요.... 계속 왜 안되지 해메고 있었는데 my_page를 My_page(대문자)로 하니까 실행되는걸 확인했습니다. 혹시나 앞글자를 소문자로 하신분들은 대문자로 바꿔주시면 나올거 같아요~여기서 소문자로 import했을경우엔 왜 나오지 않을까요? react의 규칙인가요?

프로젝트를 파이어베이스로 배포하려 yarn build 했는데 이런 오류가 뜨는데 도저히 어떤 오류인지 몰라서 글 남깁니다.. edit 페이지에서는 오류가 없는데 어떤 오류일까요.....

안녕하세요! 섹션27 포트폴리오 제작에 문제가 있어서 질문 올립니다.위 사진은 등록하기를 누르고 나면 나온 상세페이지 인데요, 다 하고나서 검토 한 뒤에도 varibales한 createBoardInput들만 확인 되지 않습니다..오타도 없고(혹시몰라서 선생님이 작성하신 코드(gql, try~catch부분)를 복사붙여넣기도 해보았습니다), package.json도 확인했고, app.js의 uri에도 문제가 없는데 어떻게 된걸까요.ㅠㅠ아래는 추가 오류상세메시지 입니다확인해주시고 답변해주시면 감사하겠습니다!! + 제 폴더를 복붙해서, 그 복붙한 폴더 안에포트폴리오 자료인 선생님 폴더의 pages-boards 내의 [boardId]와 new의 index.js 를 복사해 붙여넣어봤는데(나머지 파일들은 냅둠)같은 에러가 뜹니다. 그래서 ui와 container의 문제는 아닌 것 같아요..개발자도구 Sources탭에서 cteathttpLink의 currentFetch 부분에 오류가 뜨더라구요그럼 아예 처음에 프로그램들을 설치할 때 잘못설치해서 충돌했을 그런 가능성이 있단건가요??   

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

안녕하세요. 레딧사이트 프로젝트를 진행하기 앞서 올려주신 NextJS 강의를 먼저 들으려고 합니다.강의 듣는 순서가 부록(섹션11) 먼저 듣고 섹션10(13버전)을 들으면 될까요?아니면 섹션10만 들어도 괜찮을까요?

홈페이지에서 스크롤 시 콜백함수가 실행되는 과정에서 LOAD_POSTS_REQUEST dispatch 요청을 두 번 보내는 상황이 발생하였는데 해결하지 못해서 올립니다./pages/index.jsconst Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostLoading, retweetError } = useSelector((state) => state.post); useEffect(() => { if (retweetError) { alert(retweetError); } }, [retweetError]); useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !loadPostLoading) { console.log('스크롤 패칭'); const lastId = mainPosts[mainPosts.length - 1]?.id; console.log('lastId', lastId); dispatch({ type: LOAD_POSTS_REQUEST, lastId, }); } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); }; }, [hasMorePosts, loadPostLoading, mainPosts]); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); };sagas/post.jsfunction loadPostsAPI(lastId) { return axios.get(`/posts?lastId=${lastId || 0}`); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data, }); } catch (err) { yield put({ type: LOAD_POSTS_FAILURE, error: err.response.data, }); } } function* watchLoadPosts() { yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts); }reducers/post.jscase LOAD_POSTS_REQUEST: draft.loadPostLoading = true; draft.loadPostDone = false; draft.loadPostError = null; break; case LOAD_POSTS_SUCCESS: draft.loadPostLoading = false; draft.loadPostDone = true; draft.mainPosts = draft.mainPosts.concat(action.data); draft.hasMorePosts = action.data.length === 10; break; case LOAD_POSTS_FAILURE: draft.loadPostLoading = false; draft.loadPostError = action.error; break;첫 페이지 로딩 후에 스크롤 시 onScroll 함수의 '스크롤 패칭'이 콘솔에 두 번 찍히고 LOAD_POSTS_REQUEST 요청이 두 번 가는 것을 확인했고 처음 포스트들을 불러온 이후에 lastId가 0으로 요청이 보내져서 mainPosts에 중복된 게시물이 쌓이는 문제가 있습니다.

npm run dev를 하면  Object is not iterabled 이런 에러가 뜹니다제 코드는import React, { useState, useCallback } from "react"; import { Button, Form, Input } from "antd"; import Link from "next/link"; import styled from "styled-components"; import useInput from "../hooks/useInput"; const ButtonWrapper = styled.div` margin-top: 10px; `; const FormWrapper = styled(Form)` padding: 10px; `; const LoginForm = ({ setIsLoggedIn }) => { const [id, onChangeId] = useInput(""); const [password, setPassword] = useInput(""); const onSubmitForm = useCallback(() => { console.log(id, password); setIsLoggedIn(true); }, []); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} onChange={onChangeId} required /> </div> <div> <label htmlFor="user-id">비밀번호</label> <br /> <Input name="user-id" value={password} onChange={onChangePassword} required /> </div> <ButtonWrapper> <Button type="primary" htmlType="submit" loading={false}> 로그인 </Button> <Link href="/signup"> <a> <Button>회원가입</Button> </a> </Link> </ButtonWrapper> </FormWrapper> ); }; export default LoginForm; 이 부분이 문제라곤 하는데 어떻게 하나요?