import React, { useState, MouseEvent } from "react"; import * as S from "./mypoint.index.styles"; import TapPointLoading from "./mypoint_loading"; import TapPointBuying from "./mypoint_buying"; import TapPointAll from "./mypoint_all"; import TapPointSelling from "./mypoint_selling"; export default function MyPoint(): JSX.Element { const [selectedValue, setSelectedValue] = useState<{ name: string; index: number; }>({ name: "전체내역", index: 0, }); const MyPageHeadInfoButton = [ { name: "전체내역", component: <TapPointAll /> }, { name: "충전내역", component: <TapPointLoading /> }, { name: "구매내역", component: <TapPointBuying /> }, { name: "판매내역", component: <TapPointSelling /> }, ]; const onClickTap = ( event: MouseEvent<HTMLDivElement>, index: number ): void => { const newValue = event.currentTarget.id; setSelectedValue({ name: newValue, index, }); }; // 버튼 클릭으로 해당 data 값을 보여주기 위함 const renderData = (): JSX.Element | undefined => { return ( <S.TableWrap> {/* 해당 탭의 배열의 객체 name통해 컴포넌트 가져옴 */} {MyPageHeadInfoButton.map((el) => { if (el.name === selectedValue.name && el.component) { return <div key={el.name}>{el.component}</div>; } return null; })} </S.TableWrap> ); }; return ( <S.Wrap> <S.MyPageHeadWrap> <S.MyPageHeadBtn> {/* 서브 탭 버튼 */} {MyPageHeadInfoButton.map((el, index) => ( <S.MyPageInfoBtn key={el.name} id={el.name} onClick={(event) => onClickTap(event, index)} selected={selectedValue.name === el.name} > {el.name} </S.MyPageInfoBtn> ))} </S.MyPageHeadBtn> </S.MyPageHeadWrap> <S.MyPageBodyWrap> {/* 해당 탭 data */} <div>{renderData()}</div> </S.MyPageBodyWrap> </S.Wrap> ); } 이렇게 탭을 클릭을 해서 해당 컴포넌트가 보이도록 했습니다. 그러면서 각각의 API data도 받아와 cache에 저장을 하도록 해 추가 API 요청이 일어나지 않도록 했는데 여기서 로그아웃을 하고 다른 아이디로 로그인을 하면 이전의 로그인 했던 data가 그대로 남아있어 최신 data를 가져오기 위해 여러가지 방법으로 시도했습니다. 로그아웃 시 useApolloClient를 활용해 cache를 삭제 했습니다. 이렇게 하면 다시 로그인 한 유저의 data를 잘 가져오는데 로그아웃을 하면서 cache data가 삭제되니 다른 API, Board, Markets 등 해당 page의 사용한 query문의 data를 다시 요청하는 문제가 있습니다. refetch()로 query문을 선언하면 해당 refetch()를 실행하지 않아도 API 요청이 일어나 refetchQueries를 사용해 data 최신화 하려는데 그렇게 되면 모든 탭을 refetch 해줘야 되는 문제가 있습니다. 각 탭 이동마다 API 요청 나가는게 싫어서 fetchporicy나 refetch()를 사용 하지 않았는데 보통 어떻게 사용을 하나요? 로그인에 의한 data는 탭 이동마다 refetch를 시켜주는게 좋을까요? 그리고 구매, 충전 등 하면 바로 MyPoint에 업데이트 되도록 client.writeQuery / readQeury 나 refetchQueries를 사용했는데 이런 결제 정보 같은거는 refetch로 실시간으로 data를 가져오는게 좋겠죠? 로그인, 로그아웃은 LayoutHeader에서 사용하고 있습니다.
플레이 그라운드에 정보를 넣는데 이게 왜 오류가 뜨는지 모르겠어요. 분명 몇 주전에는 된 내용을 복사 붙이기로 몇십번 시도해도 안됩니다. 그리고 '섹션 04'부터 api 요청하는 부분 다 안돼요. 뭘 잘못했는지 모르겠습니다. 코드만 몇십번 확인하고, 다시 강의 재생해서 봤는데도 Api 요청에만 문제가 있습니다. 다른 섹션들도 'api 요청 부분' 만 아무리 클릭해도 맨 마지막 이미지와 같이 아무것도 안떠요. 구글에서 하라는대로 캐시도 다 지웠고, 확장프로그램도 지우고를 여러 번 했음에도 안됩니다. apollo/client 버전은 3.11.1입니다. api 요청만 다 실패해서 몇주째 잡고 있는데...너무 답답해요.
인강듣기전에 학습자료를 보고 먼저 따라했는데요. 인강에선 <main> 이부분을 삭제를 안했는데, 학습자료에선 main을 다 삭제 했더라구요. 이부분에서 학습자료를 참고해도 될까요? 아님 다시 복구 해야하나요? 이 부분 뿐만아니라 인강에서는 삭제를 안했는데, 학습자료에선 삭제된 부분이 꽤 있어서 걱정이 되어 문의를 드립니다.
FetchBoardsCount는 search를 입력 받아 검색 결과에 대한 개수를 가져오는데 FetchUsedItemsISold는 내가 등록한 상품에 대한 전체 개수만 반환하고 있어 검색 결과에 대한 page 개수를 가져오지 못해 pagination에 검색 결과가 1개여도 내가 등록한 상품의 전체 개수를 한 page가 표시 됩니다. 검색 결과에 대한 refetch를 게시글이 없을 때까지 해주고 그걸 토대로 page 구성하기는 아닌 것 같아서 API의 search의 Count에 의존 하지 않고 page를 해결할 수 있는 방법이 있을까요?
코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다. 하지만 위 이미지 처럼 에러가 발생합니다. package.json 은 아래와 같습니다. node_modules 는 아래와 같습니다. 설치됨을 다 확인하였으나 인식을 못하네요. tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다. 이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?
ec2 터미널에서 node를 14버전으로 설치 후에 강의대로 따라가는 중인데요 git clone해와서 yarn install시에 node의 버전이 맞지 않아서 설치가 안되고 있습니다 ec2의 node 버전을 업그레이드하면 /lib64/libm.so.6: version GLIBC_2.27 not found(required by node) 가 뜨면서 ec2의 버전이 맞지 않는거같고 14버전으로 진행하면 설치한 프로젝트의 버전이 달라서 안되는데 class_build의 버전은 이런데 react의 버전을 바꿔야 해결되는걸까요? "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.5" }
위의 내용은 강의 캡쳐본입니다. 이렇게 코드짜면 기존 값에서 변경된 부분은 수정이 반영이 되겠지만 기존값 삭제에 대해서는 반영이 안됩니다. if(writer) ~ 이런식으로 코드를 작성하셨는데 writer의 값이 존재해야만 myvariables의 writer에 값이 들어가고 해당 배열이 updateBoard로 들어가서 업데이트 뮤테이션이 실행되는 구조입니다. 수정 기능이라면 빈값 수정도 가능해야하는데 이런식으로 코드를 짜지는 않겠죠. 인프런에서도 가격대가 있는 강의 인데 내용이 너무나 부실합니다. 차라리 디폴트값을 undefined로 셋팅하고 이런식으로 조건문 작성하는게 맞지 않나 싶습니다. 빈값에 대해서도 반영이 되는 더 좋은 방식이 있다면 알려주셨으면 좋겠습니다. (추가로 onChange는 드래그 삭제에 대해서는 아예 감지가 안되는 부분이라 onInput을 이용하였습니다.) 위의 내용 관련해서 노원두 강사님의 입장이 궁금합니다. 강의가 부실한건지 뭔지 모르겠네요. 추가로 https://www.inflearn.com/questions/1324853/section11-%ED%8F%AC%ED%8F%B4%EB%A6%AC%EB%B7%B0-%EB%82%B4%EC%9A%A9-%EB%B6%80%EC%8B%A4%ED%95%9C%EB%93%AF-%ED%95%A9%EB%8B%88%EB%8B%A4-github%EC%97%90-%EC%82%AD%EC%A0%9C%EC%BF%BC%EB%A6%AC-%EC%A1%B0%EC%B0%A8-%EC%97%86%EC%9D%8C 해당 글의 답변은 회피하시고 다른 질문에 대해서만 답변하시던데 어디로 연락드려야 소통이 가능할까요?
안녕하세요! 강사님! 우선 훌륭한 강의, 진짜 감사드립니다! 완강 후 필요한 부분은 다시 찾아보고 있는데, 처음 봤을 때도, 다시 볼 때도 이해가 쉽게 될 수 있도록 알려주시려는 게 느껴져요. 그래서 도움이 많이 되었습니다! 강사님 덕분에 자신감이 엄청 생겨서, 개발에 더 큰 흥미가 생겼어요! 늘 감사합니다. 제가 이번에 복습 겸 학습에 활용되었던 프로젝트를 다시 만들어보려고 하는데, next버전 관련하여 질문이 있습니다. 강의에는 next 12버전으로 실습했는데, 실무에서 12버전이 많이 쓰이나요? 버전 12에서 더 공부를 해야 할지, (강의를 듣는 동안 못 따라간 부분은 거의 없으나, 익숙하진 않은 것 같아서 학습이 더 필요한 것 같아요! ) 아니면 현재 강사님께 배운 것을 토대로 앞으로 진행하는 프로젝트는 버전을 높여야 할지 고민이 됩니다.
import { UpCircleOutlined } from "@ant-design/icons"; export default function LibraryIconPage() { return ( <> <UpCircleOutlined /> </> ); } ant-design/icons 5.0.1 버전 다운로드 받고 실행하니까 이런 에러가 뜨는데 어떤 문제일까요..?
