만약에 닉네임을 name[react](23) 라고 지었고, id가 20이라면data.content는 @[name[react](23)](20) 이런식으로 되잖아요. 그런데 거기서 코드에 있는 정규표현식을 쓰면 match는](1) 부분을 빼먹게 되고 그 상태에서 arr을 구하면닉네임이 name[react 으로, id는 1이 아닌23으로 출력되더라고요. 실제로 예시와 똑같이 회원가입 하고 name[react](23)에게 멘션 해보니클릭했을 때 초깃값으로 파란줄이 name[react 까지만 생성되고 추가로 ](20) 이란 텍스트가 더해지더라고요. (참고로 name[react](23)의 ID가 20입니다.)물론 Link로 넘어가는 것도 안되고요. 그래서 +? 말고 그냥 +로 해보니깐 위처럼 잘 매칭 되는 것 같아서 코드에 적용시켰더니이제 Link부분은 잘 나오는데 멘션 클릭시 초깃값이 여전히 이상하게 나옵니다. 저 부분은 어딜 고쳐야 되는 건가요?  

웹 소켓쓸 때 폴링방식으로 쓰면 http갔다가 웹 소켓으로 전환되기 때문에 CORS문제가 발생한다고 했는데 http요청을 한다 한들 저희는 이미 proxy를 설정한 상태인데 왜 cors문제가 발생하는 건가요?

다시 시도해보고 질문하겠습니다.

정보를 입력 후 회원가입 버튼을 클릭하면콘솔창에 제로초님 화면처럼정보들이 나열되지않습니다! -백 콘솔창Executing (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'ChannelMembers' AND TABLE_SCHEMA = 'sleact'Executing (default): SHOW INDEX FROM ChannelMembers FROM sleactDB 연결 성공GET /api/users 304 24.697 ms - -GET /api/users 200 4.038 ms - 5GET /api/users 304 2.241 ms - -GET /api/users 304 3.459 ms - -GET /api/users 304 2.637 ms - -GET /api/users 304 2.528 ms - --회원가입 indeximport useInput from '@hooks/useInput'; import { Header, Form, Label, Input,Error, Success, LinkContainer, Button } from "./style"; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, useState } from "react"; import { Redirect } from "react-router-dom"; import useSWR from 'swr'; const Signup = () => { const [email, setEmail] = useState(''); const [nickname, setNickname] = useState(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const {data: userData} = useSWR('/api/users', fetcher); const [signupError, setSignUpError] = useState(false); const [signUpSuccess, setSignUpSuccess] = useState(false); const [mismatchError, setMismatchError] = useState(false); const onChangeEmail = useCallback ( (e) => { setEmail(e.target.value); }, []); const onChangeNickname = useCallback ( (e) => { setNickname(e.target.value); }, []); const onChangePassword = useCallback ( (e) => { setPassword(e.target.value); setMismatchError(passwordCheck !== e.target.value); }, [passwordCheck, setPassword], ); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setMismatchError(password !== e.target.value); }, [password, setPasswordCheck], ); const onSubmit = useCallback( (e) => { e.preventDefault(); if(!nickname || nickname.trim()) { return; } if(! mismatchError) { setSignUpError(false); setSignUpSuccess(false); axios .post('/api/users', {email, nickname, password }) .then(() => { setSignUpSuccess(true); }) .catch((error) => { console.log(error.response?.data); setSignUpError(error.response?.data?.code ===403); }); } }, [email, nickname, password, mismatchError], ); if (userData) { return <Redirect to ="/workspace/sleact"/>; } return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail}/> </div> </Label> <Label id="nickname-label"> <span>닉네임</span> <div> <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickname}/> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword}/> </div> </Label> <Label id="password-check-label"> <span>비밀번호 확인</span> <div> <Input type="password" id="password-check" name="password-check" value={passwordCheck} onChange={onChangePasswordCheck}/> </div> {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>} {!nickname && <Error>닉네임을 입력해주세요</Error>} {signupError && <Error>이미 가입된 이메일입니다.</Error>} {signUpSuccess && <Success>회원 가입되었습니다! 로그인해주세요.</Success>} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요?&nbsp; <a href="/login">로그인 하러 가기</a> </LinkContainer> </div> ); }; export default Signup; -개발자도구 콘솔창-개발자도구 네트워크요청 URL:http://localhost:3090/api/users요청 메서드:GET상태 코드:304 Not Modified원격 주소:[::1]:3090리퍼러 정책:strict-origin-when-cross-origin응답 헤더소스 보기access-control-allow-credentials:trueconnection:closedate:Wed, 26 Apr 2023 05:29:10 GMTetag:W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ"vary:Originx-powered-by:Express요청 헤더소스 보기Accept:application/json, text/plain, /Accept-Encoding:gzip, deflate, brAccept-Language:ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7Connection:keep-aliveHost:localhost:3090If-None-Match:W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ"Referer:http://localhost:3090/signupsec-ch-ua:"Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99"sec-ch-ua-mobile:?0sec-ch-ua-platform:"Windows"Sec-Fetch-Dest:emptySec-Fetch-Mode:corsSec-Fetch-Site:same-originUser-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

