Slack 클론 코딩[실시간 채팅 with React]대시보드

안녕하세요, 강의는 swr로 보고 저는 제로초님 깃헙에 front-rq 레포 보면서 react-query로 진행 하고 있는데요, 강좌가 swr이라 가능하면 혼자 에러 해결하려 했는데 몇시간째 해결이 안되서 질문 남깁니다ㅜ 부탁드립니다. 에러 원인은 chatData가 undefined 여서 생기는 것 같습니다. pages/Channel/index.tsx에서 useInfiniteQuery 요청이 안가고 chatData가  undefined로 나옵니다.  members, channels 정보 요청은 정상적 불러오는데 useInfiniteQuery로 불로온 요청은 응답하지 않는 이유를 모르겠습니다. 강의 보면서 하다가 isLoading, isFetching 도 넣어보고, 순서도 바꿔 보고 했는데 안되서 지금은 제로초님 git hub에 fornt-rq 폴더의 코드를 복붙했는데도 Can't not read properties undifined 에러 뜨네요 ㅠ 전체 코드 https://github.com/HomieKim/sleact/blob/master/pages/Channel/index.tsx

안녕하세요 제로초님 강의 3:41의 내용을보고 코드를 치는도중에 myData와 Sender, userData.id, Receiver 이 Failed to compile 에러가 났습니다 로초님께서 올려주신 깃헙코드를 복붙도해보고 강의코드와 비교도해보고 API문서도 확인해보았으나 제가 어느부분을 놓쳐서 이러한 에러가 나는지 모르겠습니다   const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR<IUser | false>(`/api/workspaces/${workspace}/users/${id}`, fetcher); const { data: myData } = useSWR('/api/users', fetcher); const { data: chatData, mutate: mutateChat, setSize, } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=${PAGE_SIZE}&page=${index + 1}`, fetcher, );   제 SWR 코드입니다.  

안녕하세요 먼저 바쁘신데 바보같은 질문글 올려 죄송합니다. 저는 강의(라우터 주소 설계 중반까지 강의를 들었습니다)를 보는 도중 children을 사용하다가 중첩라우터 사용을 시도를 하였는데요,   코드를 잘못쓴 덕분에 이런 웹페이지의 형태로 보이게 되었습니다.  그래서 제로초님께서 올려주신 공지사항의 유튜브와 구글링을 참고하여  layout>Workspace>index.js //중략 <Chats> <Routes> <Route path="/channel/:channel" element={<Channel />} /> <Route path="/dm/:id" element={<DirectMessage />} /> </Routes> </Chats> //중략 기존의 코드를 //중략 <Chats> <Routes> <Route path="/:channel" element={<Channel />} /> <Route path="/:id" element={<DirectMessage />} /> </Routes> </Chats> //중략 이렇게 수정하였습니다   웹페이지를 확인해보니 정상적으로 돌아오긴 하였으나 제가 올바르게 수정했는지 아닌지 몰라 이렇게 질문글 올립니다.   그리고 로그아웃후 로그인을 하면 기존의 워크스페이스가 안뜨지만 새로고침을 누르면 기존의 워크스페이스들이 뜨는 버그?가 발생하게 되었습니다. 콘솔에 에러는 전혀 나지 않는 상황이고 제가 어느부분의 설정을 잘못했는지 파악하려 시도했지만 서버코드까지 살펴보아도 대체 어느부분을 놓치고있는지 감도 오지 않아서 코드부분을 올리지 못하였습니다..ㅠㅠ 저런 현상이 혹시 SWR옵션과 관련있을까요 ..? 😭    

useSWR를 사용해 get요청을 보내서 현재 사용자가 로그인을 한 상태인지 확인한다고 하셨는데 get요청과 함께 보낸 파라미터가 없는데도 불구하고 어떻게 백엔드 쪽에서 이 사용자가 로그인 했다는 것을 알 수 있는지 원리가 궁금합니다.

노드버드나 다른강의에서는 map돌리는것들 깔끔하게 함수로 뺏는데 여기서는 swr로 데이터를 가져왔기때문에 jsx영역에서 map돌리는건가요 ? 뺴고싶어서 요렇게 함수로 뺏는데 적용이 안되더라구요 ? 그리고 userData에 interface  | 유니언으로  false사용하면   이렇게 워크스페이스 타입이없다고 뜨는데  유니언 타입써서 얘가 IUser 타입인지 확실하게 하지못해서 뜬다고 생각하여 as 로 단언을 시켯는데 왜저렇게뜰까요?       물론 제로초님이 작성하신 코드대로 jsx영역에서 map돌리면 다해결되긴하는데 ... 궁금해서요

cli로 생성하면 router 를 스위치로 하는게 아니라  pages에 생성하면 자동으로 라우터 등록되잖아요 ? 그안에서 중첩라우터 사용하려면 어떻게해야하나요 ? 첫번째방법인 layout 안에 {children} 이런식으로 사용하는 방법밖에 없나요 ?

안녕하세요 제로초님. 강의를 들으면서 useSWR(`/api/users`,fetcher)부분을 많이 보았는데요, 백엔드에서는 return으로 req.user만 전달해주던데, req의 user를 어디에 어떻게 실어서 보내는지 알 수 있을까요? 어떤 로직으로 user의 정보가 반환되는지, false가 되는지 궁금합니다!  router.get("/users", (req, res, next) => {   return res.json(req.user || false); });  

  react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 이라는 콘솔에러가 계속 뜨길래 구글링을 하여  import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './layouts/App'; const rootElement = document.getElementById('root'); if (!rootElement) throw new Error('Failed to find the root element'); const root = ReactDOM.createRoot(rootElement); root.render( <React.StrictMode> <App /> </React.StrictMode>, );       로 코드를 바꿔서 실행하니 local이 성공적으로 켜지긴하지만  이렇게 어마어마한 에러가 출력됩니다 제가 어느부분의 코드를 잘못작성하여 이렇게 뜨는지 모르겟습니다 🤔

안녕하세요 제로초님, const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); 이 코드에서 useparams를 사용할 때, channel이 undefined로 나옵니다. app.tsx에서  마지막 라우터를 /workspace/:workspace/* 로 설정해주었는데, 콘솔로 useparams의 객체를 찍어보면, 이런식으로 나오게 됩니다.  workspace/ index.tsx에서는 이렇게 설정해주었는데, 잘못된 부분이 있을까요?? 답변 주시면 감사하겠습니다! 버전은 react  v18, react-router v6를 사용하고 있습니다.  

바보같은 질문일 수 있겠지만 용기내어 해보겠습니다. 일단 저는 슬리액 백, 프론트 둘 다 구매해서 듣고있습니다. 슬리액 프론트 백을 참고해서 다른 프로젝트에 적용시켜보고 있는 과정에서 궁금한점이 생겼습니다.  여기서 mutate에 데이터를 넣고 swr data에 로그인 된 데이터가 들어가는걸로 이해를 했고, http://localhost:1010/auth/ 에서 GET 으로 API를 요청해서 데이터를 받아와서 페이지에서 유저가 로그인 되어있음을 알 수 있다고 이해했습니다.그런데 서버단에서는 위에 있는 코드로 GET 요청을 해서 유저 정보를 가지고 오는건데 유저를 찾는 부분도 없는데 어떻게 들고 온다는 건지 모르겠습니다.  

리액트 프로젝트를 할 때 모두 CRA로 초기 세팅을 잡고 시작했었는데 이번에 강의를 수강하게 된 이유가 CRA로 세팅하지 않고 처음부터 세팅한다는 점에 있었는데요, 그래서 alecture 폴더를 모두 지우고 다시 만든 후 npm init을 쳤는데 그대로 소스가 옮겨져오더라구요 컴포넌트 폴더 , 페이지 폴더 등등 하위 소스까지 모두 다요 혹시 어떤 부분 때문에 이렇게 모두 다시 생성이 되는지 여쭤봐도 될까요? git clone 이후 진행하였습니다.

안녕하세요 !  저는 이번에 웹팩 및 바벨 설정부터 죽 타입핑을 하며 익히고 잇는데요,  SignUp > index.tsx 부분의 일부코드인데 보시는 바와 같이 영상속 제로초님과는 다르게 `e`의 타입을 지정해주지 않으면 로컬자체가 켜지지 않더라고여 😅 혹시 제가 어느부분때문에 제로초님과 다르게 진행되고있는지 알 수 있을까요 ? const onChangeEmail = useCallback((e: any) => { setEmail(e.target.value); }, []); const onChangeNickname = useCallback((e: any) => { setNickname(e.target.value); }, []); const onChangePassword = useCallback( (e: any) => { setPassword(e.target.value); setMissmatchError(e.target.value !== passwordCheck); }, [passwordCheck], ); const onChangePasswordCheck = useCallback( (e: any) => { setPasswordCheck(e.target.value); setMissmatchError(e.target.value !== password); }, [password], );

쿠기생성이안될까요? 응답헤더에쿠기가 없어서요

namespace는 workspace이고, room은 channel로 두신 것 같은데, front에서 특정 room에 들어가는 코드가 없는 것 같은데 이에 대해서 혹시 설명 부탁 드릴 수 있을까요? namespace까지는 useSocket이용해서 연결하는데, room 관련해서 계속 찾아보는데 강의에서 못본것 같아서 물어봅니다.

강의 잘 듣고 있습니다.   한번더 강의를 복습겸 듣고 있다가 갑자기 든 의문입니다.   혹시 실무에서는 CRA보다 웹팩 바벨을 직접 세팅하는 방식으로   프로젝트를 진행하나요 ? 초보자의 시선으로 봤을때는   직접 세팅하는 방식이 더 좋다고 생각되는데 (제대로 하지는 못하지만) ...제대로 왜 좋은지에 대해서는 자세히 모르겠습니다 ㅠ   물론 기업에따라 다르겠지만 직접했을때 장점, cra를 썻을때의 단점 간단히 여쭤봐도 되겠습니까 ㅠㅠ

안녕하세요! 위와같은 오류가 나서요 26번 css랑 28번 font에 문제가 있는 것 같기도 하고 https://blinders.tistory.com/84 이 블로그에서는 html-webpack-plugin 플러그인이 필요하다는 거 같은데 해결 방법 도움 여쭈어요ㅠㅠ

새로 요청 보내는게 아니라 캐싱된 값을 사용한다구 하셨는데 강의내에서 '/api/users' 요청만 dedupingInterval 2초동안 캐싱되는 거고 `/api/workspaces/${workspace}/channels` 요청은 재요청 하는 것으로 이해해서 실습해보니 첫 실행시 users, channels, members 요청이 한번씩 실행되되고 이후에 2초간 캐싱 되는 건 refetchOnMount 같이 아예 다른 탭에 갔다가 돌아오는 경우 인 것 같습니다. 아무래도 제가 이해한 캐싱과 강의에서 말하는 캐싱이 다른 것 같아 질문남깁니다.   강의 경우 처럼 한 컴포넌트 내에서 useSWR 혹은 react-query의 useQuery를 사용하는 경우 자식 컴포넌트에서 사용하는 useQuery가 캐싱된 데이터를 사용한다고 이해해도 될까요?

{     "name": "slack-front",     "version": "1.0.0",     "description": "",     "main": "index.js",     "scripts": {         "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env development",         "build": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack",         "test": "echo \"Error: no test specified\" && exit 1"     },     "repository": {         "type": "git",         "url": "git+https://github.com/KKIMDoHyun/slack-clone-front.git"     },     "author": "dohyun_kim",     "license": "MIT",     "bugs": {         "url": "https://github.com/KKIMDoHyun/slack-clone-front/issues"     },     "homepage": "https://github.com/KKIMDoHyun/slack-clone-front#readme",     "dependencies": {         "@types/react": "^18.0.9",         "@types/react-dom": "^18.0.5",         "cross-env": "^7.0.3",         "css-loader": "^6.7.1",         "react": "^18.1.0",         "react-dom": "^18.1.0",         "style-loader": "^3.3.1",         "typescript": "^4.6.4"     },     "devDependencies": {         "@babel/core": "^7.18.0",         "@babel/preset-env": "^7.18.0",         "@babel/preset-react": "^7.17.12",         "@babel/preset-typescript": "^7.17.12",         "@emotion/babel-plugin": "^11.9.2",         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",         "@types/node": "^17.0.35",         "@types/webpack": "^5.28.0",         "@types/webpack-dev-server": "^3.11.1",         "babel-loader": "^8.2.5",         "eslint": "^8.16.0",         "eslint-config-prettier": "^8.5.0",         "eslint-plugin-prettier": "^4.0.0",         "fork-ts-checker-webpack-plugin": "^7.2.11",         "prettier": "^2.6.2",         "react-refresh": "^0.13.0",         "ts-node": "^10.8.0",         "webpack": "^5.72.1",         "webpack-cli": "^4.9.2",         "webpack-dev-server": "^4.9.0"     } } 이건 package.json이고,   import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack from 'webpack'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; const isDevelopment = process.env.NODE_ENV !== 'production'; const config: webpack.Configuration = {     name: 'slack-front',     mode: isDevelopment ? 'development' : 'production',     devtool: !isDevelopment ? 'hidden-source-map' : 'eval',     resolve: {         extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],         alias: {             '@hooks': path.resolve(__dirname, 'hooks'),             '@components': path.resolve(__dirname, 'components'),             '@layouts': path.resolve(__dirname, 'layouts'),             '@pages': path.resolve(__dirname, 'pages'),             '@utils': path.resolve(__dirname, 'utils'),             '@typings': path.resolve(__dirname, 'typings'),         },     },     entry: {         app: './client',     },     module: {         rules: [             {                 test: /\.tsx?$/,                 loader: 'babel-loader',                 options: {                     presets: [                         [                             '@babel/preset-env',                             {                                 targets: { browsers: ['last 2 chrome versions'] },                                 debug: isDevelopment,                             },                         ],                         '@babel/preset-react',                         '@babel/preset-typescript',                     ],                     env: {                         development: {                             plugins: [['@emotion', { sourceMap: true }], require.resolve('react-refresh/babel')],                         },                         production: {                             plugins: ['@emotion'],                         },                     },                 },                 exclude: path.join(__dirname, 'node_modules'),             },             {                 test: /\.css?$/,                 use: ['style-loader', 'css-loader'],             },         ],     },     plugins: [         new ForkTsCheckerWebpackPlugin({             async: false,             // eslint: {             //   files: "./src/**/*",             // },         }),         new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),     ],     output: {         path: path.join(__dirname, 'dist'),         filename: '[name].js',         publicPath: '/dist/',     },     devServer: {         historyApiFallback: true, // react router         port: 3090,         proxy: {             '/api/': {                 target: 'http://localhost:3095',                 changeOrigin: true,             },         },     }, }; if (isDevelopment && config.plugins) {     config.plugins.push(new webpack.HotModuleReplacementPlugin());     config.plugins.push(new ReactRefreshWebpackPlugin());     // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true })); } if (!isDevelopment && config.plugins) {     // config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));     // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); } export default config; 이건 webpack.config.ts 입니다.   npm run build를 하고 npm run dev를 하면 실행은 잘 되지만 localhost:3090에 접속을 하면 404가 뜹니다. 왜일까요?                

안녕하십니까 제로초님 슬랙 클론코딩 강의를 보고 실시간 챗을 구현해보고 있습니다. useSwrInfinite를 사용하여 구현하고 있고, 요청주기에 대해 궁금한점이 생겼습니다. useSwr은 DedupingInterval을 사용해서  설정한 주기 동안은 탭 변환이 일어나도 재요청을 보내지않고 캐시된 값을 그대로 사용하는 것으로 이해하고 있습니다.  그런데 useSwrInfinite의 요청 주기를 잘 모르겠어서 공식문서를 읽어보니   initialSize = 1: 초기에 로드해야 하는 페이지의 수 revalidateAll = false: 항상 모든 페이지의 갱신 시도 revalidateFirstPage = true: always try to revalidate the first page persistSize = false: 첫 페이지의 키가 변경될 때, 페이지 크기를 1(initialSize가 설정된 경우 initialSize)로 초기화하지 않음 챗을 쳐서 실시간으로 채팅이 화면에 그려질 수 있는이유는 초기에 initialSize = 1 로 설정되어 있어서  이차원 배열의 첫번째 배열이 갱신되어서 그런 것일까요? 챗을 칠때마다 갱신된 데이터를 get 할 수 있어서 좋지만 서버에 얼마만큼(어느주기로) 요청을 보내는지 알고 싶습니다.  

안녕하세요 강의 들으면서 제로초님 github(front-rq폴더) 보고 react-qeury로 진행하고 있는데요 로그인 페이지를 보면 fetcher로 유저정보 요청하고 로그인 mutation 요청 성공시 refetchQueries로 'user'라는 키값의 요청을 다시 보내는 것 같습니다.  이후 다른 컴포넌트나 페이지에서도 그냥  const { data: myData } = useQuery('user', () => fetcher({ queryKey: '/api/users' })); 이런식으로 유저정보를 가지고 오는 것 같은데 궁금한 것은  아직 강의 뒷부분을 다 안들어서 그런지 몰라도 staleTime이나 cacheTime을 설정하는 코드 또는 강의에서 말씀해주신 것 처럼 fetcher를 여러개 둬서 유저정보를 비동기 요청이 아니라 전역 데이터로 관리하는 로직도 없는 것 같습니다. 별도의 설정없이 /api/users 요청을 useQuery로 계속 받아온 다면 react-query 라이브러리를 사용하는 장점이 없는 것 같은데 제가 놓치고 있는 부분이 있는건 아닌지 혹시 react-query 사용했을 때 api/users 같은 유저정보를 받아오는 server state를 관리하는 좋은 방법은 무엇일지 궁금합니다. (cacheTime을 설정하거나 전역 데이터를 저장하는 fetcher를 두거나 아님 localStorage 같은 곳에 저장하거나 등등.. redux 강의 들을땐 그냥 리덕스 스토어에 저장해두고 useSelector로 가져온 거 같은데 react-query 나 SWR은 요부분이 감이 안잡히네요 ㅠ)