올해는 강의 업데이트 계획이 없나요?

 리액트 설치 후 강의 수강 중인데 저렇게 자꾸 "antd"를 찾을 수 없다고 오류가 생겨서, 문제점과 해결법을 알고 싶습니다ㅜ

이렇게 초기값을 설정 해주지 않았을 때, 하나의 항목만 수정하고 수정하기 버튼을 누르면 다른 항목들은 그 전 내용 그대로 띄워졌는데 그 이유가 궁금해요 !굳이 boards 수정 2편에서 한 방법이 아니더라도 이렇게 하면 문제가 되는 걸까요 ? 초기값을 설정 안해주면 안되는 이유가 있나요 ㅜㅜ강사님께서 그냥 여기 초기값을 "" 빈문자열로 바꾸고 다시 실행하시기만 하셔서 왜 이 방법을 쓰면 안되는지, boards 수정 2편의 방법과는 무슨 차이가 있는지 잘 모르겠습니다 ..!

package.json "dependencies": { "@ant-design/icons": "^5.0.1",위와 같이 수정 후 yarn.lock, node_modules 삭제 - yarn install 하여 재 설치 하여도 아래와 같이 err 문구는 사라지지 않았으며 yarn dev를 통해 웹페이지 확인 하면 정상적으로 icon은 출력됩니다.icon = 정상 출력 되나 코드상 error 문구는 삭제되지 않습니다.VS code 를 재시작 하여도code_modules 등 삭제 후 재설치 3~4번 하여도 동일합니다. yarn.lock 첨부합니다."@ant-design/icons-svg@^4.3.0": version "4.3.2" resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.3.2.tgz#ab2e082991877fdc85b2b32f0b68628b716bad23" integrity sha512-s9WV19cXTC/Tux/XpDru/rCfPZQhGaho36B+9RrN1v5YsaKmE6dJ+fq6LQnXVBVYjzkqykEEK+1XG+SYiottTQ== "@ant-design/icons@^4.8.1": version "4.8.1" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.8.1.tgz#44f6c81f609811d68d48a123eb5dcc477f8fbcb7" integrity sha512-JRAuiqllnMsiZIO8OvBOeFconprC3cnMpJ9MvXrHh+H5co9rlg8/aSHQfLf5jKKe18lUgRaIwC2pz8YxH9VuCA== dependencies: "@ant-design/colors" "^6.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" lodash "^4.17.15" rc-util "^5.9.4" "@ant-design/icons@^5.0.1": version "5.2.6" resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-5.2.6.tgz#2d4a9a37f531eb2a20cebec01d6fb69cf593900d" integrity sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw== dependencies: "@ant-design/colors" "^7.0.0" "@ant-design/icons-svg" "^4.3.0" "@babel/runtime" "^7.11.2" classnames "^2.2.6" rc-util "^5.31.1"

SyntaxError: Cannot use import statement outside a module 오류가 발생하는데 boards에서 수정하기, 상세페이지를 들어갈 때는 문제가 없다가 수정하기, 상세페이지 안에서 f5를 누르면 위와 같은 오류가 발생했습니다. 어떤게 문제인지 알려주시면 감사하겠습니다.

AntDesign만 사용하면 SyntaxError: Cannot use import statement outside a module 에러가 나옵니다.구글링 해서 package.json에 "type":"module"을 작성하면 된다고 하는데 작성하면 ReferenceError: module is not defined in ES module scope 에러가 나옵니다어떻게 해결하면 좋을까요?

이 부분 에러 어떻게 고치나요?export const firebaseApp = initializeApp(firebaseConfig, "appname") 하니까 위에 오류는 안뜨는데 이 방법이 맞나요?저 방법으로 수정하면이 오류가 뜹니다 ㅠ

크롬 개발자 도구에서 페이로드 확인을 하면 fetchBoards가 두번 요청을 합니다.시작점을 확인을 해보면 createUploadLink.js에서 빈 값으로 요청을 하고두 번째 요청에서는 제대로 index.tsx에서 값을 넣고 refetch를 진행을 합니다.fetchBoards가 1,3번 이고 fetchBoardsCount가 2번 입니다. 사용하는데 있어 아무런 문제 없이 사용이 가능한데 왜 이런 현상이 있는지 해결을 하고 싶습니다. 첫 마운트가 되거나 API요청을 하면 불필요한 fetchBoards, fetchBoardsCount가 createUploadLink.js에서 요청이 가는데ApolloClient Setting 부분에서 요청이 가는 걸 확인 했습니다.const uploadLink = createUploadLink({ uri: "http://backend-practice.codebootcamp.co.kr/graphql", }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: new InMemoryCache(), }); refetch하는 전체 코드입니다.// test - refetch 문제 export default function Hom(): JSX.Element { const { data, refetch } = useQueryFetchBoards(); const { data: dataBoardsCount, refetch: refetchBoardsCount } = useQueryFetchBoardsCount(); const router = useRouter(); const render = useRef(false); useEffect(() => { // 첫 마운트 실행 막음 if (!render.current) { render.current = true; console.log("처음 실행됨"); return; } const search = String(router.query.search); const page = Number(router.query.page) || 1; if (search === "undefined") { void refetch({ page }); console.log("검색X"); } else { void refetch({ page, search }); void refetchBoardsCount({ search }); console.log("검색O"); } console.log("Hom Search: ", search); }, [router.query]); return ( <> <SearchBar /> {data?.fetchBoards.map((el, index) => ( <div key={index}>{el.title}</div> ))} <Pagination count={dataBoardsCount?.fetchBoardsCount} /> </> ); }여기서 <SearchBar /> , <Pagination />는 router.push에서 query로 ?search= , ?page= 쿼리스트링 만드는 역할만 하고 있고 전체 부모 컴포넌트에서 useEffetch로 refetch하고 있습니다."next": "13", "react": "^18.2.0","apollo-upload-client": "^17.0.0", 입니다.

