22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
uuid 에러
안녕하세요.수업을 듣던중에 같은 방법으로 uuid 라이브러리를 다운받고 실행을 하고있는데 이런 에러가 발생을 하고 있는데혹시 어떤 부분이 문제인지 알수있을까요..?@types/uuid 로 삭제 설치 다시 해보고 진행해도 계속 같은 에러가 발생합니다 ㅠ<package.json> "dependencies": { "@types/uuid": "^8.3.4", "graphql-request": "^5.0.0", "graphql-tag": "^2.12.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.2", "react-router-dom": "^6.4.3", "sass": "^1.56.1" },<handlers.ts>import { v4 as uuid } from "uuid"; const mock_products = Array.from({ length: 20 }).map((_, i) => ({ id: uuid(), imageUrl: `https://placeimg.com/200/150/${i + 1}`, price: 50000, title: `임시상품${i + 1}`, description: `임시상세내용${i + 1}`, createAt: new Date(1668159460287 + i * 1000 * 60 * 60 * 10).toString(), }));<에러 내용>[plugin:vite:import-analysis] Failed to resolve import "uuid" from "src\mocks\handlers.ts". Does the file exist? C:/Users/home/Desktop/배포/shop/shopping/src/mocks/handlers.ts:3:27 1 | import { graphql } from "msw"; 2 | import GET_PRODUCTS from "../graphql/products"; 3 | import { v4 as uuid } from "uuid"; | ^ 4 | const mock_products = Array.from({ length: 20 }).map((_, i) => ({ 5 | id: uuid(), at formatError (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:39971:46) at TransformContext.error (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:39967:19) at normalizeUrl (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:36835:33) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async TransformContext.transform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:36968:47) at async Object.transform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:40224:30) at async loadAndTransform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dis
- 해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
index.tsx에서 ProductItem부분에서 해당 반환 형식이 유효하지 않다고 할 때
index.tsx에서 ProductItem부분에서 해당 반환 형식이 유효하지 않다고 하면서 화면에 Display되지 않을때 어디를 확인하면 되는지 조언 부탁드립니다~데이터는 BASE_URL로 부터 잘 오고 있습니다mac에서 vsc사용하고 있습니다아래는 해당부분입니다import { useQuery } from "react-query" import ProductItem from "../../components/product/item" import { fetcher, QueryKeys } from "../../queryClient" import {Product} from "../../types" const ProductList = () => { const {data} = useQuery<Product[]>(QueryKeys.PRODUCTS, () => fetcher({ method: 'GET', path: '/products' }), ) /* id: 1 title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops" price: 109.95 description: "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday" category: "men's clothing" image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg" ▶ rating 2 items rate: 3.9 count: 120 */ return ( <div> <ul> {data?.map(product => ( <ProductItem {...product} key={product.id} /> ))} </ul> </div> ) //return (<div>상품목록</div>) } export default ProductListcomponents/product/item.tsx 파일입니다
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
graphql 연동이 안되요ㅠㅠ
섹션2의 MSW강의에서 graphql연동한이후부터 에러가 나서, 해결이 안되서 문의드리게되었습니다ㅠ(window환경입니다)http://localhost:3000/products 호출시browser-ponyfill.js:518 POST http://localhost:3000/ 404 (Not Found) react_devtools_backend.js:4026 Error: GraphQL Error (Code: 404): {"response":{"error":"","status":404,"headers":{"map":{"access-control-allow-origin":"*","connection":"keep-alive","content-length":"0","date":"Tue, 15 Nov 2022 04:03:57 GMT","keep-alive":"timeout=5","content-type":"text/xml"}}},"request":{"query":"query GET_PRODUCTS {\n id\n imageUrl\n price\n title\n description\n createdAt\n}","variables":{}}} at index.ts:497:11 at step (graphql-ws.ts:280:1) at Object.next (graphql-ws.ts:280:1) at fulfilled (graphql-ws.ts:280:1)콘솔로그에 위처럼 에러가 나옵니다ㅠvite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], esbuild: { define: { this: "window", }, }, server:{ host: 'localhost', port: 3000 } }) queryClient.ts import { request, RequestDocument } from "graphql-request"; import { QueryClient } from "react-query"; 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; } })() const BASE_URL = '/' export const restFetcher = async ({ method, path, body, params } : { method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'; path: string; body?: { [key:string]: any } params?: { [key:string]: any } }) => { try { let url = `${BASE_URL}${path}` const fetchOptions: RequestInit = { method, headers: { 'Content-Type' : 'application/json', 'Access-Control-Allow-Origin' : BASE_URL } } if(params) { const searchParams = new URLSearchParams(params) url += '?' + searchParams.toString() } if(body) fetchOptions.body = JSON.stringify(body) const res = await fetch(url, fetchOptions) const json = await res.json() return json } catch (err) { console.error(err) } } export const graphqlFetcher = (query: RequestDocument, variables={}) => request(BASE_URL, query, variables) export const QueryKeys = { PRODUCTS: 'PRODUCTS', }graphql/product.ts import { gql } from 'graphql-tag' export type Product = { id: string imageUrl: string price: number title: string description: string createdAt: string } 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 } ` export default GET_PRODUCTS/pages/products/index.tsx import { useQuery } from "react-query" import ProductItem from "../../components/product/item" import { graphqlFetcher, QueryKeys } from "../../queryClient" import GET_PRODUCTS, { Products } from "../../graphql/products"; const ProductList = () => { const { data } = useQuery<Products>(QueryKeys.PRODUCTS, ()=> graphqlFetcher(GET_PRODUCTS)) console.log(data); return ( <div> <h2>상품목록</h2> <ul className="products"> {data?.products?.map(product => ( <ProductItem {...product} key={product.id} /> ))} </ul> </div> ) } export default ProductList
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
updateProduct 에서 궁금한게 있어서 질문드려요!
안녕하세요 재남님updateProduct mutation에서 args 인 …data를 사용하셨는데…data라는게 정확히 client에서 update된 정보들을 말하는걸까요??만약 맞다면 client에서 product가 update된 data를 api호출을 통해 백엔드가 사용하는 부분인가요?..그리구 args를 구글링해보니깐 GraphQL 쿼리의 필드에 제공된 인수라고 나오는데,client에서 받는 data의 값이라고 이해하면 되는거겠죠?.. (restfulApi 통신할 때 사용하는 파라미터라고 생각합니다)const updatedItem = { …db.products[updateTarget] ….data}그래서 위에 코드에 …data가 필요한 이유는 update된 product만 보여주는게 아니고 전체 데이터도 필요하기 때문에 사용한거라고 생각합니다. 질문들이 너무 많아서 죄송하지만 뭔가 이해가 안되서 질문남겼습니다 ㅜㅜ
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
cors error 해결 방안
지금 강의 듣는 분들은 아마도 vite가 버전3 이상 이라서 client와 server 통신 할 때 cors error가 날거에요!버전 3이상부터는 (Vite 개발 서버의 기본 포트 번호는 이제 5173 입니다. 물론 server.port 옵션을 이용해 3000으로 설정할 수 있습니다.)라고 합니다!https://vitejs-kr.github.io/guide/migration.html#config-options-changes그래서 cors에 localhost:3000 이 아닌 localhost:5173을 넣어주셔야 cors error가 나지 않을거에요!정확한 내용은 아닐수도 있지만 참고 하시면 좋을거같아요
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
addCart 오류 질문있습니다!
안녕하세요 재남님!addCart를 제외한 나머지 Mutation 및 Query는 response를 잘 받고 있는 상황인데, addCart는 amount가 누적이 되면서 아래와 같이 error가 나고 있습니다.. (이상하게도 JsonDB에서는 데이터가 바뀌고 있습니다!)TypeError라고 뜨고 있어서 스키마 및 데이터 타입을 다시 점검해봐도 알맞게 들어가고 있습니다.. 뭐가 문제인지 잘모르겠습니다ㅜㅜ
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
fakestoreapi 서버
fakestoreapi서버가 아무래도 몇일동안 멈춰있는것 같은데 혹시 다른 api가 없을까요?...
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
recoil 현업에서 많이 쓰이나요?
recoil 버전 보니 0.75이던데써도 문제는 없을까요?실제로 현업에서도 많이 쓰이나요?
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
staleTime과 cahceTime 질문
staleTime : 5분cacheTime : 5분위에 option들을 가정하고 질문을 드리겠습니다!제가 이해하기로는 staleTime은 Fresh data => unFresh data가 되기 까지의 시간을 의미해서 5분이 지나지 않았다면 현재 Fresh한 data이기 때문에 새로 mount가 되어도 새롭게 fetch가 되지 않고, cahceTime은 data가 inActive 상태일 때 캐싱된 상태로 남아있는 시간이여서 5분이 되기 전까지는 새로운 api를 호출해서 data가 바뀌기 전 까지는 캐싱된 data를 먼저 보여줘라! 라고 이해를 했습니다.. 혹시 제가 이해한 부분이 맞을까요??
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
MSW 강의 진행 중 오류가 발생합니다.
vite pre-bundle 과정 중에 에러가 발생하는 것 같습니다.github : https://github.com/zihuns/inflearn-shoppingmall
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
논리 연산자 질문
안녕하세요 재남님!아래 (prev | | 0 ) 부분에서 || 0 은 값을 number 타입으로 바꿔주기 위해서 작성해주신건가요?|| 0 없이 console을 찍어보니 NaN이 나오더라구요! 궁금합니다!setCartAmount((prev) => (prev || 0) + 1)
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
getQueryClient
안녕하세요 재남님! getQueryClient 질문과 error 관련해서 질문 드립니다!export const getClient = (() => { let client: QueryClient | null = null; return () => { if (!client) { client = new QueryClient(); return client; } }; })();getClient 함수 안에 client라는 변수를 선언하고 client가 없을시에만 new QueryClient()를 만들어주고 값을 반환한다 라고 이해했는데, 로직 중간에 return ( ) => {.....}이 해주는 역활이 정확이 무엇인지 궁금하고, getClient를 왜 즉시실행 함수로 작성하신건지 궁금합니다! (즉시실행을 하지않아도 다른 컴포넌트에서 useEffect안에 함수를 호출하면 되지않을까 하는 생각에 질문드렸어요!)마지막으로 client type 지정 하실 때new QueryClient(config?: QueryClientConfig | undefined): QueryClient 라고 되어있는 부분에서 QueryClient가 있어서 적어주신걸로 봤는데, new QueryClient의 반환 type이 QueryClient 라서 type지정을 해주신건지 궁금합니다!ErrorqueryClient 만들고 실행하니 아래와 같은 error가 발생했습니다.문제렌더링이 되지 않고 Router 기능도 되지 않음구글링 하고 적용해보았던 것1. react-query 버전을 v4에서 다운그레이드 하였음react와 react-dom 버전 다운그레이드 하였음FunctionComponent 관련해서 react type(?)이 바뀐 부분이 있어서 https://github.com/TanStack/query/issues/3476 참조해서 index.t.ds 파일에 해당 내용 넣어주고 실행하였음결론1,2,3을 적용해도 아직 에러를 고치지 못했습니다..ㅜㅜ package.json{ "name": "shopping-mall", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview" }, "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", "react-query": "^3.34.16", "react-router-dom": "^6.3.0", "vite-plugin-next-react-router": "^0.6.2" }, "devDependencies": { "@types/react": "^17.0.33", "@types/react-dom": "^17.0.10", "@vitejs/plugin-react": "^2.1.0", "typescript": "^4.6.4", "vite": "^3.0.0" } }App.tsximport { 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 element = useRoutes(routes); const queryClient = getClient(); return ( <QueryClientProvider client={queryClient}> {element} <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ); }; export default App;
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
update가안되네요...뭐가문제인지..
중간에 영상이 씹혀서그런지... 댓글보고 수정해도 update가안되네요.. 진짜 한 10번은 돌려본것같은데.... 깃허브가도 브랜치도없고.. 완성된거밖에...... 일단 요렇게 add하면 정상으로 작동하여 담깁니다. update하면 이렇게뜨는데... 반환값이이상하여 핸들러를 암~~만 쳐봣는데 .... 도저희 못찾겟네요,.. github 주소첨부합니다...제발도와주십시요.... https://github.com/MaJunghan/ViteReactQuery invalidQueries로 update치면 잘되긴합니다..
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
오류 문의드립니다 ㅠㅠ (6일차)
client 와 server 를 나눴는데 다른부분들은 모두 에러 없이 작동 되지만 장바구니 item 삭제 버튼과 장바구니 item 수량 조절 시 위와 같은 에러가 발생합니다. (수량 조절은 작동은 잘하는데 에러메시지가 나타납니다) https://github.com/developerkimjh/shoppingmall (빠짐없이 따라한거 같은데 도움 부탁드립니다 ㅠㅠ)
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
오류메시지 문의드립니다유
import { QueryClientProvider } from "react-query";오류메시지 : 모듈 'react-query'에 대한 선언 파일을 찾을 수 없습니다. 'C:/work/react-shop/shopping-mall/node_modules/react-query/build/cjs/packages/react-query/src/index.js'에는 암시적으로 'any' 형식이 포함됩니다.해당 항목이 있는 경우 'npm i --save-dev @types/react-query'을(를) 시도하거나, 'declare module 'react-query';'을(를) 포함하는 새 선언(.d.ts) 파일 추가ts(7016) import { ReactQueryDevtools } from "react-query/devtools"; 오류메시지 : 'react-query/devtools' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307) 어떻게 해결해야 하나요 ㅠ
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
vite:esbuild warning 에러 시 해결
5일차를 학습하던 중 yarn run client 로 실행을 하는데 처음보는 warning 메시지를 발견했습니다 이것 저것 찾아본 결과 버전..? 문제로 발생하는거 같은데 꼭 5일차 진행과정이 아니여도 날 수 있는 오류 같습니다. 해결방법은 [vite.config.ts] 파일에서 esbuild 를 사진과 같이 추가해주면 해결됩니다. 참고 : https://github.com/vitejs/vite/discussions/8640
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
if(!data) 가없으면
이렇게 뜨는 이유가뭘까요 ?.. 있으면 null처리해주면 바로 사라지네용.. 타입스트립트를 잘못해서그런가.. 이유를알려주시면 감사합니다.
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
9분에 productitem 구문
딴건 다이해가가는데 map돌리고 화살표함수쓰 고 => { } 이렇게가야하는것 아닌가요 ? 왜안되는거지.... ()를 써야하는 이유가 이해가안가요..... {data?.map((product) => ( <ProductItem {...product} /> ))} <ul className="products"> {data?.map((product) => { <ProductItem {...product} /> })} </ul>
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
배포 다 하셨는데 데이터 안불러와지시는분들은 heroku의 Config Vars 부분 한번 더 확인해주세요!
안녕하세요~ 배포 다 잘 됐는데 데이터 계속 안불러와져서 왜그런가 계속 고민하고 있었는데요 ㅠㅠ 제가 바보같이 Cofig Vars에 vercel을 추가하는걸 잊었더라구요! 노란색 체크한것처럼 추가해주세요~ 강의에 저 부분 추가하는 내용이 없어서 아무 생각 없이 계속 왜 CORS 에러가 나지 싶었는데 .env에서 설정해준 것들을 다 넣어야 한다는걸 잊고 있었네요! 조금이라도 도움이 되길 바라며 남겨봅니다~
- 미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
마지막날 강의에서 카트에 담긴 상품 삭제가 안되시는 분들은 참고해주세요~
client/src/graphql/cart.ts 파일에서 DELETE_CART 부분 수정이 필요합니다! [변경전] [변경후] products.ts 뺄 때랑 같은 이유로 오류가 나더라구요~ 오류나시는 분들은 참고해주세요~!