const onCreateWorkspace = useCallback( (e: any) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; // trim : 앞 뒤 공백제거 if (!newUrl || !newUrl.trim()) return; axios .post( 'http://localhost:3095/api/workspaces', { Workspace: newWorkspace, url: newUrl, }, { withCredentials: true }, ) .then(() => { mutate(userData, true); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], );뭐가 문제인건가요?

interface Props { show: boolean; onCloseModal: () => void; style: CSSProperties; closeButton?: boolean; } const Menu: FC<React.PropsWithChildren<{}>> = ({ children, style, show, onCloseModal, closeButton }) => {...}이 상태에선 Props타입을 어떻게 넣어야 하는 건가요? 

1번.axios요청후 then으로 처리 : Pessimistic UImutate(data, true) : Optimistic UImutate(data, false) : 데이터를 바꾸는데 서버에 요청 및 점검을 안함. 2번 mutate(data, true) : Pessimistic UImutate(data, false) : Optimistic UI 처음엔 1번으로 이해를 했는데 shouldRevalidate를 false로 넣어서 시도했을 때 주기적으로 GET요청이 되는 직후 바로 로그아웃을 클릭하면 추가적인 요청이 없는데 그냥 로그아웃하면 바로 추가적인 요청이 보내집니다. 주기적으로 GET요청을 하는 것과의 우연의 일치인진 모르겠는데 뭔가 자꾸 추가적인 GET요청이 되었다 안되었다 하더라고요. 그래서 false를 넣어도 점검을 하는 2번인가 싶기도 하고 헷갈립니다. 뭐가 맞는거죠?

http://localhost:3090/workspace/channelhttp://localhost:3090/ 로 접근해서 해당 path까지 접근이 잘되지만 이후 새로고침하면 자바스크립트를 불러오지 못하여 에러가 납니다.<body> <div id="app"></div> </body>//에러코드 Rfused to apply style from 'http://localhost:3090/workspace/public/client-boot-styles.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. GET http://localhost:3090/workspace/public/slack-icons-v2-fe043a5.woff2 net::ERR_ABORTED 404 (Not Found) GET http://localhost:3090/workspace/dist/app.js net::ERR_ABORTED 404 (Not Found) Rfused to execute script from 'http://localhost:3090/workspace/dist/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. GET http://localhost:3090/workspace/public/favicon.ico 404 (Not Found) the resource http://localhost:3090/workspace/public/slack-icons-v2-fe043a5.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.제 생각에는 http://localhost:3090/workspace/ router가 없어서 channel까지 오지 못하고 중간에서 끊기는 것 같은데 <Routes> <Route path="/" element={<Navigate to="/signin" replace />} /> <Route path="/signin" element={<SignInPage />} /> <Route path="/signup" element={<SignUpPage />} /> <Route path="/workspace" element={<Navigate to="/workspace/channel" replace />} /> <Route path="/workspace/channel" element={<ChannelPage />} /> </Routes>workapce경로에서 channel로 redirect를 걸어주려고 하는데 잘 되지 않습니다 어떻게 개선하면 좋을까요?

그냥 기존의 백엔드 app.js 코드 그대로 하고 웹팩 데브서버에 프록시 설정을 하지 않고 회원가입 했을 때 201로 요청이 성공했습니다. 하지만 제로초님과 달리 OPTIONS요청이 추가적으로 생기지 않았고 POST요청만 네트워크 창에 보이는데 잘못된게 있는 건가요 아님 시스템 상 뭐가 바뀐건가요? 작동상 문제는 없는데 궁금해서 여쭤봅니다.index.tswebpack.config.tsapp.js

mysql 실행할 때 프롬프트에서 mysql -h localhost -u root -p 로 입력한 사용자 명이랑 config.js 파일에서의 username값과 일치해야 하나요? 그리고 프롬프트로 들어가지 않고 그냥 MySQL 8.0 Command Line Client 파일을 클릭해서 실행시키면 바로 비번입력하는게 나오던데 이렇게 들어가도 상관없나요?

이전수업을setting/ts에서 따라해보면서쫒아왔는데요!github에서 받은것은 완성본이라고 하셨는데,폴더생성 및 추후 페이지작업 프론트작업도setting/ts에서 진행해도될까해서 질문드립니다.

 강의 수강중에 에러가 발생했는데, 이를 찾지 못하겠습니다.  회원 가입으로 axios 해서 넘어가는거는 알겠는데... 위의 캡처 긍르 보면 api.js에서 addMembers를 호출하는데 에러가 나고 있습니다. 에러는 Cannot read properties of null (reading 'addMembers')라는데 이 부분에서 에러가 왜 나는지 잘 모르겠습니다.  분명 같은 이메일로 로그인 시도시 "이미 있는 사용자입니다"하는 response를 받고 있는 상황입니다.

 어느부분을 봐야할까요?

-코드-import 'core-js/stable'; import 'regenerator-runtime/runtime'; import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import axios from 'axios'; import App from './layouts/App'; axios.defaults.withCredentials = true; axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'https://sleact.nodebird.com' : 'http://localhost:3090'; render( <BrowserRouter> //오류발생구간 <App /> </BrowserRouter>, document.querySelector('#app'), ); -오류내용-ERROR in ./client.tsx:15:4TS2786: 'BrowserRouter' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/Users/LG gram 15/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. 13 | 14 | render( > 15 | <BrowserRouter> | ^^^^^^^^^^^^^ 16 | <App /> 17 | </BrowserRouter>, 18 | document.querySelector('#app'),sleact (webpack 5.74.0) compiled with 1 error in 9547 ms  백엔드 서버를 킨 상태에서,npm i 실행하였고npm run build를 실행하게되면위에 오류가 발생됩니다. 

지금 이런식으로 저는 파일구조가 되어있는데 저도 파일구조의 상태에서 npm run build를 했을때 콘솔창에 2번 myWebpackLoader에 작성한 문구가 나왔습니다. 이렇게 되면, index.js에서 한번 사용된거고 main.js에서 한번 사용된게 맞을까요.. ? 저 main.js는 output으로 build될때 만들어지도록 설정해놓은 파일인데, 로더가 output의 확장자와 겹칠때도 작동을 하는건가..? 싶어서 여쭙습니다!

영상을 보면서 진행하다보니 packge.json 스크립트에 TS_NODE_PROJECT가 추가되어있어 깃허브 setting으로 가서 확인을 해보니 tsconfig-for-webpack-config 파일이 추가되어있더라구요 근데 깃허브 package.json에는 "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack"이렇게 되어있는데 TS_NODE_PROJECT 스크립트와 tsconfig-for-webpack-config.json 파일에 대해서 설명을 추가로 부탁드릴 수 있을까요?또한 영상과 달리 npm run dev에서는 cross-env가 빠져있는데 그부분도 빠져도 상관없는지 궁금합니다 

깃헙에서 소스파일 받고alecture 에서 npm -i 이후에 npm run devlocalhost:3090에서 아무것도 안보입니다..뭐가 문제일까요?

안녕하세요.. 제가 members로 채널정보가 처음엔 제대로 불러와지는데 추후 일정한 간격으로 요청이다시 시작되고, 그 뒤로 404 에러가 뜹니다.. 코드를 보면서 문제점을 찾으려고 해보아도 되지않아서 글을 올립니다 ㅠㅠ..아직 채널 페이지를 완료하지 않아서 생긴 문제일껄까요..?https://github.com/nuring9/react-SWR-SlackClone_front제 깃허브 주소입니다..

aleecture 폴더로 이동한뒤 npm run dev 를 실행할시 이렇게 오류가 발생하여서 webpack 설정이 잘못된것 같아서 구글링을 통해 재설치를 하여도 이렇게 오류가 발생하여서 질문 남깁니다! 오류 텍스트[webpack-cli] Failed to load '/home/kang/Desktop/sleact/alecture/webpack.config.ts' config [webpack-cli] webpack.config.ts:5:38 - error TS2307: Cannot find module 'webpack-bundle-analyzer' or its corresponding type declarations. 5 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; ~~~~~~~~~~~~~~~~~~~~~~~~~

구글링 해보니 다른 웹팩 버전이 설치된 경우 발생할 수 있는 에러라고 해서 웹팩 재설치 및 node_dodules, package-lock.json 삭제 후 npm i, npm run dev 해도 해결이 안되네요확인 부탁드리겠습니다======== 에러메시지 ========[webpack-cli] TypeError: The 'compilation' argument must be an instance of Compilation at Function.getCompilationHooks (C:\Users\SJ\documents\sleact\front\ts\node_modules\webpack\lib\NormalModule.js:227:10) at C:\Users\SJ\documents\sleact\front\ts\node_modules\webpack\lib\HotModuleReplacementPlugin.js:767:18 at Hook.eval (eval at create (C:\Users\SJ\Documents\sleact\front\ts\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:104:1) at Hook.CALL_DELEGATE [as call] (C:\Users\SJ\Documents\sleact\front\ts\nodemodules\tapable\lib\Hook.js:14:14) at Compiler.newCompilation (C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:1122:26) at C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:1166:29 at Hook.eval [as callAsync] (eval at create (C:\Users\SJ\Documents\sleact\front\ts\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at Hook.CALL_ASYNC_DELEGATE [as callAsync] (C:\Users\SJ\Documents\sleact\front\ts\nodemodules\tapable\lib\Hook.js:18:14) at Compiler.compile (C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:1161:28) at C:\Users\SJ\Documents\sleact\front\ts\node_modules\webpack\lib\Compiler.js:524:12