안녕하세요! 제가 설치도구들을 다운 받고 강의를 이어 듣는데, 제 플레이터와 선생님이 보여주신 초기 화면이 달라서 어느 부분이 잘못되었는지 확인 받고 싶습니다! 

안녕하세요 수업 시작하기 전에 궁금한 점이 있어서요.앞쪽은 html, css , js 수업영상들이 있고 뒤쪽부터 리액트 시작이던데, 혹시 리액트 수업 영상 부터 시작을 하면 세팅이라던가 수업하면서 앞쪽을 수강하지 않아서 생기는 차이가 있을까요? 그리고 에디터는 vscode 말고 다른거를 써도 문제가 없을까요?또, 저는 웹스톰을 쓰고 있는데 웹스톰에서는 plugins를 따로 설치 않해도 될까요?

모듈을 찾을 수 없다고 나옵니다.node_modules안에 파일이 있는거 확인했고 pakage.json안에 설치 잘 되어있는 것도 확인했습니다.어떤게 문제인지 알려주시면 감사하겠습니다!

graphql-mutation-args 강의를 보면서 따라하던 도중 아래와 같은 에러가 발생해서 문의 드립니다. 하드코딩으로 graphql 코드를 생성해서 요청을 해도 위와 같은 에러가 발생합니다. 아래는 index.js 에 작성한 코드와 개발자도구의 네트워크 탭 캡처 사진 입니다. 찾아보니 아폴로서버와 graphql 버전이 맞지 않아서 그런 것 같다는 의견이 있던데, 어떻게 해결해야 할지 잘 모르겠습니다.

