묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
[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처음엔 버전 안 맞아서 짜증났었는데 오히려 공식문서를 보며 공부할 수 있는 기회였던 것 같아 재밌었습니다 ㅎㅎ좋은 강의 감사합니다 😃
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Macbook Air yarn 설치 실패
안녕하세요 현재 MacBook Air 2022( macOS Sonoma | version 14 | Apple M1)으로 수강 중 입니다yarn 설치시 오류가 발생합니다✔ Would you like to use TypeScript? … No / Yes✔ Would you like to use ESLint? … No / Yes✔ Would you like to use Tailwind CSS? … No / Yes✔ Would you like to use src/ directory? … No / Yes✔ Would you like to use App Router? (recommended) … No / Yes✔ Would you like to customize the default import alias (@/*)? … No / YesCreating a new Next.js app in /Users/namgyukim/Desktop/codecamp-frontend-NGK/class.Using npm.Initializing project with template: default Installing dependencies:- react- react-dom- nextadded 22 packages, and audited 23 packages in 8s3 packages are looking for funding run npm fund for detailsfound 0 vulnerabilitiesInitialized a git repository.Success! Created class at /Users/namgyukim/Desktop/codecamp-frontend-NGK/classnpm notice npm notice New patch version of npm available! 10.2.3 -> 10.2.5npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5npm notice Run npm install -g npm@10.2.5 to update!npm notice namgyukim@NAMui-MacBookAir codecamp-frontend-NGK % cd classnamgyukim@NAMui-MacBookAir class % yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exactzsh: command not found: yarnnamgyukim@NAMui-MacBookAir class % npm install -g yarnnpm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/yarnnpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] {npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'mkdir',npm ERR! path: '/usr/local/lib/node_modules/yarn'npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in: /Users/namgyukim/.npm/_logs/2024-01-08T14_45_08_725Z-debug-0.log어떻게 해야 다음 단계로 넘어갈 수 있을까요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[섹션3 훈훈한 Javascript] 함수 스코프, 블록 스코프 강의 질문
강의 4:50 정도에 아래 코드에서 x를 콘솔에 출력하면 undefined가 발생한다고 하셨는데 이해가 안가서 질문드립니다.const sum = function(){var x = 0;}console.log(x);var로 선언된 x는 콘솔이 찍히는 부분인 현재 스코프에서 사용할 수 없는 상태이므로 undefined가 아니라 referenceError가 나는거 아닌가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section09 포트폴리오 git clone으로 받아와서 등록해보면 Failed to fetch 오류가 생기는데 이유가 뭔가요?
오류가 나옵니다new:1 Access to fetch at 'http://backend-practice.codebootcamp.co.kr/graphql' from origin 'http://localhost:3002' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.backend-practice.codebootcamp.co.kr/graphql:1 Failed to load resource: net::ERR_FAILED
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 404 에러가 떠요 ㅜㅜ
기존 노트북에서는 잘 되었다가 다른 노트북에서 깃허브에서 pull해서 설정잡고 실행시키니 404에러가 뜹니다.yarn dev시 http://localhost:3000로 접속하면 잘 접속이 되지만 http://localhost:3000/section0909-04-boards이렇게 접속하면 404에러가 뜹니다.실행은 cs class로 이동 후 했습니다~
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인 리프레시토큰 수업
로그인 리프레시 토큰 수업에서 오류가 발생하여 문의드립니다.로그인을 하고 login-success 페이지로 넘어간 후 버튼클릭을 하면 ApolloError: Cannot read property '_id' of null 오류가 발생합니다. staus code는 200로 보여집니다. 문제가 어떤것인지 모르겠는데 확인부탁드려요.
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
git bash 환경에서도 meteor run이 안됩니다.
먼저번에 질문 남겼었는데요nvm으로 node.js 14로 설치하고vscode에서 git bash 환경에서도 meteor run이 안됩니다. DISABLE_WEBSOCKETS=true meteor run이랑DISABLE_WEBSOCKETS=true meteor.bat run 모두 안됩니다. 아래는 vscode에서 git bash에서 실행한 사진이고아래는 윈도우 파워셀에서 실행한 사진입니다.어디를 고쳐야 할까요 ...
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
학습자료는 어디에있나요
제가 잘못찾는것인지...학습자료, 노션링크 위치를 찾을수가 없어요...ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입과제. 이렇게하면될까요?
안녕하세요. 온라인강의 수강하는 학생입니다. 주중엔 짬짬이 강의만, 코딩학습은 주말만.. 학습 진도가 늦지만.장기간 걸쳐. 열심히 해 보겠습니다.ㅎ 회원가입 과제 아래와 같이 해 보았습니다.(1) vector 부분을 어떻게 적용해야 하나요? figma에서 제공하는 svg소스를 복사,붙여 넣기만 했는데...(2) ellipse 부분을 어떻게 적용해야 하나요? checkbox나 radio 부분에 svg 소스 활용방법이 궁금합니다.(3) 과제에 대한 멘토님의 소스를 보고싶은데 , 제가 못 찾는 것인지 멘토님 소스 보는 방법을 가르쳐 주셨으면 합니다.멘토님의 의견 감사합니다.
-
해결됨GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]
윈도우 meteor run 할 때 에러
노드 v14.21.3 입니다.터미널 git bash에서 실행하였고,npm i -g meteor 하여 설치 한 후에DISABLE_WEBSOCKETS=true meteor run 해도 안되네요. bash: meteor: command not found AppData/Local/.meteor 위치에는 이렇게 있어서meteor 설치, 삭제 다 해봤는데도 안 되네요 .. 이런 오류는 어떻게 고쳐야 할까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로컬호스트 오류가 자꾸떠요
Server ErrorTypeError: inst.render is not a functionThis error happened while generating the page. Any console logs will be displayed in the terminal window. 요런식으로 오류가 뜨는데 어떻게 해야할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
pagination 페이지 번호 유지하고 싶습니다.
예시로 pagination을 통해 4번째 게시물 목록을 보고 있는데여기서 새로 고침을 하거나4번 게시물 목록의 해당 게시글 클릭해서 들어가고 다시 뒤로 가기를 통해 게시물 목록으로 이동이 되었을 때4번 게시물 목록이 아닌 1번 게시물 목록으로 초기화가 되는데저는 4번 게시물 목록으로 유지하고 싶습니다. 다른 사이트의 게시물 홈페이지를 참고해 보면 page=4 이런 식으로 주소 창에 입력이 되어있는데 pages폴더에 폴더를 추가해서 유지를 해야 하나요?인프런에서 질문 & 답변 부분에서도 다음과 같이 사용되고 있습니다.https://www.inflearn.com/community/questions?page=2&order=recent 만약 폴더를 추가 해야 한다면 다음과 같이 폴더가 있을 때boards 하위 폴더에 추가하고 해당 page폴더 안에[boardId], new 폴더를 넣어야 할 까요?(page폴더 생성 안 한 상태입니다.)아니면 useState나 useRecoil을 사용해서 상태관리를 해야하는 건가요?어떻게 사용되는지 알고 싶습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
husky
D:\coding\codecamp-frontend\class> npx husky install위 내용처럼 허스키를 설치하면 husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory) 이렇게 .git을 찾을 수 없다고 뜹니다. 저는 작업물을 git으로 버전 관리했는데 찾아보니 package.json과 .git의 경로가 형제관계여야 오류가 안난다는 정보를 찾았습니다. 제 작업물의 폴더 구조가 최상위 폴더에 .git이 있고 저렇게 클래스 / 클래스_퀴즈 / 포폴 폴더에 package.json이 각각 있는 형태인데요.이러한 경우는 어떻게 해결해야 할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
createUploadLink사용 할 때 오류가 발생합니다.
import에 문제가 발생했다고 하는 것 같은데 아무리 찾아봐도 해결이 안됩니다.ㅠ 어찌해야할까요
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
prettier 적용 사라짐
강의 듣기전부터 프리티어는 사용하고 있었는데yarn add --dev eslint-config-prettier이걸 입력한이후 저장시 프리티어 간격조정이 자동으로 안됩니다format on save 다 체크 되있는 상태이고 다른폴더에선 프리티어가 되지만 yarn add --dev eslint-config-prettier 이걸 입력한 폴더만 간격 조정이 안먹는 데 이유가 뭘까요
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
깃허브에서 선생님께서 올리신 파일 받아,, 실행시켜보려했으나 안됩니다
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", };
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
강의 시점과 지금시점이 꽤 달라진게 있는거 같아요
업데이트 해주시면 정말 감사합니다 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
freeboard_frontend 작업 중 Failed to fetch
freeboard_frontend 폴더에서 댓글 부분 만들려고 yarn dev해서 화면을 확인하려고 하는데 /boards 부분 화면은 뜨는데 글 목록은 하나도 뜨지않고 작성하기를 하려하니 alert 창으로 Failed to fetch 라는 안내가 뜹니다 혹시 뭐가 문제인지 알 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
매개변수 이해가 잘 안됩니다.
안녕하세요, 수업 잘 듣고 있습니다. 79번째 줄 weatherSearch라는 function에 postion이 매개변수로 들어가는 이유가 잘 이해가 안 됩니다.만약, postion 대신 87번째 줄의 positionObj가 매개변수로 들어 가면 어떻게 되나요? 아직 매개변수 자체의 개념이 약한 것 같은데 좀 더 이해할 수 있게 도와주시면 감사하겠습니다!