묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
tcp 통신 관련하여 질문드립니다
안녕하세요 선생님~tcp 관련해서 질문을 드리고 싶습니다. ^^tcp 버퍼라는게 따로 존재하나요? 아니면 소켓 버퍼가 곧 tcp 버퍼인가요?segmentation된 데이터는 어디서 조립되나요? 만약 소켓 버퍼에서 조립된다면 recv했을 때 덜 조립된 데이터를 받거나 하진 않는지 궁금합니다.관련 책에서 본 내용인데요, 송신 버퍼에 1바이트의 여유만 있어도 tcp는 send가 가능하다는데 이러면 데이터가 다른 관련없는 데이터와 섞여서 송신되거나 하지는 않나요?다른건 안그러는데 이상하게 네트워크 쪽만 공부하면 자꾸 깊게 파고들려고 하네요. ;;호기심을 적당히 가져야 진도를 빠르게 뺄텐데... 그래도 좋게 생각해야겠죠? ㅎㅎ항상 좋은 강의 감사드립니다~^^
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Error: Unable to call `followerIdList["includes"]`, which is undefined or falsey
로그인 후 포스팅 하나 작성하면 계속 에러가 발생합니다.exports.renderMain = async (req, res, next) => { try { const posts = await Post.findAll({ include: { model: User, attributes: ['id', 'nick'], }, order: [['createdAt', 'DESC']] // 최신순 정렬(작성일 기준 내림차순) }); res.render('main', { title: 'NodeBird', twits: posts }); } catch (error) { console.error(error); next(error); } };renderMain 메서드에서 따로 follwerIdList를 보내지 않는 것 같은데 {% for twit in twits %} <div class="twit"> <input type="hidden" value="{{twit.User.id}}" class="twit-user-id"> <input type="hidden" value="{{twit.id}}" class="twit-id"> <div class="twit-author">{{twit.User.nick}}</div> {% if not followerIdList.includes(twit.User.id) and twit.User.id !== user.id %} <button class="twit-follow">팔로우하기</button> {% endif %} <div class="twit-content">{{twit.content}}</div> {% if twit.img %} <div class="twit-img"><img src="{{twit.img}}" alt="섬네일"></div> {% endif %} </div> {% endfor %}followerIdList는 어디서 나온 어디서 나온건지 찾을 수가 없습니다..
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Unkown column 'Post.UserId' in 'field list'
rendermain Executing (default): SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC; Error at Query.run (C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\dialects\mysql\query.js:52:25) at C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\sequelize.js:315:28 at processTicksAndRejections (internal/process/task_queues.js:95:5) at async MySQLQueryInterface.select (C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\dialects\abstract\query-interface.js:407:12) at async Function.findAll (C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\model.js:1140:21) at async exports.renderMain (C:\Users\user\study\nodejs\nodebird\controllers\page.js:16:23) { name: 'SequelizeDatabaseError', parent: Error: Unknown column 'Post.UserId' in 'field list' at Packet.asError (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packets\packet.js:728:17) at Query.execute (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\commands\command.js:29:26) at Connection.handlePacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:489:32) at PacketParser.onPacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:94:12) at PacketParser.executeStart (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:101:25) at Socket.emit (events.js:400:28) at addChunk (internal/streams/readable.js:293:12) at readableAddChunk (internal/streams/readable.js:267:9) at Socket.Readable.push (internal/streams/readable.js:206:10) { code: 'ER_BAD_FIELD_ERROR', errno: 1054, sqlState: '42S22', sqlMessage: "Unknown column 'Post.UserId' in 'field list'", sql: 'SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC;', parameters: undefined }, original: Error: Unknown column 'Post.UserId' in 'field list' at Packet.asError (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packets\packet.js:728:17) at Query.execute (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\commands\command.js:29:26) at Connection.handlePacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:489:32) at PacketParser.onPacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:94:12) at PacketParser.executeStart (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:101:25) at Socket.emit (events.js:400:28) at addChunk (internal/streams/readable.js:293:12) at readableAddChunk (internal/streams/readable.js:267:9) at Socket.Readable.push (internal/streams/readable.js:206:10) { code: 'ER_BAD_FIELD_ERROR', errno: 1054, sqlState: '42S22', sqlMessage: "Unknown column 'Post.UserId' in 'field list'", sql: 'SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC;', parameters: undefined }, sql: 'SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC;', parameters: {} } GET / 500 25.038 ms - 2481 GET /main.css 200 2.256 ms - 2609 exports.renderMain = async (req, res, next) => { console.log('rendermain') try { const posts = await Post.findAll({ include: { model: User, attributes: ['id', 'nick'], }, order: [['createdAt', 'DESC']] // 최신순 정렬(작성일 기준 내림차순) }); console.log(posts); res.render('main', { title: 'NodeBird', twits: posts }); } catch (error) { console.error(error); next(error); } };안녕하세요 선생님npm run start 서버 띄우고 localhost:8001 로 갔을 때 나오는 에러 입니다.사진도 같이 띄웁니다.controller/page.js 에서 16번째 줄에서 에러가 발생하길래 확인하였는데위 에러 코드에서 보이듯이 sql문에 Post테이블의 UserId 컬럼이 포함되어 있었습니다.Post 테이블 만들 때 UserId 컬럼을 명시한 적이 없는데 왜 sql 문에 포함되었는지 잘 이해가 안 갑니다ㅠㅠ
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
windows에서 nodemon을 통한 app.js 실행 문제
안녕하세요 선생님windows 11 운영체제 플랫폼에서 강의를 수강하고 있습니다.webstorm IDE 사용하고 있습니다.nvm windows를 설치해서 사용 중이며 node 18 lts 버전을 사용 중에 있습니다.npm i nodemon --save-devpackage.json에 devDependencies에 추가한 상태입니다.선생님과 똑같이 cmd 창에서 node app 입력했을 경우 잘 실행이 되었는데요.nodemon app 을 입력했을 경우 다음과 같이 실행할 수 없습니다.C:\Users\mingyo\study\nodejs\nodePractice\express>nodemon app'nodemon'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.C:\Users\mingyo\study\nodejs\nodePractice\express>nodemon app.js'nodemon'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.찾아봤을 때는nodemon을 -g 옵션을 줘서 전역으로 설치하는 방법시스템 환경 변수를 수정(?)하는 방법이렇게 크게 두 가지 방법이 있는 것 같았습니다.global 설치는 선생님이 별로 추천하지 않는다고 하셔서 어떤 해결 방법을 사용하는 걸 추천하시는지 궁금합니다.아 그리고 nvm windows를 사용해서 node를 다운받았는데, nvm windows 사용으로 인해 이 문제가 발생한 건지도 궁금합니다.조금 찾아보긴 했는데 이렇게 질문드리는 게 적절한지 잘 모르겠습니다.
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
Wireshark을 어떻게 분석해야 하나요?
안녕하세요 선생님^^강의를 보면서 Wireshark 분석도 따라해보고 있는데요,제가 루프백 환경에서 진행을 하고 있어서 그런지 뭔가 뒤죽박죽 같더라구요특히 14번 패킷은 아무데서도 Ack=5가 안나왔는데 Seq=5를 보내니까저로서는 도저히 뭐가 뭔지 모르겠어서.. ㅠㅠ;;어디서부터 실마리를 잡아야 할까요..?분석 관련해서 조언을 얻고 싶습니다!!
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
몽고디비 몽구스와 socket.io를 활용한 실시간 채팅 페이지
안녕하세요.현재 프로젝트 시작했는데 백엔드 배정받아 급하게 강의 결제후 듣고 있습니다.인스타그램 같은 어플을 만들 예정인데, 저는 채팅쪽 파트를 맡게 되었습니다.리액트, node.js mongodb, mongoose를 사용하기로 했으며 제가 구현해야 하는 기능은 이렇습니다.아이디를 검색했을 때 나오는 유저와 채팅하기 버튼을 누르면, 그 유저와 1대1 채팅이 가능하도록 해야합니다. 그리고 채팅 후 방을 둘 다 나가기 하지 않는 이상 채팅방은 계속 유지되어 계속 채팅을 이어나갈 수 있어야 합니다.스키마작성부터 CRUD 코드 작성, 서비스코드 작성, 라우터 코드 작성까지,, 손도 못대겠네요 ㅎㅎ아무리 머리를 쥐어 짜내봐도, 어떻게 구현해야할지 감조차 안잡혀서 유튜브 검색해보면 외국인 강좌들 밖에 안나와서,, 어떻게 해야할까요ㅎㅎfigma는 위와 같습니다.프론트만 해보다 보니 뭘 어떻게 해야할지 모르겠어요,,,ㅠㅠ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
안읽은메세지 표시
안녕하세요 제로초님mutate(0)으로 했는데도 콘솔찍어보니까 다시 1로 변합니다channel부분만 이러네요
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
npm i typescript 충돌 오류
npm i typescript 작성 시 아래와 같은 오류가 뜹니다. 종속성 해결 과정에서 충돌이 발생한 것으로 보이는데, 여기서 --force를 해서 설치를 하면 실행 될 것 같긴한데 그렇게 했을때는 결국 문제가 터졌던 경험들이 있어서 어떻게 하면 되는지 잘 모르겠습니다./c/02WorkSpace/sleact/alecture (master)$ npm i typescriptnpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: react-custom-scrollbars@4.2.1npm ERR! Found: react@17.0.2npm ERR! node_modules/reactnpm ERR! peer react@">=16.8.0" from @emotion/react@11.10.6npm ERR! node_modules/@emotion/reactnpm ERR! peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.6npm ERR! node_modules/@emotion/stylednpm ERR! @emotion/styled@"^11.1.5" from the root projectnpm ERR! @emotion/react@"^11.1.5" from the root projectnpm ERR! peer react@">=16.8.0" from @emotion/styled@11.10.6npm ERR! node_modules/@emotion/stylednpm ERR! @emotion/styled@"^11.1.5" from the root projectnpm ERR! 10 more (@emotion/use-insertion-effect-with-fallbacks, ...)npm ERR!npm ERR! Could not resolve dependency:npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-custom-scrollbars@4.2.1npm ERR! node_modules/react-custom-scrollbarsnpm ERR! react-custom-scrollbars@"^4.2.1" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: react@16.14.0 npm ERR! node_modules/reactnpm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-custom-scrollbars@4.2.1npm ERR! node_modules/react-custom-scrollbars npm ERR! react-custom-scrollbars@"^4.2.1" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR!npm ERR! For a full report see:npm ERR! C:\Users\KG.Park\AppData\Local\npm-cache\_logs\2023-05-16T00_56_02_463Z-eresolve-report.txtnpm ERR! A complete log of this run can be found in:
-
미해결Electron과 NodeJS 그리고 Socket.io를 이용한 채팅 어플리케이션 개발
강의
안녕하세요리액트 관련해서 일렉트론을 수강하려고 했는데, 그 수업이 아니라고 하셔서 제의도와 맞지않아 환불을 원합니다..환불 부탁드려요 감사합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
데이터 초기화 후
안녕하세요 제로초님 이미지가 안들어가져서 데이터를 삭제하고 다시 만들었는데 갑자기 잘되던것들이 이렇게 오류가 계속뜨네요. 아래는 현재 데이터 테이블들입니다
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
백그라운드 실행과 스레드 질문
안녕하세요비동기 함수들은 백그라운드로 보내서 실행이 된다고 하셨는데그럼 백그라운드에서 실행되는 애들이 멀티스레드로 실행이 되는건가요?setTimeout, promise를 호출하면 둘 다 백그라운드로 이동하는데여기서 백그라운드 영역은 여러 스레드가 백그라운드로 온 함수들을 동시에 실행하고 태스크 큐로 보내고 이벤트 루프가 호출 스택이 비었을 때 태스크 큐에 작업이 남아있다면 호출스택으로 올려서 작업을 실행하는 것이 맞을까요?감사합니다!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
SWR Devtools 강의중
안녕하세요 제로초님 npm 사이트에서 devtools 보니까cache하고 mutate가 사라져있는데 swr하고 swr-devtools 버전을 강의하고 일치시키면 mutate 만되고 cache가 안됩니다!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
안읽은메세지 개수 표시하기
안녕하세요 제로초님 디엠부분에서는 안읽은 메시지 표시가 떠서 읽으면 없어지는데채널부분에서는 없어지지않고 남아있습니다!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
이미지 드래그 업로드하기 강의중
안녕하세요 제로초님Dm에서는 이미지가 드래그업로드가 되는데채널에서는 500에러가 뜹니다!백엔드코드 최신버전인데 바꿔야할것이 있나요?POST http://localhost:3095/api/workspaces/sleact/dms/%EC%9D%BC%EB%B0%98/images 500 (Internal Server Error)Error at Query.run (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/dialects/mysql/query.js:52:25) at /Users/js/Desktop/sleact/back/node_modules/sequelize/lib/sequelize.js:314:28 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async MySQLQueryInterface.insert (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/dialects/abstract/query-interface.js:308:21) at async DM.save (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/model.js:2432:35) at async DM.create (/Users/js/Desktop/sleact/back/node_modules/sequelize/lib/model.js:1344:12) at async /Users/js/Desktop/sleact/back/routes/api.js:522:20 POST /api/workspaces/sleact/dms/%EC%9D%BC%EB%B0%98/images 500 7.558 ms - 898
-
미해결Slack 클론 코딩[실시간 채팅 with React]
로그인 회원가입 둘다 cors 오류가 뜹니다 ㅠㅠ 도대체 뭐가 문제일까요..
안녕하세요~ 그전까지 잘되다가 오랜만에 다시 강의를 이어가려고하는데 갑자기 안됩니다 ㅠㅠ 뭐가 문제일까요..회원가입시에도 페이지가 넘어가지않고 계속 CORS 오류가 생기네요.. https://github.com/nuring9/react-SWR-SlackClone_front제가 따라한 코드 깃허브 주소올립니다 ㅠㅠ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
SWR DevTools 관련
안녕하세요 SWR관련 질문이 있습니다.혹시 React 18버전에서는 SWR DevTools를 어떻게 사용할 수 있는지 부탁 드립니다.감사합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
채팅보내기 강의중
안녕하세요 제로초님!채팅보내기 강의를 보고있는데 workspace/index.tsx에서갑자기 socket 코드 가생겼는데 강의에는 설명이 없는거 같아서 문의 남깁니다!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
에러처리
에러처리 해줄때 app.js에 에러처리 미들웨어를 해주시는데 꼭 이 방식으로 에러 처리를 해줘야하나요? 아니면 보통 router를타고 특정 함수에서 res.status(405).json(dfsa);이렇게 하나하나 처리해주면 안되나요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
str.toLowerCase is not a function
예상하지 못한 부분에서 에러가 나와서 질문 남겨드립니다 !ChatBox.tsximport React, { useCallback, useEffect, useRef, VFC } from 'react'; import { ChatArea, EachMention, Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import autosize from 'autosize'; import { Mention, SuggestionDataItem } from 'react-mentions'; import { useParams } from 'react-router'; import useSWR from 'swr'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { const { workspace } = useParams<{ workspace: string }>(); const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher); const textareaRef = useRef<HTMLTextAreaElement>(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); const renderSuggestion = useCallback( ( suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focus: boolean, ): React.ReactNode => { if (!memberData) return; return ( <EachMention focus={focus}> <img src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })} alt={memberData[index].nickname} /> <span>{highlightedDisplay}</span> </EachMention> ); }, [memberData], ); return ( <ChatArea> <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyPress={onKeydownChat} placeholder={placeholder} inputRef={textareaRef} allowSuggestionsAboveCursor > <Mention appendSpaceOnAdd trigger="@" data={memberData?.map((v) => ({ id: v.id, display: v.nickname })) || []} renderSuggestion={renderSuggestion} /> </MentionsTextarea> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true" /> </SendButton> </Toolbox> </Form> </ChatArea> ); }; export default ChatBox;혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
데이터 질문이요
const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; mutateChat((prevChatData) => { prevChatData?.[0].unshift({ id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt: new Date(), }); return prevChatData; }, false).then(() => { localStorage.setItem(`${workspace}-${id}`, new Date().getTime().toString()); setChat(''); if (scrollbarRef.current) { console.log('scrollToBottom!', scrollbarRef.current?.getValues()); scrollbarRef.current.scrollToBottom(); } }); axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => console.log('first')) .catch(console.error); } }, [chat, workspace, id, myData, userData, chatData, mutateChat, setChat], ); const onMessage = useCallback( (data: IDM) => { if (data.SenderId === Number(id) && myData.id !== Number(id)) { mutateChat((chatData) => { chatData?.[0].unshift(data); return chatData; }, false) 이부분은 socket?.on('dm', onMessage) dm보내는 페이지에서 디엠을 보낼 때 onSubmitForm에서 mutate가 먼저 실행돼서 화면 데이터를 먼저 바꿔주고 그 다음 서버로 데이터를 보낸 뒤 처리하는 과정에서 socket.emit()이 실행되고 onMessage가 실행되는 걸로 이해했는데요. onMessage가 받는 데이터가 onSumbitForm의 mutate가 인자로 받는 함수랑 똑같아서 중복작업이 아닌가 싶어서 onMessage mutate 안의 chat.Data?.[0].unshift(data)를 지우고 실행해봐도 똑같은 결과가 나오는데 이 코드는 왜 있는 건가요?