강의 여러번 돌려보고 커뮤니티 질문에도 찾아보고 구글링도 해봤는데 어디서 뭐가 잘못된 건지도 모르겠어서 질문 올립니다! 대체 어디서 잘못 된 걸까요,,,queryClient.tsimport request, { RequestDocument } from "graphql-request"; import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from "react-query"; // any 타입 미리 만들어줌 type AnyOBJ = { [key: string]: any }; // Create a client export const getClient = (() => { let client: QueryClient | null = null; return () => { if (!client) client = new QueryClient({ defaultOptions: { queries: { // 캐시타임 : 이 시간 안에는 다시 상세페이지 들어가도 요청 안 함 cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60, refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, }, }, }); return client; }; })(); // 기본 url const BASE_URL = "/"; // restFetcher async로 요청 export const restFetcher = async ({ method, path, body, params, }: { // 메소드 타입 정의 method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; // url대신 path를 받음 path: string; // post나 put의 경우엔 body가 필요하므로 body?: AnyOBJ; // 파라미터 params?: AnyOBJ; }) => { try { // 기본 url + path let url = `${BASE_URL}${path}`; // RequestInit은 node에 기본적으로 정의되어 있음 const fetchOptions: RequestInit = { method, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": BASE_URL, }, }; // param이 오면 if (params) { const searchParams = new URLSearchParams(params); url += "?" + searchParams.toString(); } // body가 오면 if (body) fetchOptions.body = JSON.stringify(body); // url와 옵션들 요청 // 메서드와 path를 받아서 완성 const res = await fetch(url, fetchOptions); // 받은 것을 json으로 바꾸기 const json = await res.json(); return json; // 에러 출력 } catch (err) { console.error(err); } }; // graphqlFetcher export const graphqlFetcher = <T>(query: RequestDocument, variables = {}) => request<T>(BASE_URL, query, variables); // 쿼리 키 만들기 export const QueryKeys = { PRODUCTS: "PRODUCTS", CART: "CART", }; product/item.tsx 컴포넌트import { Link } from "react-router-dom"; import { Product } from "../../../graphql/products"; import { useMutation } from "react-query"; import { graphqlFetcher } from "../../../queryClient"; import { ADD_CART, Cart } from "../../../graphql/cart"; const ProductItem = ({ imageUrl, price, title, id }: Product) => { const { mutate: addCart } = useMutation(({ id }: { id: string }) => graphqlFetcher(ADD_CART, { id }) ); return ( <li className="products-item"> <Link to={`/products/${id}`}> <p className="products-item__title">{title}</p> <img className="products-item__image" src={imageUrl} /> <span className="products-item__price">${price}</span> </Link> <button className="product-item__add-cart" onClick={() => { addCart({ id }); }} > 장바구니 담기 </button> </li> ); }; export default ProductItem; 콘솔에 뜨는 오류나는 파일 올려드립니다..

안녕하세요. 선생님.코드젠이 업데이트 되면서 보드의 날짜 타입이 에러가 아래의 사진처럼 오류가 나는 것 같습니다그래서 선생님께서 올려주시는 포폴 예시 파일에 있는 버전의 타입으로 해도 동일하게 eslint에서 에러가 잡히는 것 같아요.createAt 값이 들어가는 곳마다 저렇게 에러가 잡히는데 어떻게 해결해야할까요??

위 코드 첫 줄에서 todoInput 값을 const로서 정의해줬는데, 함수 내에서 마지막에 이것을 다시 ' '로 초기화해주는 단계가 있습니다. 근데 const는 정의된 후 값이 변하지 않는 상수와 같은 걸로 알고 있는데 이런 식으로 값이 변해도(?) 되나요?

build해서 yarn start 했을때 제컴퓨터론 잘되는데 AWS해서 페이지를 열경우 게시판 리스트가 안뜹니다 불러오기가 안되는거같은데 이유가 이유가 뭘까요

