inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

next 12버전 스타일 안먹히나요?

미해결

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

현재 sass 적용 해 봤는데 오류는 나지않고 스타일 자체를 안먹습니다

  • graphql
  • react
  • rest-api
댓글 1 좋아요 0 조회수 192

put

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

그래프큐엘을 다시 보면서 강의 정주행 해보고 있습니다. 질문: update message 부분을 put 대신에 patch로 리팩토링해도 괜찮을까요? 저는 프론트 위주로만 알고 있어서 api쪽은 단순히 전체 update는 put, 부분적인 data 수정은 patch 정도로만 알고 있는데요, 어떤 경우 put/patch를 쓰는 게 더 좋은지 의견 궁금해서 남깁니다.

  • rest-api
  • graphql
  • react
xiuxiu 댓글 1 좋아요 0 조회수 247

ㄷ

미해결

얄팍한 GraphQL과 Apollo

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:ㄷ1 문의하기를 이용해주세요.

  • nodejs
  • graphql
  • apollo
댓글 1 좋아요 0 조회수 393

next파일 생성이 안됨

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

그대로 디펜더시 다운후에 next,react 파일이 안생기는데 그냥 npx 로 다운받아야하나요? (경로확인했습니다)

  • rest-api
  • react
  • graphql
김홍석 댓글 4 좋아요 0 조회수 690

yarn run client

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 환경 세팅하고 yarn run client으로 "simple sns" 정상출력 확인 후 목록뷰 구현하기에서 코드 친 후 yarn run client하니 갑자기 빈페이지에 아래 오류가 뜨는데 구글링해도 방법을 잘 모르겠습니다ㅜ

  • graphql
  • react
  • rest-api
이진선 댓글 1 좋아요 0 조회수 222

수강전문의 next js 버전업데이트

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

강의는 next 11버전인데 지금은 12버전더라구요 혹시 수강하는데 문제없을까요? 그 11대응영상만 참고하면 에러사항없을까요?

  • rest-api
  • graphql
  • react
김홍석 댓글 1 좋아요 0 조회수 262

강의내용 질문

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

강의 7:01 부분의 16번쨰 코드내용에대한 질문입니다! 노드js는 처음이라서 우선 강의따라 흐름만 이해하면서 듣고있습니다! 16번쨰줄의 내용이 서버가 실행될때 forEach로 순회하면서 messagesRoute에서 정의한 메서드들을 실행하는 내용같은데, 작성된 문법이라면 현재 url외의 메서드들도 순회하면서 전부 실행 시키는 중인가요??

  • graphql
  • rest-api
  • react
노강표 댓글 2 좋아요 0 조회수 252

setEditingId 질문 있습니다!

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

안녕하세요? page를 처음 렌더링하고 MsgItem의 수정을 클릭하여 startEdit을 실행하면 setEditingId(x.id)를 실행시키는데요. 바로 console.log(x.id)와 console.log(editingId)를 찍어보면 x.id는 잘 나오는데 editingId의 경우 처음 null 이 오고 계속 전값들이 찍혀서요(계속 클릭한 전 x값들이 editingID에 찍힘). setEditingId 함수로 editingID 값 변경까지 시간 딜레이가 있어서 일까요? 작동은 잘 합니다만, 공부하느라 console.log를 찍어보다 의문점이 들어서요!

  • graphql
  • react
  • rest-api
유진 댓글 1 좋아요 0 조회수 320

무한스크롤 관련

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

무한스크롤 구현시 < div ref ={ fetchMoreEl } / > 이부분이 화면스크롤시 제대로 감지가 안되는 건지 useEffect 에서 intersecting 이 계속 false 더군요 제가 해결한 방법은 < div ref ={ fetchMoreEl } style ={{ border: ' 1px solid white ' }} ></ div > 이렇게 입력해서 정상작동하는 것을 확인했습니다. 비슷한 문제 발생시 참고용~

  • 무한스크롤
  • graphql
  • react
  • rest-api
임채영 댓글 1 좋아요 0 조회수 347

useState()조건

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

const [ editingId , setEditingId ] = useState ( null ); const [ hasNext , setHasNext ] = useState ( true ); useState()에 어떨때는 null 어떨때는 true가 들어가는데 어떤것을 기준으로 판단해야 하는것인지 궁금합니다.

  • rest-api
  • graphql
  • react
Ju 댓글 1 좋아요 0 조회수 210

query client를 clientRef.current에 저장하는 이유가 무엇인가요~?

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

new QueryClient () 위 객체를 useState의 setState()로 state에 저장할 수도 있는데 useRef를 써서 ref.current에 저장하는 이유가 따로 있는지 궁금합니다! useRef는 html tag의 reference를 참조할 때 쓰는 걸로 알고 있어서요 :)

  • rest-api
  • graphql
  • react
