묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
error 관련하여
text contents does not match server-sided HTML이라는 오류가 뜨는게 혹시 어떻게 해결할 수 있을까요? 검색해도 마땅히 제대로 된 답이 안나오네요. 그리고 왜 여기서는 그런 오류가 안생기는지 궁금합니다!
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
질문이 있습니다!.
onCreate 함수에서 질문이 있습니다! 새로운 객체인 createMessages와 기존에 존재하던 15개의 길이를 가진 old.messages를 나열하기만 하면 된다고 생각했는데, 뒤에 ...old.pages.slice(1)을 또 나열을 하는 부분이 이해가 안됩니다!. console.log를 찍어보니 ...old.pages.slice(1)는 빈 배열이 나오는데 어떤 이유때문에 넣어주는지 궁금합니다!
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
질문이 있습니다!
안녕하세요 강사님! 아래와 같이 문제가 있어 질문 남깁니다! graphQL 적용 후 새로고침 시 화면 렌더링 속도가 되게 느려짐 => 어떤 문제인지 잘 모르겠습니다.. Create 후에 getData를 하지 못함(등록 버튼 누르고 새로 fetch를 해야 Create 했던 내용이 나옴)=> 기존에 MsgList 컴포넌트에서 GET_MESSAGES로 fetch 하였을 땐 잘 동작했지만 getServerSideProps함수 안에서 fetch 했더니 동작하지 않는 것 같습니다(추측) React Component Tool에 Hydrate 부분이 Anonymous라고 뜸 => React-query 버전이 올라가면서 문법상에 오류가 있는 건지, Hydrate(캐싱)이 적용 되지 않는 것 같습니다. ㅜㅜ 도와주세요!!!.. _app. js index MsgList(Create Code)
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
수정된 내용까지 확인했는데 에러가 납니다 ㅠ
window에서 대소문자 문제 수정해도 에러가 나네요 ㅠ
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
useRef를 선호하시는 이유가 궁금합니다!
지금까지 input 관리를 컴포넌트로 빼서 useCallback과 useState, onChange 메서드를 사용하여 써왔는데 useRef로 관리할 수 있다는 걸 보고 깜짝 놀랐습니다. 개인적인 선호라고 하셨지만 특별히 이유가 있을까 하여 useRef에 대해 찾아보니 useRef는 input value의 상태가 바뀌어도 리렌더링이 안 되는 이점이 있더라구요. 그렇다면 input이 많은 회원가입 같은 form을 만들 때 useRef를 사용한다면 굳이 useCallback이나 useMemo를 쓰거나 여러 개의 useState 를 만들지 않아도 될 것 같다는 생각에 이르더라구요 이러한 이점 때문에 useRef를 쓰시는 것인지 궁금합니다
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
react-query 4.0.0 버전에선 에러가 납니다
1:00 에서 return null 을 한 뒤 돌려보니 위와 같은 에러가 떠서 확인해보니, react-query: 4.0.0 과는 호환이 안 되는 것을 확인했습니다. 강사님 깃허브에서 버전 확인 후 react-query를 "^3.17.2" 으로 낮춘 뒤 돌려보니 잘 뜹니다... 4.0.0 을 사용하려면 `yarn add @tanstack/react-query`를 따로 설치 후, ` import { QueryClient, QueryClientProvider } from "@tanstack/react-query";` 이렇게 바꿔사용하라는데 이렇게 하면 맞을까요?
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
gql 백틱 안에 색깔 입혀지는 확장프로그램이 어떤건지 알 수 있을까요?
안녕하세요, 사소한 질문인데요, 백틱을 열면 오타 찾기도 힘들고 가독성이 떨어져서 강사님처럼 백틱 뒤에 색깔을 따로 입히고 싶은데 확장프로그램이 뭔지 알 수 있을까요?
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
2일차 장바구니 작동안하시는분 참고하세요!
꼭 이것이 문제는 아닐수 있습니다 (저는 이렇게 해결됐습니다..!) 2일차를 마추고나니 GET_CART가 새로고침 후 최초 1회만 작동하는 문제가 생기더라고요 1. src/graphql/cart.ts 이 부분 코드가 같은지 확인해주세요 영상에서 편집된것 같습니다(제가 집중안할걸수도..?) 이거를 수정해도 최초 1회만 GET_CART가 작동하는 것은 동일하더라고요 강사님 github(https://github.com/roy-jung/livecode-study_mall) 3일차 commit 코드를 보니 2. src/pages/cart/index.tsx useQuery에서 staleTime, cacheTime을 추가하니 정상작동 하는군요! 제가 앞에서 놓쳤던 부분들이 있어 이러한 문제가 생겼을 수도 있습니다. 혹시 2일차 장바구니에서 오류가 난다면 그저 참고만 해주세요! 제가 삽질을 많이해서 글을 남깁니다,.ㅎㅎ
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
2일차 강의중 에러 문의 QueryClient
1일차까지는 강의를 잘따라가고 있었는데요. 2일차 들어서 에러가 발생합니다. yarn run dev를 실행하면 아래와 같은 메시지가 나옵니다. > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 725ms. X [ERROR] Expected ";" but found "client" src/queryClient.ts:20:15: 20 │ retrun client │ ~~~~~~ ╵ ; Build failed with 1 error: src/queryClient.ts:20:15: ERROR: Expected ";" but found "client" 참고로 아래는 강의 따라가고 있는 깃허브 주소입니다. https://github.com/ucoder-git/vowing-live/blob/main/shopping-mall/src/queryClient.ts import { QueryClient } from 'react-query' type AnyOBJ = { [key: string]: any } 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, }, }, }) retrun client } })() const BASE_URL = "https://fakestoreapi.com"
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
typeScript에 대한 질문을 어디다가 올려야할지 몰라서 여기다가 남깁니다!
const fetcher = async ( method: METHOD, url: string, ...rest: { [key: string]: any }[] ) => { const res = await axios[method](url, ...rest) return res.data } export default fetcher 위에 ...rest 에 대한 타입이 궁금해서 질문드립니다! 글을 새로 생성하거나 수정했을때 아래와 같이 객체로 정보가 담기게 되는데요! 1. key값은 id, text, timestamp, userId 라고 생각하면 되는건가요? 2. any는 response에 대한 타입인건가요? 3. Array 안에 Object로 감싸져 있어서 { [key: string]: any} []로 타입을 지정해준건가요? 위에 3가지 질문이 궁금합니다.. ㅜ { id: "36e1a2bc-177b-4743-9152-d7423c7b9e18" text: "asd" timestamp: 1654591409339 userId: "jin" }
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
mutation에서 unshift 관련 에러가 나는데 어떤 문제일까요?
관련해서 검색해보며 찾아봤는데 도저히 짐작가는 곳이 없어서 여쭤보게되었습니다. 강사님의 github코드 보면서 오타 확인도 했는데 제가 임의로 timeStamp라고 쓴 변수를 제외하고는 똑같은 걸 확인했습니다ㅠㅠ 캡쳐를 보면 resolver/message에서 30:19번째가 문제라고 나오는데 여기가 unshift를 사용한 곳입니다. 혹시나 해서 push 를 사용해봤는데 역시 같은 문제가 있었습니다. 그래서 messages에 옵셔널 체이닝으로 messages?.unshift를 사용했을 때 createMessage는 실행이 되지만 db에 변경되지는 않는 것을 확인했습니다. 추가적으로 어떤 부분을 확인하면 좋을까요?
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
linkSchema
linkSchema 안에 default 값 주는 부분에서 type을 boolean으로 주는 이유가 있을까요???
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
모킹에서 계속 오류가 납니다
모든 과정을 세번씩 돌려보면서 따라했는데도 안되네요... queryClient는 위와 같이구성하였고 BASE_URL은 '/'으로 설정하였습니다. 위와같은 오류가 발생합니다 어떻게 해결하여야할까요? https://github.com/shinwonse/shopping-mall 깃 주소 첨부드립니다
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
항상 감사합니다
항상 개념이 헷갈리면 강사님이 하는 코드를 보러 옵니다 ㅋㅋ 근데 개인적으로 그래프 큐엘을 연습하다 궁금한것이 생겨 질문올립니다.저는 저기 날짜 년도 별, 월별로 관리를 하고 싶다고 했을때 어떻게 로직을 처리하는게 좋을까요 백엔드에서처리를 해야하나요 아니면 저렇게 날짜 데이터를 받아서 프론트에서 처리를 해야하는것이 효율적인가요..? 아직까지 실력이 부족해서 1월부터 12월까지 배열을 짜서 해야하나 막막합니다.. {content:"string", date:"2022-03-05"}예를 들어 이런 데이터가 엄청 많을때2022년 3월은 3월콘텐츠 4월은 4월컨텐츠를 리스트로 따로 처리하는 방법은 뭐가 있는지 고수의 팁좀 알려주십시오 ㅠㅠ 로직이 떠오르지가 않습니다 .. 수업과는 조금 떨어지는 질문 죄송합니다 ..
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
질문이 있습니다~
안녕하세요 선생님! 질문 드릴게 있습니다. 처음부터 setState에서 로직을 처리하는게 아닌 아래와 같이 onUpdate 함수에서 msgs를 splice를 하여 updateMsg에 할당해주고 setMsgs((msgs) => [updateMsg, ...msgs]) 수정된 updateMsg를 바꾸어주고 기존의 존재했던 state값을 스프레드 연산자로 코드를 작성하였습니다! 해당 리스트가 삭제되긴 하지만 msgItem이 계속 쌓이고 있는 부분이 있습니다. 어떤 부분이 문제인지 알고싶습니다!
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
늦은시간에 죄송합니다.
강의를 듣다가.. 제 수준에 당황에서 글을 남깁니다.. 혹시 이번강의(routes의 정의)가 이해가 되지 않는다면 어느파트를 집중해서 공부해야하는지 여쭤보고 싶습니다. 처음에는 막연하게 리액트, 타입스크립트를 공부하고 서버쪽 기초를 배우고 싶어, 그래프 큐엘과 아폴로등을 공부하기 위해 강의를 신청햇는데 기본적인 개념조차 안잡혀있는 제자신을 확인 할 수 있는 기회가 되었습니다 ㅠㅠ.. 수업과 관련이 없는 내용이지만 노드js를 공부한 후 듣는 편이 좋을까요 .. 아니면 어디를 공부하여야 할까요.. 답변 기다리겠습니다.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
질문이있습니다!
안녕하세요! 선생님! params와 query에 대해서 질문이 있습니다. delete 해줄때 client단에서는 params안에 id를 담아서 보내주고 server단에서는 query로 id를 받아야한다고 말씀하셨는데 params로 보내고 params로 받는건 안되는건가요???
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
기타 파일 설치 관련하여
안녕하세요! 환경세팅부분에서 계속막히는데요 ,,저는 yarn 설치 시 yarn lock 이 생성되지 않아 touch lock으로 생성하였습니다. 그 후 client 폴더에서 sass와 axios webpack을 설치하려 하니 다음과 같이 뜹니다. 어느 파일에 무얼 추가하면 될까요? 하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
패키지 삭제하고 다시
안녕하세요 선생님 제가 웹팩 설치할 때 --dev 를 안 붙여서 devDependencies 가 아닌 dependencies에 설정됐는데 yarn remove webpack해도 안되네요 ㅠㅠ 혹시 이럴 경우 어떻게 삭제하고 다시 설치할 수 있나요?
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
reactQuery + graphql 흐름 질문.
reactQuery에대해서 graphql을 호출하는 과정에있어서 에매한 부분이 있는것같아 나름대로 정리를 해봤습니다... 혹시 제가 잘못 이해하고있는 부분이 있을까요!!?? 1. graphql를통한 데이터 불러오기 흐름. (+next.js 서버사이드 렌더링 가정) 1) 서버사이드 렌더링에의해 불러오는 데이터를 hydrate를통해 클라이언트측 cache에 저장시킨다. 2) 최초접속시 useQuery를통해 데이터를 요청하지만, 우선은 당장 cache에 존재하는 데이터를 보여준다. 3) 이후 useQuery를 통해 데이터를 가져왔을떄 기존에 cache에 존재하는 데이터와 비교후, 바뀐부분만 교체시킨다. 4) 이후 새로고침이 발생했을떄 cache에서 데이터를 가져오게됨으로써 빠른 렌더링을 구현 할 수 있게된다. 2. graphql를통한 생성, 업데이트, 제거 흐름. 1) 우선 useMutation을통해 필요한 정보들을 fetcher를 태워 graphql요청을 보낸다. 2) 이후 성공하게되면 client.setQueryData를통해 클라이언트측 cache에 접근하여 데이터를 업데이트 시킨다. 3) 이과정에서 QueryKeys.MESSAGES를 통해 클라이언트측 cache에 접근하여 데이터를 업데이트하게됨으로, 최초 useQuery를통해 불러온데이터가 변경된것과 동일함으로 useEffect의 dependency Array에 전달된 data.messages가 변경된것으로 인식하여, setMsgs가 호출된다. 4) 이과정에서 useQuery의 fetcher는 호출되지않는다. 3. 클라이언트측 cahce를 눈으로 확인할 수 있는 방법이있을까요?(단순히 개발자 도구에서의 애플리케이션탭의 cache부분에서는 확인이 안되는것같아 질문드립니다..!) 또한 이부분이 리덕스의 스토어 역할을 한다고 생각해도되는지 궁긍합니다!