안녕하세요. 선생님 무한스크롤이 계속 만들어져서 질문드려요위 사진에는 댓글이 2개 달린 상태입니다. 그런데스크롤을 내리면서 2개였던게 계속 복사되어 만들어지는 상태입니다. 이런식으로 초기 댓글 갯수가 반복해서 늘어나는 것 같아요. 코드를 보고도 오류를 찾기 힘들어 질문 드려요!참고로, 이전에 비슷한 질문에 확인 해야 할 사항이 있어서 체크해보았습니다. nextconfig.json에서 reactStrictmode를 false로 바꿔보시고 서버를 껐다 다시 켜주세요!>> 바꾸고 해도 되지 않는 것 같습니다. 무한스크롤을 제거한 후 댓글을 작성해 보고 정상적으로 작성이 되는지 알려주세요.>> 무한스크롤 컴포넌트 삭제 시 다른 부분들은 원활하게 작동합니다.또 다른 자료가 필요하시면 말씀해주세요! 긴 질문 읽어주셔서 감사합니다!!  

http://storage.goolgeapis.com/codecamp-file-storage/2024/1/10/IMG_9473.jpeg위에 주소 맞지 않나요? ㅠㅠ

cd class 이후 react 버전 변경 시 아래와 같은 오류가 진행됩니다. 어떻게 해결해야할까요..ㅠㅠUsage Error: The nearest package directory (C:\Users\user\Desktop\CodeCamp_Frontend_j\class) doesn't seem to be part of the project declared in C:\Users\user.- If C:\Users\user isn't intended to be a project, remove any yarn.lock and/or package.json file there.- If C:\Users\user is intended to be a project, it might be that you forgot to list Desktop/CodeCamp_Frontend_j/class in its workspace configuration.- Finally, if C:\Users\user is fine and you intend Desktop/CodeCamp_Frontend_j/class to be treated as a completely separate project (not e

문제 설명 및 코드상품 상세페이지 (src > pages > products > index.tsx) 에서useQuery로 get 요청을 보내는 코드를 강의와 동일하게 작성하면 (useQuery를 "react-query"에서 import후 다음처럼 코드 작성시 ) 위와 같은 에러가 납니다.문제 코드import { useQuery } from "react-query"; import { QueryKeys, fetcher } from "../../queryClient"; const index = () => { const { data } = useQuery(QueryKeys.PRODUCTS, () => fetcher({ method: "GET", path: "/products", }) ); console.log(data); return <div>상품목록</div>; }; export default index;  원인현재 react-query가 v5로 업데이트 됨과 동시에 @tanstack/react-query로 바뀌었고, 동시에 많은 Hook (useQuery 포함)들의 사용 방법이 바뀌었습니다.v4의 useQuery의 경우 다음과 같은 방법으로 호출 가능했습니다. useQuery(queryKey, queryFn, options); useQuery(queryKey, options); // default query function 사용할 경우 query function 생략 가능 useQuery(options); // v5 이전에는 queryKey만 필수 옵션 그러나 일관성이 떨어지는 점, 사용될 옵션을 생성할 때 첫 번째와 두 번째 매개변수의 타입이 무엇인지 체크하기 위해 런타임 체크가 필요한 점 등의 이유로 v5부터는 단일 객체를 전달 받는 방식으로 변경되었습니다. 방식은 다음과 같습니다. useQuery({ queryKey, queryFn, ...options }) 즉 queryKey queryFunction을 전달하는 방식이 원인이었습니다.  해결 방법useQuery를 @tanstack/react-query에서 import 한다.useQuery 코드를 다음과 같이 작성한다. const { data } = useQuery({ queryKey: [QueryKeys.PRODUCTS], queryFn: () => fetcher({ method: "GET", path: "/products", }), }); 참고 자료https://github.com/TanStack/query/discussions/4252의 remove overloads 부분https://tanstack.com/query/latest/docs/react/quick-start 의 코드 부분https://tanstack.com/query/v5/docs/react/reference/useQuery처음엔 버전 안 맞아서 짜증났었는데 오히려 공식문서를 보며 공부할 수 있는 기회였던 것 같아 재밌었습니다 ㅎㅎ좋은 강의 감사합니다 😃