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 깔았는데도 그러네요..

속 저는 접속이 안되네요

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

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

// 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 로 출력해보면 타입이 숫자여서 이해가 어렵습니다.  강의와 똑같이 코드 작성한 것 같은데 어디서 비롯된 문제인지 파악이 어려워 질문 남깁니다. 감사합니다.       

  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로 넘어갈 수 있는건가요?   궁금합니다!! ㅎㅅㅎ

안녕하세요! 에러가 발생해서 여쭤보겠습니다. 환경세팅을 한 후에 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.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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   이유가 뭘까요 대체...

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

저도 똑같은 에러가 발생하여 MsgItem이나 MsgList 전부 깃허브에 올려주신 코드 그대로 복붙도 해보았는데, 그래도 안됩니다. MacOS 사용중입니다. 왜 안되는지 모르겠습니다..

onupdate 함수의 매개변수를 (id, text) 로 넣어주었더니!  수정 버튼을 클릭 했을 때 내용이 바뀌지 않더라구요 그래서 혹시나해서 매개변수를 (text, id) 로 변경했더니 수정 기능이 제대로 작동 했습니다.   매개변수 순서가 바뀌면 문제가 있는걸까요??

해결했습니다!

강사님 안녕하세요, 반갑습니다.  저는 얄코의 구독자이며 영상은 매우 잘 챙겨보고 있습니다.  csv를 데이터베이스로 이용한 하신것에 대해서 깜짝 놀랐고, " 이걸로 다 CRUD를 구현을 하셨단 말이야?? ,, 하고 매우 기뻤습니다. "   그러나 강의에서 POST 로 localhost:3000/api/team >> 통해서 데이터를 넣어주면~ post man에서 들어간 데이터가 잘 확인이 되고, 브라우저에서도 확인을 해도 데이터가 잘 들어간 것이 확인이 됩니다. 근데 서버를 내렸다가 다시 올리면... 데이터가 없어져 있더라구요??  CSV데이터에 실제로 CRUD를 해보고 싶다는 생각이 듭니다.  1. csv 데이터베이스에 CRUD를 배워서 할 바에는 몽고디비를 쓰는 것이 좋을까요? 2. 구글에 검색을 해보니 하는 방법에 대한 글이 많더라구요, 추천하시는 글이 있으시면 추천이 가능하실까요? ps. 바쁘시면 답글 안다셔도 감사합니다. ㅋㅋㅋ

깃헙에있는 강사님 소스 내용으로 다 덮어씌어도 똑같은 에러가 뜹니다 ㅠㅠ..

아이디를 넘겨주는 곳에서 bind로 id 값을 바인딩 해주면 어떨까요? {isEditing ? <MsgInput mutate={onUpdate.bind(null, id)} text={text} /> : text} <button onClick={startEdit.bind(null, id)}>Fix</button>

config 파일을 수정하고 나서 develop 을 실행하면 에러가 발생합니다. Error: Cannot find module 'graphql/polyfills/objectValues' google 에서는 답을 찾을 수 없는데 node module 삭제 후 graphql을 다시 깔아 보기도 했는데 해결이 안되네요...   도움부탁드려요~!~

좋은강의 감사드립니다!  다름이  아니라 실무에서 springboot + graphQL을 사용해야 하는데 스프링부트  환경에서는 apollo를 사용할 수  없는건가요? 사용할 수 없다면 apollo 같은 기능을 제공하는  라이브러리 또는 프레임워크가 있을까요??