강의 끝부분에 퀴즈로 디바운싱 퀴즈가 나와서 코드를 짰긴했는데,, 레퍼런스가 없어서 제가 짠 코드가 맞는지 알고싶습니다..!아래는 강의 후 추가한 코드입니다. const getDebounce = _.debounce(async (boardId) => { await client.query({ query: FETCH_BOARD, variables: { boardId }, }); }, 500); const prefetchBoard = (boardId: string) => async () => { // await getDebounce(boardId); };개발자 도구에서 네트워크 확인결과 0.5초 뒤에 패치를 하는걸로 확인이 되긴 합니다만..제가 올바르게 짠건가요?

안녕하세요 section09 퀴즈에서 Ant-design Date picker 를 사용하는 과정에서 질문이 생겨 여쭤봅니다. import { DatePicker} from 'antd'; import type { DatePickerProps } from 'antd'; import { useState } from 'react'; export default function AndDesignPage() { const [date, setDate] = useState(''); const [month, setMonth] = useState(''); const onChange: DatePickerProps['onChange'] = (date, dateString) => { console.log(date); setDate(dateString); setMonth(date?.$M + 1);👈👈👈 1️⃣ }; return ( <> <h1>Q2. DatePicker</h1> <span> <DatePicker onChange={onChange} />👈👈👈 2️⃣ </span> {month && ( <> <p>선택날짜 : {date}</p> <p>{month}월을 선택하셨습니다.</p> </> )} </> ); } 전체 코드는 위와 같고 1️⃣,2️⃣번에 빨간 줄이 쳐졌습니다. 1️⃣번은 아래와 같은 메세지가 뜹니다.console.log(date)를 했을 때 아래와 같이 콘솔이 나와서 $M을 활용했는데 작동도 잘 되고 콘솔메세지에도 따로 에러가 뜨지는 않습니다.  2️⃣번은 아래와 같은 문제입니다에러메세지 전문은 다음과 같습니다.(alias) const DatePicker: PickerComponentClass<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, unknown> & { WeekPicker: import("./generatePicker/interface").PickerComponentClass<Omit<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, "picker">, unknown>; MonthPicker: import("./generatePicker/interface").PickerComponentClass<Omit<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, "picker">, unknown>; YearPicker: import("./generatePicker/interface").PickerComponentClass<Omit<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, "picker">, unknown>; RangePicker: import("./generatePicker/interface").PickerComponentClass<BaseRangePickerProps<Dayjs> & { dropdownClassName?: string | undefined; popupClassName?: string | undefined; }, unknown>; TimePicker: import("./generatePicker/interface").PickerComponentClass<Omit<Omit<import("rc-picker/lib/Picker").PickerTimeProps<Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components" | "hourStep"> & { locale ... import DatePicker 'DatePicker' cannot be used as a JSX component. Its instance type 'Component<PickerProps<Dayjs> & { status?: "" | "warning" | "error" | undefined; hashId?: string | undefined; popupClassName?: string | undefined; rootClassName?: string | undefined; }, unknown, any> & CommonPickerMethods' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/Users/bible/Bible_Highting/codecamp-frontend-bible/class_quiz/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.ts(2786) 1️⃣,2️⃣번 모두 작동에는 이상이 없으나 빨간줄의 원인과 해결방법을 알고싶어 질문드립니다. 감사합니다!

강의를 보고 똑같이 따라했지만 저는 result에 타입이 unknown이라고 뜨네요. 이때문인지는 모르겠지만 로그인 후 넘어간 페이지에서 버튼 누르는 과정에서 오류가 뜹니다.ㅜ아래는 아폴로 세팅입니다. 문제가 무엇일까요?import { ApolloClient, ApolloLink, ApolloProvider, fromPromise, InMemoryCache, } from "@apollo/client"; import { onError } from "@apollo/client/link/error"; import { createUploadLink } from "apollo-upload-client"; import { useEffect } from "react"; import { useRecoilState } from "recoil"; import { getAccessToken } from "../../../commons/libraries/getAccessToken"; import { accessTokenState } from "../../../commons/store"; const GLOBAL_STATE = new InMemoryCache(); interface IApolloSettingProps { children: JSX.Element; } export default function ApolloSetting(props: IApolloSettingProps) { const [accessToken, setAccessToken] = useRecoilState(accessTokenState); // 3. 프리랜더링 무시 - useEffect useEffect(() => { console.log("지금은 브라우저다"); const result = localStorage.getItem("accessToken"); console.log(result); if (result) setAccessToken(result); }, []); // 에러를 캐치하고 캐치한 에러가 토큰만료면 재발급 받은 후, 기존의 쿼리를 포워드해서 다시 날려준다. const errorLink = onError(({ graphQLErrors, operation, forward }) => { // 1-1. 에러를 캐치 if (graphQLErrors) { for (const err of graphQLErrors) { // 1-2. 해당 에러가 토큰만료 에러인지 체크(UNAUTHENTICATED) if (err.extensions.code === "UNAUTHENTICATED") { return fromPromise( // 2-1. refreshToken으로 accessToken을 재발급 getAccessToken().then((newAccessToken) => { // 2-2. 재발급 받은 accessToken 저장하기 setAccessToken(newAccessToken); // 3-1. 재발급 받은 accessToken으로 방금 실패한 쿼리의 정보 수정하기 if (typeof newAccessToken !== "string") return; operation.setContext({ headers: { ...operation.getContext().headers, // 만료된 토큰이 추가되어 있는 상태 Authorization: `Bearer ${newAccessToken}`, // 토큰만 새것으로 바꿔치기 }, }); }) ).flatMap(() => forward(operation)); // 3-2. 방금 수정한 쿼리 재요청하기 } } } }); const uploadLink = createUploadLink({ uri: "https://backendonline.codebootcamp.co.kr/graphql", // https 로 변경(토큰 정보를 쿠키에 담을 수 있게) headers: { Authorization: `Bearer ${accessToken}` }, credentials: "include", // https 변경으로 추가된 조건 }); const client = new ApolloClient({ link: ApolloLink.from([errorLink, uploadLink as unknown as ApolloLink]), // cache: new InMemoryCache(), cache: GLOBAL_STATE, }); // prettier-ignore // 주석으로 prettier-ignore 해주면 한줄로 바뀌는걸 막아준다 return <ApolloProvider client={client}> {props.children} </ApolloProvider>; }혹시 이부분때문일까요??link: ApolloLink.from([errorLink, uploadLink as unknown as ApolloLink])

여기서 isEdit는 변수인건가요..? vscode에서는 속성이라고 뜨는데 뭔지 헷갈려요..

안녕하세요 멘토님항상 강의 잘 듣고 있습니다.좀 사소한 질문일 수도 있으나, 알고 싶은 부분이라 질문 글을 쓰게 되었습니다.타입스크립트의 generic 강의 1:06:10 쯤 섹션 수업 내용 요약해주실 때 container를 가급적 최소한 사용하라고 말씀하신 부분에서 궁금한게 있습니다.예를 들어보자면, 게시글 작성 컴포넌트 폴더에서만약 기존에는 container-persenter 방식으로 만들어놨다가BoardWrite.container.tsxBoardWrite.presenter.tsxBoardWRite.queries.ts...이렇게 리스트가 있는 상태에서React-hook-form 이나 custom-hook을 사용하여 리팩토링을 하고나서 container의 내용이 거의 확 줄게되면 container 파일의 코드를 presenter랑 합치고 container 파일은 삭제하는게 좋다 라는 말씀이실까요?그렇다면 리팩토링후 container 파일을 삭제하고 presenter에 합쳤다고 가정할 경우BoardWrite.presenter.tsxBoardWRite.queries.ts...이렇게 남게 되는데요 그러면 BoardWrite.presenter.tsx 라는 파일 명을 presenter로 그대로 둬도 상관없는지, 현업에서도 container가 따로 없어도 presenter라는 파일 명으로 보편적으로 놔두는지 궁금합니다.그리고 container와 presenter를 보편적으로 합치는 기준이 둘을 합쳐도 70~80줄 이내일 경우에 합치는 것인지도 궁금합니다. 감사합니다.

 안녕하세요. 수업 잘 듣고 있습니다. 중고마켓 포토폴리오 과정에서 질문이 있습니다. 캐시를 충전하고 받은 rsp 인자로 받은 데이터들을 활용해서 createPointTransactionOfLoading 뮤테이션을 만드는게 맞나요? 받은 데이터들 사용해서 impUid를 넣어봐도 잘 안되네요포인트를 충전하고, 그 데이터들로 어떤 뮤테이션을 보내고, 어떤 쿼리를 받아야하는거죠..?

레퍼런스 코드 파일 실행시켜봤는데 컴포넌트 정렬이 안맞습니다.무슨 이유인지를 못찾겠습니다..

CRA 환경에서는 클라이언트 사이드로 렌더링 되는건데요NEXTJS에서 서버사이드렌더링 없이 CRA처럼 CRS만으로도 구현할수 있나요?이럴 경우에는 getStaticPros, getServerSideRedering 을 사용안하면 무조건 CRS가 되는건가요?seo 적용안하고 CRS로 하고 싶을 경우 강의에서 말씀하신 [_app] 에 next-seo를 추가하지 않고 getStaticPros, getServerSideRedering 없이 그냥 작업하면 모든 페이지가 CRS가 되는거죠 ?그런데 루트에 [_app], [_document] 이 파일은 무조건 실행이 되더라구요이것의 정체는 무엇인지 궁금합니다 CRS인데 NEXT를 사용하려는 이유가 첫번째, 사이트를 만들때 사용자페이지, 관리자페이지 구분을 두고 사용자페이지는 SSR , 관리자페이지는 CSR을 적용하려고 하고 두번째, 코드스프리팅이 지정해줄 필요없이 자동적으로 모두 되어 있어서  NEXTJS를 사용하려고 합니다

 안녕하세요. 강의를 진행하는데 서버가 죽은것같아 직접 배열을 만들어서 예제를 진행중입니다.그런데 자꾸 문제가 생기네요,,첫번째 클릭에서는 객체가 localStorage에 저장이 되는데 그 이후부터 진행이 안됩니다. 이유가 무엇일까요,,이모션 부분은 제외하고 전달드립니다ㅜ import styled from "@emotion/styled"; import { Modal } from "antd"; interface IBasketsProps { id: number; writer: string; product: string; price: number; } const myBasket = [ { id: 100, writer: "짱구", product: "액션가면 인형", price: 30000 }, { id: 200, writer: "철수", product: "과외", price: 40000 }, { id: 300, writer: "훈이", product: "도시락", price: 50000 }, { id: 400, writer: "맹구", product: "시냇물 돌", price: 2000000 }, ]; export default function BasketHomework() { const onClickBtn = (basket: IBasketsProps) => () => { const baskets: IBasketsProps[] = JSON.parse( localStorage.getItem("baskets") ?? "[]" ); console.log(baskets); const alreadyIn = baskets.filter((el) => el.id === basket.id); if (alreadyIn.length === 1) { Modal.warning({ content: "이미 찜한 상품입니다." }); return; } baskets.push(basket); localStorage.setItem("baskets", JSON.stringify(basket)); }; return ( <> <CardWrapper> {myBasket.map((el, index) => ( <Card key={index}> <Product>{el.product}</Product> <Writer>{el.writer}</Writer> <Price>{el.price}</Price> <button onClick={onClickBtn(el)}>장바구니 담기</button> </Card> ))} </CardWrapper> </> ); }  

 포트폴리오 리뷰 - container/presenter 파일 분리레퍼런스 코드를 클론후 빌드했을때http://localhost:3000/boards 페이지 접근시우측 날짜 시간쪽이 겹쳐서 나오는 것 같습니다.단순 CSS 문제라고 보면 되나요?  

배포에서 대표적인 클라우드 서비스로 AWS, GCP, Azure 를 알려주셨는데요혹시 파이어베이스도 같은 묶음으로 봐도 될까요?? 파이어베이스는 AWS처럼 사용할 수 없나요??파이어베이스는 DB, 서버 용으로만 배우는게 좋을까요??

 안녕하세요 createBoardComment 만들려고 mutation CreateBoardCommet doc을 보고 하고 있는데createBoardCommentInput과 boardId:ID! 를 두개다 써야되는데 어떻게 해야 되는지 알수 있을까요? 또한 밑에 createBoardComment도 필요하다 하는데 어떻게 써야되는건가요?감사합니다

안녕하세요 멘토님.항상 좋은 강의 잘 보고 있습니다. HOC와 권한분기 실습 까지 수강을 마치고 궁금한 점이 생겨 질문 드립니다.페이지로 이동 시 HOC를 먼저 실행하여 로그인을 체크하는 방식은 이해했습니다.그런데, 간혹 어떤 특정 게시판 사이트에 비로그인 상태에서 댓글 작성을 한다고 가정할 때인풋창이나 등록 버튼을 누르면 '로그인 후 이용해주세요' 라는 알럿을 띄워주는 경우가 있습니다. (페이지 이동이 아닌 단순 엘리먼트 클릭)이러한 경우에는 그냥 단순히 인풋이나 등록 버튼 등 엘리먼트를 클릭 했을 때 토큰이 있는지 if 검증을 하는 로직만 넣으면 되는 것인지 궁금합니다.그리고 댓글 리스트 수정과 같은 상황에서 댓글 리스트에서 댓글 하나를 수정 버튼 눌렀을 때, 비로그인 유저를 감지하여 알럿을 띄워주고 싶은 경우도 궁금합니다. 이런 경우는 보통 이전 수업 때 배웠듯이 map을 사용하여 댓글 수정 컴포넌트를 반복문으로 뿌려주는 형태로 사용을 합니다. 그렇다면 이 댓글 수정 컴포넌트를 export 하는 과정에서 HOC를 씌워주는게 맞는 것인지, 아니면 그냥 또 단순히 수정 버튼 클릭 시 if 검증을 통해 토큰 존재 여부만 파악하면 되는지 궁금합니다. 감사합니다.

 파이어베이스에서 업데이트나 삭제를 할때 그 문서의 id?(위의 사진의 글자)를 가져와서 변경을 해줘야하잖아요그런데 저 id를 어떻게 데이터와 함께 가져오는거죠..? const [boardsData, setBoardsData] = useState<DocumentData[]>([]); const [boardId, setBoardId] = useState<string[]>([]); const onClickShowBoards = async () => { const myBoard = collection(getFirestore(firebaseApp), "MyBoard"); const result = await getDocs(myBoard); const data = result.docs.map((el) => el.data()); setBoardsData(data); const dataId = result.docs.map((el) => el.id); setBoardId(dataId); }; 위와같이 배열을 생성해서 각각의 아이디를 불러오긴했는데 어떻게 연결시킬지 모르겠네요ㅜ

typesciprt 였나 antd 였나 설치하고 부터 자주 밑에 그림처럼 뜨네요. 구글링으로 ctrl + f8로 일시적으로 문제를 해결할 수 있었으나 계속 오류가 반복되어 질문드립니다.혹시 어떤 부분에서 잘못 되었을지 ... 알수있을까요밑에 부분은 소스에서 빨간줄 뜨는 부분입니다.추가로 이런 오류도 자주 뜹니다 ...

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 강의 잘 보고 있습니다.여러 아이콘을 저장해놨다가 사용하는 방법도 있는데스프라이트 이미지를 사용하시는 이유가 궁금합니다.

import { useQuery } from "@apollo/client" import {useState} from 'react' import {useRouter} from "next/router" import {Fetch_List} from './BoardList.query' import BulletinBoardListUI from './BoardList.presenter' export default function BulletinBoardListFetch(){ const [page,setPage]=useState(1) const router = useRouter() const{data}=useQuery(Fetch_List,{ variables:{ page } }) function MoveIndex(){ console.log("dfgd") return true } return( <BulletinBoardListUI MoveIndex={MoveIndex}/> ) }  import * as S from './BoardList.style' export default function BulletinBoardListUI(props){ console.log(props) return( <S.TableWraper> <S.TableTop> <S.ColumnHeaderBasic>번호</S.ColumnHeaderBasic> <S.ColumnHeaderTitle>제목</S.ColumnHeaderTitle> <S.ColumnHeaderWriter>작성자</S.ColumnHeaderWriter> <S.ColumnHeaderDate>날짜</S.ColumnHeaderDate> </S.TableTop> {props.data?.fetchBoards?.map( (el,i)=>{ i++ return(<S.Column key={el._id}> <S.RowNum>{i}</S.RowNum> <S.RowTitle onClick={props.MoveIndex}>{el.title}</S.RowTitle> <S.RowWriter>{el.writer}</S.RowWriter> <S.RowDate>{el.createdAt.substring(0,10)}</S.RowDate> </S.Column> )})} </S.TableWraper> ) } props.MoveIndex가 실행이 안돼요...

일단 강의 잘 보고 있습니다.제 학습 수준이 아직 낮아서, 더이상 진도는 안나가고 있고 다시 리액트를 좀 복습중입니다.ㅎㅎ저도 언능 수준이 올라가서, 박용주님처럼 이것저것 만들어보고 싶네요. 최종 목표는 웹게임을 만들어보는겁니다.ㅎㅎ아무튼. 질문이 하나 있는데요~혹시 next.js로 개발을 할 때 Redux는 잘 사용 안하나요?리액트 배우면서 redux를 아주 중요하게 다루는것 같은데, next.js강의는 여러곳을 돌아다녀 봐도redux에 대해서는 안가르치는것같더라구요. 리액트에서 당연히 배워왔을 소양이라서 커리큘럼에 없는건지, 아니면 next.js에서는 redux는 잘 사용 안하는건지 궁금합니다! 

안녕하세요 강의시작마다 브랜치가 나오는데, 깃헙주소 알 수 있을까요?감사합니다.1-2 브랜치 1-4 브랜치가 어디에 있는지 알 수 있을까요?강의 중간중간 보시면 git checkout 하시는 것으로 보아 github주소가 있는 것 같습니다. github 주소 공유해부탁드립니다. 감사합니다.

 포트폴리오 과제에서 주셨던 무한 스크롤 리뷰가 오늘 강의에선 없네요! 혹시 이유가 있는걸까요?!그리고 백앤드에 하나의 게시판에 달려있는 댓글 갯수를 가져오는 api가 따로 없던데 퀴즈처럼 무한스크롤을 직접구현하는 건가요?