22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
Gnb 다른 작성법
윈도우 환경 & vite-plugin-next-router를 안쓰시분에 한하여,Gnb를 만드실려면<QueryClientProvider client={queryClient}> <BrowserRouter> <Gnb /> <App /> </BrowserRouter> </QueryClientProvider>이렇게 src/main.tsx 에 선언하시면 됩니다.
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
placeimg.com는 23년 6월에 종료했네요.
경로 : src > mocks > handler.ts 강의에서 mock_products의 imageUrl 을`https://placeimg.com/200/150/${i + 1}`,내용으로 선언했었는데요.이미지가 안나오길래 봤더니 23년 6월 30일에 종료했다고 안내문구가 나오네요.이미지가 필요하신 분들은 ">`https://picsum.photos/id/${id}/200/150` 을 사용하시면 됩니다.
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
장바구니 담기 버튼 누르면 404에러가 뜹니다
강의 여러번 돌려보고 커뮤니티 질문에도 찾아보고 구글링도 해봤는데 어디서 뭐가 잘못된 건지도 모르겠어서 질문 올립니다! 대체 어디서 잘못 된 걸까요,,,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; 콘솔에 뜨는 오류나는 파일 올려드립니다..
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
[useRoutes, React-Query 오류 해결방법] No QueryClient set, use QueryClientProvider to set one 에러 나시는 분 보세요 !!!
문제 설명 및 코드상품 상세페이지 (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처음엔 버전 안 맞아서 짜증났었는데 오히려 공식문서를 보며 공부할 수 있는 기회였던 것 같아 재밌었습니다 ㅎㅎ좋은 강의 감사합니다 😃
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
깃허브에서 선생님께서 올리신 파일 받아,, 실행시켜보려했으나 안됩니다
yarn dev하면 사이트 떠야하는데;; 왜 안될가요??
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
상품목록페이지만들기에서 ... 막힙니다..
선생님~!! 상품목록페이지가 안뜹니다 ㅠㅠ뭘 잘못한걸까요?? app.tsx파일엔 아래와 같이 입력했습니다.import { QueryClientProvider } from 'react-query' import { useRoutes } from 'react-router-dom' import { getClient } from './queryClient' import { routes } from './routes' import { ReactQueryDevtools } from 'react-query/devtools' const App = () => { const elem = useRoutes(routes) const queryClient = getClient() return ( <QueryClientProvider client={queryClient}> {elem} <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ) } export default Appimport { QueryClient } from 'react-query' // import { getTodos, postTodo } from '../my-api' type AnyOBJ = { [key: string]: any }; export const getClient = (() => { let client: QueryClient | null = null return () => { if (!client) client = new QueryClient({}) return client } })() const BASE_URL = "https://fakestoreapi.com" export const fetcher = async ({ method, path, body, params, }: { method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; path: string; body?: AnyOBJ; params?: AnyOBJ; }) => { const url = `${BASE_URL}${path}`; const fetchOptions: RequestInit = { method, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": BASE_URL, }, }; try { const res = await fetch(url, fetchOptions); const json = await res.json(); return json; } catch (err) { console.error(err); } }; export const QueryKeys = { PRODUCTS: "PRODUCTS", };
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
강의 시점과 지금시점이 꽤 달라진게 있는거 같아요
업데이트 해주시면 정말 감사합니다 ㅠㅠ
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
상품목록 불러오기, 장바구니 삭제 에러 질문 드립니다
firebase 연동 후 client와 server 실행하여 구동 중 오류 발생하여 질문 드립니다.해당 에러를 찾아보니까 'createdAt' 필드를 중복으로 사용하고 있다고 GET_PRODUCTS 쿼리에서 'createdAt' 삭제하여도 역시 그대롭니다.server/src/resolvers/product.ts강의에 설명해주신 기존 코드대로 짜니까"'QueryStartAtConstraint' 형식의 인수는 'QueryOrderByConstraint' 형식의 매개 변수에 할당될 수 없습니다. 'type' 속성의 형식이 호환되지 않습니다. '"startAt" | "startAfter"' 형식은 '"orderBy"' 형식에 할당할 수 없습니다. '"startAt"' 형식은 '"orderBy"' 형식에 할당할 수 없습니다." 라는 에러가 떠서 주석 처리를 하고 수정을 하였는데 인터넷 검색해서 이것저것 고친거라 정확한건지 모르겠네요.장바구니 삭제 에러quertClient.ts 기존 코드에서 에러로 인해 수정했습니다.추가적으로 영상에 설명하신 코드와 현재 설치 버전 호환에 차이가 많아 오류가 생겨 수정해주었습니다client/src/components/cart/item.tsx // 기존 코드 const queryClient = getClient() const { mutate: updateCart } = useMutation( ({ id, amount }: { id: string; amount: number }) => graphqlFetcher(UPDATE_CART, { id, amount }), // 수정 const queryClient = getClient() const { mutate: updateCart } = useMutation<{ updateCart: CartType }, unknown, { id: string; amount: number }>( ({ id, amount }) => graphqlFetcher(UPDATE_CART, { id, amount }),client/src/pages/products/[id].tsx // 기존 코드 const { data } = useQuery<{ product: Product }>([QueryKeys.PRODUCTS, id], () => graphqlFetcher(GET_PRODUCT, { id }), ) // 수정 const { data } = useQuery<{ product: Product }>( [QueryKeys.PRODUCTS, id], () => graphqlFetcher(GET_PRODUCT, { id }), { select: (data) => data as { product: Product }, // 선택적으로 타입 캐스팅 } );위 코드들 외에도 수정한 부분이 여러군대인데 잘못된 코드 수정으로 인하여 오류가 발생하는 것인지 궁금합니다.
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
graphqlFetcher 관련 에러와 , data 객체 정의 되지 않는 오류 질문 드립니다
안녕하세요. msw 강의를 듣는 중에 해결되지 않는 문제가 있어서 질문 남깁니다.pages > products > [id].tsx이 호출과 일치하는 오버로드가 없습니다.오버로드 1/3('(queryKey: QueryKey, options?: Omit<UseQueryOptions<Product, unknown, Product, QueryKey>, "queryKey"> | undefined): UseQueryResult<...>')에서 다음 오류가 발생했습니다.'() => Promise<unknown>' 유형에 'Omit<UseQueryOptions<Product, unknown, Product, QueryKey>, "queryKey">' 유형과 공통적인 속성이 없습니다.오버로드 2/3('(queryKey: QueryKey, queryFn: QueryFunction<Product, QueryKey>, options?: Omit<UseQueryOptions<Product, unknown, Product, QueryKey>, "queryKey" | "queryFn"> | undefined): UseQueryResult<...>')에서 다음 오류가 발생했습니다.'Promise<unknown>' 형식은 'Product | Promise<Product>' 형식에 할당할 수 없습니다.'Promise<unknown>' 형식은 'Promise<Product>' 형식에 할당할 수 없습니다.'unknown' 형식은 'Product' 형식에 할당할 수 없습니다.ts(2769)types.d.ts(9, 89): 필요한 형식은 이 시그니처의 반환 형식에서 가져옵니다ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ'{}' 형식에 'Product' 형식의 id, imageUrl, price, title 외 2개 속성이 없습니다.ts(2740)detail.tsx(3, 77): 필요한 형식은 여기에서 'IntrinsicAttributes & { item: Product; }' 형식에 선언된 'item' 속성에서 가져옵니다.import { Product } from '../../graphql/products' const ProductDetail = ({ item: { title, imageUrl, description, price } }: { item: Product }) => ( <div className="product-detail"> <p className="product-detail__title">{title}</p> <img className="product-detail__image" src={imageUrl} /> <p className="product-detail__description">{description}</p> <span className="product-detail__price">${price}</span> </div> ) export default ProductDetailcomponents > products > detail.tsxpages > products > index.tsx이 호출과 일치하는 오버로드가 없습니다. ... 필요한 형식은 이 시그니처의 반환 형식에서 가져옵니다(위와 동일)'NonNullable<TQueryFnData>' 형식에 'products' 속성이 없습니다'product' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다 해당 에러는 앞서 다른 수강생들도 질문한 부분이라 찾아봤는데const { data } = useQuery<Products>(QueryKeys.PRODUCTS, () => graphqlFetcher<Products>(GET_PRODUCTS) ) 알려주신 방식대로 리액트쿼리 버전 변경에 따라 타입스크립트 정의 방식이 바뀐 형태로 수정해주었는데도 같은 에러가 발생합니다.handlers.ts이 상태에서 실행을 하니 data객체가 정의되지 않는다고 나오며 localhost 500 Request Handler Error가 뜹니다import { gql } from 'graphql-tag' export type Product = { id: string imageUrl: string price: number title: string description: string createdAt: string } // export type MutableProduct = Omit<Product, 'id' | 'createdAt'> export type Products = { products: Product[] } const GET_PRODUCTS = gql` query GET_PRODUCTS { id imageUrl price title description createdAt } ` export const GET_PRODUCT = gql` query GET_PRODUCT($id: string) { id imageUrl price title description createdAt } `graphql > products.ts며칠째 계속 잡고 하다가 안되서 그냥 두고 다음 강의 듣고 있는 중인데 오류 때문에 자꾸 신경이 쓰이네요별거 아닌 에러였으면 좋겠네요
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
3강 routes.tsx 파일 생성 안되시는분!
import { lazy } from "react"; import GlobalLayout from "./src/pages/_layout"; const Index = lazy(() => import("./src/pages/index")); const PoroductsIndex = lazy(() => import("./src/pages/products/index")); const ProductsId = lazy(() => import("./src/pages/products/[id]")); export const routes = [ { path: "/", element: <GlobalLayout />, children: [ { path: "/", element: <Index /> }, { path: "/products", element: <PoroductsIndex /> }, { path: "/products/:id", element: <ProductsId /> }, ], }, ]; export const pages = [ { route: "/" }, { route: "/cart" }, { route: "/payment" }, { route: "/products" }, { route: "/products/:id" }, ];windows 이고 파일 자동생성이 안되서 하나씩 쳤네요ㅠㅠㅠㅠㅠㅠㅠ저와 같이 고생하시는 분 계실까봐 남겨놓습니다경로만 체크하시면 될거같아요!
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
productdetail 데이터 안불러와지고 있습니다.
전체 목록까지는 불러와 지는데 상세페이지가 안되고 있습니다.rest까지는 됐었는데 graphql로 바꾸면서 잘안돼고 있네요...정상적으로 query key와 id는 잘 들어가는것 같습니다.https://github.com/littleduck1219/Web_Toy_Project/tree/main/shopping-mall
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
query 에러 발생했습니다.
Unexpected Application Error!No QueryClient set, use QueryClientProvider to set oneError: No QueryClient set, use QueryClientProvider to set one at useQueryClient (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:2826:11) at useBaseQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3003:23) at useQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3051:10) at ProductList (http://localhost:3000/src/pages/products/index.tsx?t=1694339505145:26:7) at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:12169:26) at mountIndeterminateComponent (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:14919:21) at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:15900:22) at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19747:22) at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19192:20) at workLoopSync (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19131:13)import { Suspense, useEffect } from "react"; import { getClient } from "./queryClient"; import { QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { routes } from "./routes"; import { useRoutes } from "react-router-dom"; const App = () => { const elem = useRoutes(routes); const queryClient = getClient(); console.log("QueryClient:", queryClient); // useEffect(() => { console.log("QueryClientProvider is mounted."); }, []); return ( <QueryClientProvider client={queryClient}> <Suspense fallback={<div>Loading...</div>}>{elem}</Suspense> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ); }; export default App; import React from "react"; export const DynamicIndex = React.lazy(() => import("./pages/index")); export const DynamicProductsIndex = React.lazy(() => import("./pages/products/index")); export const DynamicProductsId = React.lazy(() => import("./pages/products/[id]"));import GlobalLayout from "./pages/_layout"; import * as Lazy from "./Lazy"; export const routes = [ { path: "/", element: <GlobalLayout />, children: [ { path: "/", element: <Lazy.DynamicIndex />, index: true }, { path: "/products", element: <Lazy.DynamicProductsIndex />, index: true }, { path: "/products/:id", element: <Lazy.DynamicProductsId /> }, ], }, ]; export const pages = [{ route: "/" }, { route: "/products" }, { route: "/products/:id" }]; queryclient와 queryprovider를 잘 설정한것 같은데 에러가 발생하고 있습니다. 거의 4시간 가까이 찾아본것 같습니다.. Lazy부분은 따로 분리를 안하면 경고를 띄워서 분리를 했습니다. 이리저리 만져서 tool도 안뜨는걸 뜨게 했는데 저 에러는 도저히 해결이 안되네요 ... https://github.com/littleduck1219/Web_Toy_Project/tree/main/shopping-mall
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
react typescript vite 설치시 오류 질문드립니다.
제목처럼 react typescript vite설치를 하려고 터미널에 yarn create vite를 입력하여 설치를 했습니다.아래 이미지와 같이 typescript를 선택 후, 설치를 완료했는데...아래 이미지들처럼 설치 하자마자 빨간줄들이 난무하고있습니다ㅜㅜ아래 이미지는 package.json 파일입니다.어떻게 해결할 수 있을까요?
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
섹션1의 1강 routes.tsx에서 에러가 발생합니다
안녕하세요. 윈도우 환경에서 수업을 듣고 있습니다.routes.tsx에서 \문제가 발생하여 이전에 답변해주신 내용을 토대로 vite-plugin-next-react-router를 지우고 강의를 따라가려고 했는데,아래의 코드에서 다음과 같은 에러가 발생합니다const DynamicIndex = lazy(() => import('./pages/index')); '''''Promise<typeof import("c:/Users/zcvpa/OneDrive/\uBC14\uD0D5 \uD654\uBA74/shoplive/shopping-mall/src/pages/index")>' 형식은 'Promise<{ default: ComponentType<any>; }>' 형식에 할당할 수 없습니다.'typeof import("c:/Users/zcvpa/OneDrive/\uBC14\uD0D5 \uD654\uBA74/shoplive/shopping-mall/src/pages/index")' 형식은 '{ default: ComponentType<any>; }' 형식에 할당할 수 없습니다.'default' 속성의 형식이 호환되지 않습니다.'() => void' 형식은 'ComponentType<any>' 형식에 할당할 수 없습니다.'() => void' 형식은 'FunctionComponent<any>' 형식에 할당할 수 없습니다.'void' 형식은 'ReactElement<any, any> | null' 형식에 할당할 수 없습니다.ts(2322)index.d.ts(868, 18): 필요한 형식은 이 시그니처의 반환 형식에서 가져옵니다.'''' 해당 에러를 해결할 수 있는 방법이 있을까요?
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
routes.tsx에서 질문이 있습니다!
라우츠 파일에 보면 제일 밑에 코드에서 pages 를 익스포트해주는데, 쓰는곳이 없더라구요...!혹시 이 코드가 반드시 필요한 것인지 궁금해서 질문 남깁니다:)import GlobalLayout from './pages/_layout'; import Index from './pages/index'; import ProductsIndex from './pages/products/index'; import ProductsId from './pages/products/[id]'; import Cart from './pages/cart'; export const routes = [ { path: '/', element: <GlobalLayout />, children: [ { path: '/', element: <Index />, index: true }, { path: '/products', element: <ProductsIndex />, index: true }, { path: '/products/:id', element: <ProductsId /> }, { path: '/cart', element: <Cart />, index: true }, ], }, ]; export const pages = [{ route: '/' }, { route: '/products' }, { route: '/products/:id' }, { route: '/cart' }];
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
vite-plugin-next-react-router
vite-plugin-next-react-router 다운받고 강의를 따라했는데요.. routes.tsx파일이 자동으로 생성이 되지않습니다.그런데 이상하게 페이지가 작동이되요..이유가 뭘까요..?vite.config.ts 내용은 조금 다릅니다.reactRouterPlugin를 사용하면 오류가 생겨서 withReactRouter으로 교체했습니다.나머지 파일생성과 코드는 동일합니다..import { defineConfig } from "vite"; import withReactRouter from "vite-plugin-next-react-router"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react(), withReactRouter()], });
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
grahpqlFetcher 설명가능할까요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. export const graphqlFetcher = <T>(query: RequestDocument, variables = {}) => request<T>(BASE_URL, query, variables) 이 코드 에서 <T> 이 타입에 대한 것과query: RequestDocument, variables = {}여기 부분이 뜻하는 것과request<T>(BASE_URL, query, variables여기 부분이 뜻하는 의미를 알고 싶습니다 .ㅠㅠgrahpql이 처음이라 구글링해서 봐도 잘 모르겠어요.. 그리고 혹시 그럼 지금은 graphql을 쓰는 거고, 이전 영상에서 fake api 불러올 때는 rest api 사용한 게 맞나요??알려주시면 감사드립니다!
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
msw mocking enabled
저의 경우 main.tsx 나 app.tsx 가 불필요하다고 하셔서 layout_tsx 에 // if (import.meta.env.DEV) { // const { worker } = require("../mocks/browser"); // worker.start(); // }를 추가했지만 에러가 뜹니다 ㅜ main.tsx에 작성하는 경우에는 아무것도 나타나지 않습니다.깃주소 : https://github.com/ssmv713/shopping-mall2.git
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
[기술 질문아님]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 채팅이 매우 빠르신 것 같은데...기본 타자가 몇 정도이신가요? 실무에서 개발 진행하실때도 코파일럿이나 chat gpt 같은 다른 툴은 안 쓰시는 지도 궁금합니다.
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
products 라우팅은 되는데 cart 라우팅은 안되네요 ㅠ
pages 하단에 products 와 동일하게 cart 페이지를 넣었는데, 라우트 매치가 안된다고 나오네요 ㅜ 깃주소 남깁니다. https://github.com/ssmv713/shopping-mall2.git