22,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
프로젝트 배포
내용 정리해서 프로젝트로 사용하고 싶어서요로컬에서만 돌릴 수 있고 따로 배포하거나 할 수는 없나요??
- 미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
코드 똑같이 쳤는데 scss 적용이 안돼요 ㅠㅠ
이유 알 수 있을까요
- 미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
scss 스타일 적용
혹시 scss 스타일 적용이 안되는 이유 여쭤봐도 될까여?
- 해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn run client시 에러는 안 나는데 호스트가 열리질 않습니다 ㅠㅠ
혼자 해결해보려 했으나 해결이 안돼 글 남깁니다 ㅠㅠ이렇게 정상적으로 열리는 듯 하지만 열리지 않고 계속 이 상태에서 멈춰있습니다.참고로 원래 개인 프로젝트 할때 yarn 으로 하고 있었고 yarn start 시에는 문제가 없었습니다 !ㅜㅜ왜 이럴까요?
- 해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
무한 스크롤 관련 질문 드립니다.
안녕하세요. 재남님토이 프로젝트 강의를 보고 무한 스크롤을 구현을 했는데 스크롤 내릴 때 처음 데이터 15개만 불러와지고 스크롤 내릴 때에는 그 다음 데이터들이 불러오지 않습니다.깃허브에 올려주신 코드를 복사 붙여놓기 해도 동일하게 데이터가 불러오지 않습니다.스크롤 내릴 시 그 다음 데이터를 불러오는 것을 서버에서 확인을 해야 할 지 클라이언트에서 확인을 해야 할지 감이 잡히지 않습니다.
- 해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
props 를 넘겨줄 때 함수를 그대로 넘겨줄 때와 화살표 함수로 감싸서 넘겨줄 때의 차이가 궁금합니다 :)
onUpdate={onUpdate} onDelete={() => onDelete(x.id)} startEdit={() => setEditingId(x.id)} isEditing={editingId === x.id}안녕하세요 선생님 강의 정말 잘 보고 있습니다! 컴포넌트에서 Props를 넘겨 줄 때onUpdate={onUpdate}이렇게 넘겨줄 때와onDelete={() => onDelete(x.id)} startEdit={() => setEditingId(x.id)} 이렇게 넘겨줄 때의 차이가 궁금합니다.콘솔로 찍었을 때는 둘 다 함수로 표기되는데함수를 그대로 넘겨주는 것과 화살표함수로 감싸서 넘겨주는 것이 어떤 차이가 있는지 잘 모르겠습니다..!제가 이해한 바로는 onDelete / startEdit은 버튼 이벤트 역할로 버튼 클릭시 즉시 실행되는 함수이기 때문이고onUpdate는 mutate로 인자를 전달 받는 함수로 onSubmit 함수 안에서 실행되기 때문에 그런 것 같은데제가 이해 한 바가 맞는지 궁금하여서 질문드립니다~! 바쁘실텐데 질문 드려서 죄송합니다 ^^;; 그리고 ... 선생님의 유튜브 멘토링 영상을 보고입사 4개월차 주니어 개발자로서 앞으로 어떻게 나아가야할 지 많은 생각을 하게 되었고 큰 도움을 얻었습니다.정말 감사드립니다..!열심히 해서 언젠가 좋은 소식 전해드리고 싶습니다.항상 건강하세요!
- 해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
getInitialProps 과 getServerSideProps에 대해서 질문드립니다!
해당 프로젝트에서 getInitialProps와 getServerSideProps를 동시에 쓰고 있는데 2개의 경우 pre-render를 하기 위해 작성했다고 이해했는데 둘 중 하나만 써도 되는 부분 아닌가요??? 어떤 상황떄문에 2개를 동시에 사용하는지 궁금합니다
- 해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
node-sass를 했을 때 에러가 발생합니다.
yarn add node-sass를 실행했을 때 gyp 에러가 발생합니다.
- 미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
[소스 다운로드 안됩니다]
안녕하십니까목록뷰 구현하기에서 Invalid Date 오류가 나서 소스 파일을 참조 하려고 파일을 다운로드 받아보니 안에 소스 파일이 없습니다.https://github.com/roy-jung/api-practiceapi-practice-main.zip [아래 코드는 강의에서 따라 한 것입니다. 아무래도 오류가 없는데.. Invalid Date 오류가 발생합니다]const MsgItem = ({ userId, tiemestamp, text }) => ( <li className="messages__item"> <h3> {userId}{" "} <sub> {new Date(tiemestamp).toLocaleString('ko-KR', { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true, })} </sub> </h3> {text} </li> );
- 미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
rendered HTML error 관련
MsgItem 을 이용하여 MsgList 50개를 뽑는 과정에서Error: Text content does not match server-rendered HTML. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.오류를 만났습니다. 혼자서 분석해본결과 jay와 roy를 랜덤으로 얻기위한 const getRandomUserId = () => UserIds[Math.round(Math.random())]; 이라는 함수를 이용하면 이런에러가 나는것으로 확인되었습니다 선생님 .fill(0).map() 함수에서 getRandomUserId() 를이용하지않고 직접 이름을 "roy" 로 작성하니 오류가 나오지않습니다.. 구글링을해봐도 이유를 알기 어려워서 질문을남깁니다 왜 이런오류가 나오는걸까요.?
- 미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
닉네임 부분이 잘못되어 있는 것 같습니다.
해당 강의 이후에 수정하시는지 모르겠지만 닉네임이 제대로 적용되어있지 않는 것 같습니다.// MsgList.js <MsgItem ... user={...} />현재 해당 강의 시점에서 user을 넘기고 user.nickname으로 표시를 하게 되어 있는데 { id: 'roy', nickname: '로이' } 가 계속 넘어가서 닉네임이 '로이'로만 렌더링되고 있습니다.// MsgList.js <MsgItem ... users={users} /> // MsgItem {users.find(user => user.id === userId).nickname}저는 일단 이런식으로 수정하였는데 닉네임 부분 한번 확인 부탁드립니다! 혼동이 올 수도 있을 것 같습니다 ㅎㅎ..
- 미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
Typescript 질문드려요!
안녕하세요 재남님!Typescript 적용 중에 계속 안되는 부분이 있어서 질문드려요!setQueryData에 2번째 인자인 old에 대해서 타입 지정 중인데 안되는 이유가 궁금합니다!
- 미해결풀스택 리액트 토이프로젝트 - 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개발자)
React Hydration Error 가 나는 이유가 무엇일까요 ?;;
에러가 자꾸나는데 문제가 무엇일까여;;
- 미해결풀스택 리액트 토이프로젝트 - 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 백틱 안에 색깔 입혀지는 확장프로그램이 어떤건지 알 수 있을까요?
안녕하세요, 사소한 질문인데요, 백틱을 열면 오타 찾기도 힘들고 가독성이 떨어져서 강사님처럼 백틱 뒤에 색깔을 따로 입히고 싶은데 확장프로그램이 뭔지 알 수 있을까요?