uoon lee 댓글 1 좋아요 0 조회수 399

yarn run server 에러 발생

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

yarn 워크스페이스 구성하고 필요한 패키지를 설치했는데 nodemon ./src/index.js 위 커맨드 실행시 에러가 발생합니다. yarn 2 버전을 사용하고 있는데 버전 1로 다운그레이드 해도 동일한 현상이 발생하네요.. 의존성 관리에 문제가 있는 것 같은데 해결책이 있을까요? 폴더 구조는 강의와 동일합니다. // package.json { "version" : "1.0.0" , "name" : "node-graphql" , "private" : true, "workspaces" : [ "client" , "server" ] , "scripts" : { "frontend" : "yarn workspace client start" , "server" : "yarn workspace server start" } } // server/package.json { "version" : "1.0.0" , "name" : "server" , "main" : "index.js" , "type" : "module" , "license" : "MIT" , "dependencies" : { "cors" : "^2.8.5" , "express" : "^4.17.1" , "uuid" : "^8.3.2" } , "devDependencies" : { "nodemon" : "^2.0.15" } , "scripts" : { "start" : "nodemon ./src/index.js" } } 에러 내용 (node:76305) ExperimentalWarning: The ESM module loader is experimental. internal/modules/run_main.js:54 internalBinding('errors').triggerUncaughtException( ^ Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'express' imported from /Users/iyuun/WebstormProjects/node-graphql/server/src/index.js Did you mean to import express-npm-4.17.1-6815ee6bf9-c4b470d623.zip/node_modules/express/index.js? server 폴더에서 express 깔았는데도 그러네요..

  • 에러
  • react
  • rest-api
  • graphql
uoon lee 댓글 1 좋아요 0 조회수 769

질문) 질문있습니다^^

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

속 저는 접속이 안되네요

  • graphql
  • react
  • rest-api
thai pat 댓글 1 좋아요 0 조회수 253

yarn 설치는 어떻게 해야하나요ㅠ

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

환경세팅 영상에서 yarn 설치가 필요하면 요청해주세요해서.. 요청드려요!!+_+

  • react
  • graphql
  • rest-api
simjieun 댓글 1 좋아요 0 조회수 218

주소창에 url 쿼리로 userId를 작성한 후 수정을 하려면 500번 에러가 나타납니다

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

userId=roy 까지 치고 새글 생성 시 roy로만 추가하는 것까지 완료되었는데 수정을 하고나서 완료버튼을 누르면 콘솔에 에러가 떠요 catch 부분에 console.log을 찍어서 messages의 Update 부분에서 오류가 났다는 것까지는 발견했는데 구글에 검색해봐도 어떻게 해결해야 할지 잘 모르겠습니다 ㅠㅠ 사진이 좀 많은데... 감사합니다! console에 찍힌 에러 MsgList.js MsgItem.js messages.js fetcher.js

  • 수정중에
  • 500번에러
  • rest-api
  • graphql
  • 영상8분10초쯤
  • react
heedori 댓글 1 좋아요 0 조회수 443

DELETE시 params.id 데이터 타입

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

// onDelete in MsgList.js ... console.log(typeof id) // number const receivedId = await fetcher("delete", `/messages/${id}`, { params: { userId }, }); // delete handler in messages.js const targetIndex = msgs.findIndex((msg) => msg.id === id); console.log(typeof msg.id, typeof id) // number, string 안녕하세요, 강의에서와는 달리 제 코드에서는 DELETE시 처음부터 서버에서 에러가 발생하여 디버깅 해보니 DELETE 핸들러에서 msg.id는 숫자인데 params.id는 문자열로 들어오고 있습니다. 클라이언트 onDelete에서 보내는 id를 typeof 로 출력해보면 타입이 숫자여서 이해가 어렵습니다. 강의와 똑같이 코드 작성한 것 같은데 어디서 비롯된 문제인지 파악이 어려워 질문 남깁니다. 감사합니다.

  • rest-api
  • react
  • graphql
jh22j9 댓글 2 좋아요 0 조회수 205

pages > index.js에서 궁금한 로직이 있는데요!

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

import React from ' react '; import MsgList from ' ../components/MsgList '; import fetcher from ' ../fetcher '; export default function Home ({ smsgs , users }) { return ( <> < h1 > SIMPLE SNS </ h1 > < MsgList smsgs ={ smsgs } users ={ users } /> </> ) ; } export const getServerSideProps = async () => { const smsgs = await fetcher ( ' get ' , ' /messages ' ) ; const users = await fetcher ( ' get ' , ' /users ' ) ; return { props : { smsgs , users } }; }; 안녕하세요! 강의를 보다가 pages에 있는 index.js에 궁금한 로직이 있습니다. getServerSideProps 함수에서 return 값이 어떻게 위 Home 리액트 컴포넌트에 props로 넘어갈 수 있는건가요? 궁금합니다!! ㅎㅅㅎ

  • graphql
  • rest-api
  • react
