173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
backend playground를 보고 작업하고 있으나 추가로 질문 드려야만 해결할 수 있는 부분이 있어 여쭤봅니다. loading 페이지에서 createPointTransactionOfLoading을 사용하여 이것을 complete 페이지에서 fetch해서 가져와야할 거 같은데 fetch 할 때 필요한 api를 모르겠어서 임시로 fetchPointTransactionsOfSelling로 했습니다. createPointTransactionOfLoading 부분에서 id는 사용자 아이디인데 impUid는 뭘 의미하나요? 회원가입 하면 id가 발급되는 것처럼 해당 api에서 자체적으로 발급되는 걸까요? amount가 포인트 양인 것 같아서 기존의 포인트에 포인트를 중첩하려면 loading과 complete에 동일한 api를 fetch해서 Selected를 더하는 게 맞나요? createPoint와 fetchPoint할 때 필요한 요소는 뭐가 더 있는지 궁금합니다. complete 페이지에서 'IPointTransaction[]' 형식에 'amount' 속성이 없습니다. 라고 뜨는데 어떻게 해결하나요? 작성한 코드입니다. complete ({data?.fetchPointTransactionsOfSelling.amount}에 amount 속성이 없다는 빨간 줄) import { gql, useQuery } from "@apollo/client" import type { IQuery, IQueryFetchPointTransactionsOfSellingArgs } from "../../../../src/commons/types/generated/types" const FETCH_POINT = gql` query { fetchPointTransactionsOfSelling { _id impUid amount } } ` export default function CompletePage():JSX.Element { const { data } = useQuery<Pick<IQuery,"fetchPointTransactionsOfSelling">,IQueryFetchPointTransactionsOfSellingArgs>(FETCH_POINT) return <>충전한 포인트는 {data?.fetchPointTransactionsOfSelling.amount}원</> } loading (Number(amount)에 이름 찾을 수 없다는 빨간 줄) import { gql, useQuery, useMutation } from "@apollo/client" import type { IQuery } from "../../../../src/commons/types/generated/types" import { loginCheck } from "../../../../src/components/commons/hocs/withAuth" import { useRouter } from "next/router" import type { ChangeEvent } from "react" import { useState } from "react" const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } ` const CREATE_POINT = gql` mutation createPointTransactionOfLoading($impUid:ID!){ createPointTransactionOfLoading(impUid:$impUid){ _id impUid amount } } ` declare const window: typeof globalThis & { IMP: any } function LoadingPage():JSX.Element { const router = useRouter() const { data } = useQuery<Pick<IQuery,"fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN) const [ myFunction ] = useMutation(CREATE_POINT) const selectList = [0,500,1000,2000,5000]; const [Selected, setSelected] = useState(0); const handleSelect = (e:ChangeEvent<HTMLSelectElement>):void => {setSelected(Number(e.target.value));}; const onClickPayment = ():void => { if (Selected === 0) { alert("금액을 선택해주세요."); return; } const IMP = window.IMP; IMP.init("imp27255777"); IMP.request_pay({ // param pg: "kakaopay", pay_method: "card", // merchant_uid: "ORD20180131-0000011", name: `Section 50-${Selected}원 결제`, amount: Selected, buyer_email: data?.fetchUserLoggedIn.email, buyer_name: data?.fetchUserLoggedIn.name, buyer_tel: "", buyer_addr: "", buyer_postcode: "", m_redirect_url:"" }, async (rsp:any) => { if (rsp.success === true) { await myFunction({ variables:{ impUid : data?.fetchUserLoggedIn._id, amount: Number(amount) + Selected } }) const {Modal} = await import("antd") Modal.success({content:"등록 성공"}) void router.push("/z_quiz/section50/complete") } else { alert("결제 실패") } }); } return (<> <div>{data?.fetchUserLoggedIn.name}님 환영합니다.</div> <select onChange={handleSelect} value={Selected}> {selectList.map((item) => ( <option value={item} key={item}>{item}</option> ))} </select> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" /> <script src="https://cdn.iamport.kr/v1/iamport.js" /> <button onClick={onClickPayment}>충전하기</button> </>) } export default loginCheck(LoadingPage); login 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" import { wrapFormAsync } from "../../../../src/commons/libraries/asyncFunc" 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("/z_quiz/section50/loading") } catch(error) { if (error instanceof Error ) alert(error.message) } } return ( <form onSubmit={wrapFormAsync(onClickLogin)}> 이메일: <input type="text" onChange={onChangeEmail} /> 비밀번호: <input type="password" onChange={onChangePassword} /> <button>로그인</button> </form> ) }
react node.js seo graphql next.js
현정
2023-08-11T03:46:02.405Z
댓글 1
좋아요 1
조회수 324
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
MyIcon으로 이모션을 통해 만들어도, 그냥 Antd에서 복사붙여넣기해서 프레그먼트안에 넣어도 같은 오류가 발생해요. 구글에 검색해도 해결방법이 나오지 않네요ㅠ
react node.js seo graphql next.js
준밍
2023-08-10T14:17:50.284Z
댓글 1
좋아요 0
조회수 310
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
제가 따로 하고 있는 next.js 프로젝트에는 이런 div가 없는데 혹시 없다면 문제가 있는건가요?
seo next.js vercel csr ssg ssr
박아무개
2023-08-10T13:18:46.509Z
댓글 1
좋아요 1
조회수 540
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
강의 파일을 열면 에러가 뜨는데 어떻게 해결하나요? ㅠㅠ
seo next.js vercel csr ssg ssr
박아무개
2023-08-10T09:32:04.179Z
댓글 1
좋아요 1
조회수 348
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 피그마에서 로그인부분에 이메일 찾기가 있는데, 플레이그라운드에 없는 것 같아서 문의 드립니다. 비밀번호는 resetUserPassword를 사용하면 될 것은데, 이메일찾기는 제가보기엔 보이지 않아서요!
react node.js seo graphql next.js
Logun
2023-08-10T03:09:39.910Z
댓글 1
좋아요 0
조회수 258
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Server Error Invariant 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 document This 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 } } ` -쿼리
react node.js seo graphql next.js
simple
2023-08-09T18:32:27.851Z
댓글 1
좋아요 0
조회수 463
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
라우팅을 넘어갈수가 없습니다 Application error: a client-side exception has occurred (see the browser console for more information). 이런 오류가 뜨네요
react node.js seo graphql next.js
2023-08-09T06:22:20.352Z
댓글 0
좋아요 0
조회수 450
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
퀴즈를 해결하려고 해당 코드를 작성했는데 로그인을 하려고 하면 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> </> ) }
react node.js seo graphql next.js
현정
2023-08-06T07:37:09.903Z
댓글 1
좋아요 0
조회수 399
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의의 중고마켓 포트폴리오를 만들고 있는 수강생입니다 해당 포트폴리오는 배포를 못한다고 알고 있는데, 배포링크 없는 프로젝트를 면접관이 안좋게 보지 않을지 걱정됩니다 (git소스코드와 함께 readme에 gif, 기타 설명은 첨부하려고 합니다) 그래서 다 수강한 후에 강의의 프로젝트와 함께, 배포까지 하는 새 프로젝트를 만들어볼까 생각중인데 이경우 파이어베이스나 node.js를 활용해서, 제가 직접 기본적인 백엔드만 구축하려고 하는 새 프로젝트가 취업에 도움이 될지 궁금합니다.. 비효율적인가 싶기도 하고요 아니면 다른 좋은 방법이 있을까요..?
react node.js seo graphql next.js
nana
2023-08-06T00:18:53.782Z
댓글 1
좋아요 0
조회수 404
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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로 설정시에는 서버 에러를 수신하게 되어 현재 연동이 어려운 상태입니다. 어떻게 해야 할까요?
react node.js seo graphql next.js
jskim75
2023-08-05T07:51:20.123Z
댓글 1
좋아요 0
조회수 563
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 선생님! 전에 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 데이터들만 안뜹니다...! + 로딩 뜬 화면의 개발자도구 화면 입니다!! 확인해주시고 답변 주시면 감사하겠습니다.!!!😂🥹
react node.js seo graphql next.js
nyang
2023-08-04T10:06:19.453Z
댓글 1
좋아요 0
조회수 402
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
저의 경우 '나만의 페이지'라고 하지 않고, my_page(소문자)로 해서 실행했는데, 안되더라구요.... 계속 왜 안되지 해메고 있었는데 my_page를 My_page(대문자)로 하니까 실행되는걸 확인했습니다. 혹시나 앞글자를 소문자로 하신분들은 대문자로 바꿔주시면 나올거 같아요~ 여기서 소문자로 import했을경우엔 왜 나오지 않을까요? react의 규칙인가요?
react node.js seo graphql next.js
유진환
2023-08-04T09:45:04.040Z
댓글 1
좋아요 0
조회수 319
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
프로젝트를 파이어베이스로 배포하려 yarn build 했는데 이런 오류가 뜨는데 도저히 어떤 오류인지 몰라서 글 남깁니다.. edit 페이지에서는 오류가 없는데 어떤 오류일까요.....
react node.js seo graphql next.js
임프런
2023-08-04T08:10:10.883Z
댓글 1
좋아요 0
조회수 310
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 섹션27 포트폴리오 제작에 문제가 있어서 질문 올립니다. 위 사진은 등록하기를 누르고 나면 나온 상세페이지 인데요, 다 하고나서 검토 한 뒤에도 varibales한 createBoardInput들만 확인 되지 않습니다.. 오타도 없고(혹시몰라서 선생님이 작성하신 코드(gql, try~catch부분)를 복사붙여넣기도 해보았습니다), package.json도 확인했고, app.js의 uri에도 문제가 없는데 어떻게 된걸까요.ㅠㅠ 아래는 추가 오류상세메시지 입니다 확인해주시고 답변해주시면 감사하겠습니다!! + 제 폴더를 복붙해서, 그 복붙한 폴더 안에 포트폴리오 자료인 선생님 폴더의 pages-boards 내의 [boardId]와 new의 index.js 를 복사해 붙여넣어봤는데(나머지 파일들은 냅둠) 같은 에러가 뜹니다. 그래서 ui와 container의 문제는 아닌 것 같아요.. 개발자도구 Sources탭에서 cteathttpLink의 currentFetch 부분에 오류가 뜨더라구요 그럼 아예 처음에 프로그램들을 설치할 때 잘못설치해서 충돌했을 그런 가능성이 있단건가요??
react node.js seo graphql next.js
nyang
2023-08-03T10:56:02.847Z
댓글 1
좋아요 0
조회수 527
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요, 혹시 똑같은사람이 다른 질문을 할 수 있는데여 그럼 그때는 어떻게 해당 답변을 판단할 수 있나여? 쿼리에서는 판단할수있는게 없는데요.... 이럴때는 어떻게 해야할지 모르겠습니다.. useditemQuestion._id 는 질문한 사람이 같기때문에 판단할수없고요... 그리고 useditemQuestionId는 어떤걸로 잡아야하나요 해당 detail 페이지의 상품을 id로 잡아야하나요? 아니면 판매자의 id를 잡아야하나요?
react node.js seo graphql next.js
donig1225
2023-08-02T12:14:48.700Z
댓글 1
좋아요 0
조회수 284
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
혹시 강의 중에 git clone 말씀하시는데, git 주소를 좀 알수 있을까요?
react node.js seo graphql next.js
tamo
2023-08-01T15:55:25.749Z
댓글 2
좋아요 1
조회수 438
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
선생님이 설명하신 것처럼 따라서 했는데 저장할 시 저절로 2칸 tab되는 기능이 안되는데 어디서 잘못된 지 알려주시면 감사하겠습니다.
react node.js seo graphql next.js
redbull1777
2023-08-01T11:04:05.340Z
댓글 1
좋아요 0
조회수 750
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
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}님 환영합니다!</>; }
react node.js seo graphql next.js
hwj9975
2023-08-01T09:22:32.576Z
댓글 4
좋아요 0
조회수 491
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
검색 해보니까 input태그에 자식을 넣어서 발생하는 에러라고 하는데 코드에는 input태그에 props를 넣은것 빼곤 그럴만한 에러사항이 없습니다. 무엇이 문제인가요..?ㅠ index.js import 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.js import { 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.js import styled from "@emotion/styled"; export const RedInput = styled.input` border-color: red; `; export const BlueButton = styled.input` background-color: blue; `;
react node.js seo graphql next.js
전현욱
2023-07-31T12:32:10.515Z
댓글 1
좋아요 0
조회수 329
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
어떤 부분때문에 이런 오류가 나는 걸까요? 이미지 등록 버튼을 눌러서 파일 선택하면 이 오류 메세지가 뜹니다.
react node.js seo graphql next.js
suny_fun
2023-07-28T14:35:53.364Z
댓글 2
좋아요 0
조회수 507
