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의 규칙인가요?
안녕하세요! 섹션27 포트폴리오 제작에 문제가 있어서 질문 올립니다. 위 사진은 등록하기를 누르고 나면 나온 상세페이지 인데요, 다 하고나서 검토 한 뒤에도 varibales한 createBoardInput들만 확인 되지 않습니다.. 오타도 없고(혹시몰라서 선생님이 작성하신 코드(gql, try~catch부분)를 복사붙여넣기도 해보았습니다), package.json도 확인했고, app.js의 uri에도 문제가 없는데 어떻게 된걸까요.ㅠㅠ 아래는 추가 오류상세메시지 입니다 확인해주시고 답변해주시면 감사하겠습니다!! + 제 폴더를 복붙해서, 그 복붙한 폴더 안에 포트폴리오 자료인 선생님 폴더의 pages-boards 내의 [boardId]와 new의 index.js 를 복사해 붙여넣어봤는데(나머지 파일들은 냅둠) 같은 에러가 뜹니다. 그래서 ui와 container의 문제는 아닌 것 같아요.. 개발자도구 Sources탭에서 cteathttpLink의 currentFetch 부분에 오류가 뜨더라구요 그럼 아예 처음에 프로그램들을 설치할 때 잘못설치해서 충돌했을 그런 가능성이 있단건가요??
강사님 안녕하세요, 혹시 똑같은사람이 다른 질문을 할 수 있는데여 그럼 그때는 어떻게 해당 답변을 판단할 수 있나여? 쿼리에서는 판단할수있는게 없는데요.... 이럴때는 어떻게 해야할지 모르겠습니다.. useditemQuestion._id 는 질문한 사람이 같기때문에 판단할수없고요... 그리고 useditemQuestionId는 어떤걸로 잡아야하나요 해당 detail 페이지의 상품을 id로 잡아야하나요? 아니면 판매자의 id를 잡아야하나요?
넥스트 서버사이드렌더링 까지 다한상태인데 getStaticProps는 정말 빨리 넘어갑니다 하지만 getServerSideProps으로 만든 페이지는 정말 3초? 이상 걸립니다. 서버도 다 한국으로 시작했고 GCP 쓰고 있습니다 서버속도 문제가 아니라면 속도를 줄일수있는방법이 머가있을까요.. ㅜㅜ build 시에 페이지 용량도 높지 않습니다. 정적페이지랑 차이도 별루 없구요 ㅜㅠ 2.back 에서 데이터를 가져올 때 시간이 많이 걸리는거 같은데 페이지 이동이라도 빠르게 진행하고 그다음 데이터를 불러오는 방법을 어떻게 깔삼하게 구현할 수 있을까요..
안녕하세요! 강사님 강의를 끝까지 다 수강하였습니다. 너무 도움이 많이 되었습니다. 감사합니다. 부동산 매물 강의에 대한 공지를 보고 메일로 문의 드렸는데 아직 피드백이 오지 않아 이렇게 질문글로 문의를 드리게 되었습니다! 메일 문의 한 번만 확인 부탁드립니다. 감사합니다!
안녕하세요!! 수업 잘듣고있습니다. 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>
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
제가 코드를 한 번에 입력하지 않고 나눠서 강의를 봐서 놓친 것일 수도 있는데.. @Entity("votes")를 입력하면 제일 위쪽에 자동으로 import {Entity} from "typeorm" 등의 코드가 강의에서는 생기던데 혹시 import 코드가 자동으로 생성되지 않는 이유는 무엇일까요?