summer 댓글 1 좋아요 0 조회수 182

안녕하세요! 환경세팅을 깃허브에서 그대로 따라 쳤는데 이상하게 에러가 발생합니다.

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

안녕하세요! 에러가 발생해서 여쭤보겠습니다. 환경세팅을 한 후에 yarn run client를 실행하면 아래와 같은 에러코드가 발생하는데 어떠한 이유에서 발생하는지 모르겠습니다... 코드는 그대로 똑같이 치고 강사님의 git파일들과도 비교했는데 에러가 발생합니다 ㅠㅠ PS C:\Users\Desktop\Toy Projects> yarn run client yarn run v1.22.11 $ yarn workspace client start internal/modules/cjs/loader.js:888 throw err; ^ Error: Cannot find module 'C:\Users\諛뺣???AppData\Roaming\npm\node_modules\yarn\bin\yarn.js' at Function.Module._resolveFilename ㅂ(internal/modules/cjs/loader.js:885:15) at Function.Module._load (internal/modules/cjs/loader.js:730:27) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

  • rest-api
  • react
  • graphql
댓글 1 좋아요 0 조회수 346

msgs.map is not a function

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import { useState, useEffect, useRef } from "react"; import { useRouter } from "next/router"; import MsgItem from "./MsgItem"; import MsgInput from "./MsgInput"; import fetcher from "../fetcher"; import useInfiniteScroll from "../hooks/useInfiniteScroll"; const MsgList = (smsgs, users) => { const { query: { userId = "" }, } = useRouter(); const [msgs, setMsgs] = useState(smsgs); const [editingId, setEditingId] = useState(null); const [hasNext, setHasNext] = useState(true); const fetchMoreEl = useRef(null); const intersecting = useInfiniteScroll(fetchMoreEl); const onCreate = async (text) => { const newMsg = await fetcher("post", "/messages", { text, userId }); if (!newMsg) throw Error("something wrong"); setMsgs((msgs) => [newMsg, ...msgs]); }; const onUpdate = async (text, id) => { const newMsg = await fetcher("put", `/messages/${id}`, { text, userId }); if (!newMsg) throw Error("something wrong"); setMsgs((msgs) => { const targetIndex = msgs.findIndex((msg) => msg.id === id); if (targetIndex < 0) return msgs; const newMsgs = [...msgs]; newMsgs.splice(targetIndex, 1, newMsg); return newMsgs; }); doneEdit(); }; const onDelete = async (id) => { const receivedId = await fetcher("delete", `/messages/${id}`, { params: { userId }, }); setMsgs((msgs) => { const targetIndex = msgs.findIndex((msg) => msg.id === receivedId + ""); if (targetIndex < 0) return msgs; const newMsgs = [...msgs]; newMsgs.splice(targetIndex, 1); return newMsg; }); }; const doneEdit = () => setEditingId(null); const getMessages = async () => { const newMsgs = await fetcher("get", "/messages", { params: { cursor: msgs[msgs.length - 1]?.id || "" }, }); if (newMsgs.length === 0) { setHasNext(false); return; } setMsgs((msgs) => [...msgs, ...newMsgs]); }; useEffect(() => { if (intersecting && hasNext) getMessages(); }, [intersecting]); return ( <> <MsgInput mutate={onCreate} /> {userId && <MsgInput mutate={onCreate} />} <ul className="messages"> {msgs.map(x => ( <MsgItem key={x.id} {...x} onUpdate={onUpdate} onDelete={() => onDelete(x.id)} startEdit={() => setEditingId(x.id)} isEditing={editingId === x.id} myId={userId} user={users[x.userId]} /> ))} </ul> <div ref={fetchMoreEl} /> </> ); }; export default MsgList; -------- 에러 error - components/MsgList.js (72:14) @ MsgList TypeError: msgs.map is not a function 이유가 뭘까요 대체...

  • 도와주세요
  • react
  • rest-api
  • graphql
유승현 댓글 1 좋아요 0 조회수 966

확장 프로그램

해결됨

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 데이터의 값이 예쁘게 보이지 않아 질문을 올리게 되었습니다. 7 : 22에 교수님의 data는 펼쳐볼수도 있고 예쁘게 정리가 되어 있는데 저의 data는 그냥 나열만 되어 있어서 브라우저에서 보는 확장 프로그램에 대한 문제가 아닌가 라는 생각을 하게 되어서 질문을 하게 되었습니다.

  • 브라우저확장프로그램
  • rest-api
  • react
  • graphql
gwpaeng 댓글 1 좋아요 0 조회수 220

인기 태그

인프런 TOP Writers

주간 인기글