39,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
서버에 저장된 데이터 삭제하는 방법
안녕하세요 강사님! 회원가입하면서 저장된 유저데이터랑 워크스페이스, 채널 생성한 것들 삭제하려면 어떻게 하면 될까요..? 혹시 관련부분 강의해주셨다면 몇강인지 알려주시면 감사드리겠습니다!
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
2차원배열을 받는다면 타이핑을 다르게 해야 하지 않나요?
const { data: chatData, mutate: mutateChat, setSize } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, ); useSWRInfinite가 2차원배열로 데이터를 받는다고 하셨는데 그러면 타이핑을 IDM[][]로 해야 하지 않나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
proxy질문 있습니다.
안녕하세요. 제로초님 webpack devserver를 설정하지 않고 그냥 create react (cra)로 했을 경우 proxy는 어디서 설정해야 하나요? back에서 cors0허용을 하지않고 proxy로 설정하려고 할때 webpack devserver를 설정하지 않은 경우 proxy를 어떻게 설정해주는지 궁금합니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
login 성공시 화면 이동
안녕하세요 login 성공 시 화면이동하는 부분에 useSWR 사용하는 것 관련 문의드립니다 const { data } = useSWR( 'http://localhost:3095/api/users', fetcher ) if (data) { navigate('/workspace'); } 강의 코드는 위처럼 로그인 요청시 전송된 data를 useSWR로 다시 가져와서 아래처럼 data가 있으면 workspace로 이동하도록 했는데 useSWR을 쓰지않고 아래처럼 axios내부에서 로그인 성공시 바로 페이지 전환하도록 해도 상관없는지 궁금합니다. axios .then((res) => { .... navigate('/workspace'); }) 그리고 로그인 혹은 로그아웃 시 mutate나 revalidate를 꼭 호출해야하는건지도 궁금합니다. 호출 없이 workspace로 이동했을때도 저장된 user값을 useSWR로 불러올 수 있는것 같아서요!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
배포관련 강의 질문있습니다
포토폴리오를 위해 배포 해보려고 하는데 백엔드 NestJs강의만 들으면 aws에 배포 할수있을가요?아니면 NodeBird 강의를 들어야 배포할수있을가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
프론트만 공부하는데 백엔드 서버요..?
axios 강의 보면 백엔드 서버까지 써야하는데 필수인가요..? api가 안 써져도 상관 있나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Cannot find name 'SuggestionDataItem'.
SuggestionDataItem을 찾을 수 없다 나오는 데요 어디가 문제일까요? https://github.com/todayscoding/chatting_app/commit/be8f87bad5a5fb581f1dc76b817407ae50d9ce0c
- 미해결Slack 클론 코딩[실시간 채팅 with React]
로그인 후, navigate()로 채널로 이동시 페이지 에러 관련
에러의 연속이네요..ㅠㅠ 회원가입, 로그인은 전부 잘 되는데 로그인 후에 아래 코드대로라면 채널페이지가 나와야 하는데 if (data) { navigate('/workspace/channel'); return null; } 저 주소로 넘어가긴 하는데 넘어가서 아래 사진처럼 에러가 계속 뜹니다.. 참고로 위 사진처럼 에러 뜨기 전에는 you cannot render a <router> inside another <router>. you should never have more than one in your app. 이런 에러메세지가 나왔는데, 이건 라우터가 중복이라서 나오는거라고 해서 (그렇지만 저는 다른 파일에서도 'Routes'와 'Route'만 썼지, 'BrowserRouter'를 쓰진 않았는데.. 라우터 중복이라는 에러가 왜 나왔는지 모르겠네요) app.tsx파일에서 {BrowserRouter as Router} 를 지우니까 이 메세지는 안나오고 현재는 위 사진과 같이 메세지가 나옵니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
회원가입하면 sleact체널을 기본으로 받잖아요
회원가입하면 그 회원가입한 계정에 들어가 있는 기본 sleact 체널에 이름을 백엔드 에서 어떤걸 수정해야 할가요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
loadable 에러 (라우터6버전)
안녕하세요, router6버전으로 업그레이드를 하고, 버전에 맞게 코드 수정을 했는데, loadable에서 저렇게 두개가 같은 에러가 납니다 다른분 질문하신거에는 'export default '가 없어서 났던거라고 되어있는데, 저는 그거는 다 되어있는데도 에러가 나네요.. 에러메세지는 사진에서처럼 나오는데 구글링해도 잘 나오지가 않아서 질문올립니다! 어떻게해야 해결이 될까요...
- 미해결Slack 클론 코딩[실시간 채팅 with React]
강의 잘보고있습니다.
인스펙터 네트워크에 헤더에 관해 무슨의미인지 알아 두는 것이 좋다고 말씀하셨는데, 혹시라도 그 부분에 대해서 공부를 하고 싶다면 어느 파트를 공부하여야 하는지 궁금합니다. 노드js, 데이터 베이스 등, 구체적으로 알려주실 수 있으십니까 .. 바쁘신데 죄송합니다 답변 기다리고있겠습니다 !
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
도와주세요ㅠㅠㅠ (로그인 쿠키 저장안됨)
안녕하세요. 요즘 열심히 듣고 실습하고 있는데 이 에러때문에 몇시간은 찾아봐도 해결이 안되서 결국 질문 남기네요.. swr버전 업데이트 관련 공지와 다른분의 쿠키관련 질문을 봤지만 해결이 안됩니다.. 도대체 이유를 모르겠습니다. 코드한번만 봐주시면 감사하겠습니다..! 참고로 위에 코드에서 .then(() => { mutate(); }) 이렇게 해도 에러는 똑같이 납니다 로그인 시도했을 때 나오는 에러(Network 탭) (쿠키가 없어요) 회원가입성공은 하는데 회원가입 Network탭에서도 쿠키는 전혀 안보이는데 회원가입했을때 네트워크탭에서도 쿠키가 보여야 하나요? 보여야하는거면 로그인이 아니라 회원가입에서부터 잘못된것인지.. 근데 회원가입 성공할땐 별다른 에러는 없었거든요ㅠㅠ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
members get 요청 404에러, chats get요청 500 에러
안녕하세요 제로초님 강의를 잘 따라하다 members 요청이 처음만 되고 보내지는 않는것을 확인했는데요.. https://ffffront.run.goorm.io/ api/workspaces/sleact/channels/undefined/members라고 뜨면서 채널이 안불러와지는 것을 확인했습니다. 이 코드가 쓰여진 부분을 모두 살펴봤는데 원인을 알 수 없어 질문드립니다! 존재하지 않는 채널입니다. 라는 말도 나옵니다. https://ffffront.run.goorm.io/api/workspaces/sleact/dms/2/chats 채팅을 가져오는 과정에서 500번대 에러가 발생했습니다... 참고로 개발환경은 goorm ide를 사용하고 있습니다. 구름은 localhost를 쓰지 않는다고 하는데 백엔드를 공부하고 나서야 해결할 수 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
object 객체안에 array를 map 함수로 출력할 수 없나요?
interface List { id: number overValue: number } let values = [ data.List.map((value: List) => { return { id: value.id overValue: value.overValue } }) ] object 객체안에 array를 map 함수로 출력할 수 없나요? utils.js:324 Uncaught TypeError: Cannot read properties of undefined (reading '0') 이런 에러가 발생합니다 ㅠㅠ [ { "List": [ { "id": 129, "overValue": 124, } ] }, { "List": [ { "id": 130, "overValue": 124, } ] } ]
- 미해결Slack 클론 코딩[실시간 채팅 with React]
프론트부분만 따라만드려면
안녕하세요! 강의 잘 듣고 있습니다. 프론트엔드 부분만 따라만드려고 하는데 백엔드 설정은 back폴더만 다운받고, 다른건 아무것도 없는 상태에서 프론트엔드 직접 설정해서 시작하면 될까요?(cra없이) (백엔드 서버는 그대로 쓰고, 프론트는 직접 설정부터 하려면 back폴더만 다운받아서 시작하면 되는지 궁금합니다)
- 미해결Slack 클론 코딩[실시간 채팅 with React]
onKeydownChat 함수 관련 질문 드립니다.
onSubmit과 onKeyPress에서 주입하는 이벤트 파라미터 타입이 서로 다른데 상관 없을까요? 그럼 onSubmit Props 파라미터 타입을 any로 해놓은것을 지정해주려 하는데 아래처럼 지정해야 할까요? interface Props { chat: string; onSubmitForm: (e: React.FormEvent<HTMLFormElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void; onChangeChat: (e: any) => void; }
- 미해결Slack 클론 코딩[실시간 채팅 with React]
setting/ts 폴더에서 시작하는거에 대해 질문입니다.
안녕하세요. 백지상태에서 새로 시작해보려고 하는데요. setting/ts 폴더에서 시작하면 된다는 말씀을 alecture 폴더 만들지 말고 setting/ts 에서 npm i 만 해서 사용 해도 되는거라고 이해했는데 맞나요? 초기페이지는 나오는데 이게 맞는지, 앞으로 강의를 setting/ts 폴더안에서 따라해도 되는건지 궁금합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
index.html 경로 변경 시 webpack 설정
안녕하세요 강사님 기존의 index.html 파일은 가장 최상단에 위치해있는데 위처럼 public 폴더를 따로 만들어서 불러오려고 합니다. new HtmlWebPackPlugin({ template: './public/index.html', filename: 'index.html', }), 위처럼 html webpack plugin 을 써서 경로 설정을 해봤는데 index.html 파일을 찾지 못하는지 404 에러가 발생합니다. 혹시 설정 방법 아시면 알려주실 수 있나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react-refresh/runtime.js 에러
강의 따라하고있는데 핫로딩 추가하는 부분에서 에러가 생겼습니다. 핫로딩 추가하기 전에는 npm run build 까지는 성공을 했는데 추가하고나니 npm run build , npm run dev 모두 작동을 안하네요 react-refresh 설치 후 react-refresh/babel 코드를 config파일에 추가를 했는데도 react-refresh를 찾지못하는 에러가 나는 것 같습니다. 아래는 webpack.config.ts 파일 입니다 https://github.com/devjoylee/slack/blob/develop/webpack.config.ts
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 할 땐 오류가 안 나는데 웹에 들어가보면 Error가 떠요 ㅠㅠㅠ
Failed to load resource: the server responded with a status of 404 (Not Found) -> 이런 오류가 뜨고 경로도 바꿔봤는데 안 되네요... webpack.config.ts 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 __dirname = path.resolve(); const config: webpack.Configuration = { name: 'slack-clone', 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', // app2, app3 ... 만들 수 있음 }, 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', // name : client // publicPath: '/dist/', }, devServer: { historyApiFallback: true, // react router port: 3090, // publicPath: '/dist/', // 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; package.json { "name": "alecture", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack serve --env development", "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "@emotion/babel-plugin": "^11.7.2", "@types/react": "^17.0.41", "@types/react-dom": "^17.0.14", "cross-env": "^7.0.3", "react": "^17.0.2", "react-dom": "^17.0.2", "typescript": "^4.6.2" }, "devDependencies": { "@babel/core": "^7.17.8", "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4", "@types/node": "^17.0.21", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.7.2", "babel-loader": "^8.2.3", "css-loader": "^6.7.1", "eslint": "^8.11.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.0.0", "fork-ts-checker-webpack-plugin": "^7.2.1", "prettier": "^2.6.0", "react-refresh": "^0.11.0", "style-loader": "^3.3.1", "ts-node": "^10.7.0", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } } <html> <head profile="http://www.w3.org/2005/10/profile"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>슬리액</title> <link rel="icon" type="image/png" href="http://example.com/myicon.png"> <style> html, body { margin: 0; padding: 0; overflow: initial !important; } body { font-size: 15px; line-height: 1.46668; font-weight: 400; font-variant-ligatures: common-ligatures; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } </style> <link rel="stylesheet" href="https://a.slack-edge.com/bv1-9/client-boot-styles.dc0a11f.css?cacheKey=gantry-1613184053" crossorigin="anonymous" /> <link rel="shortcut icon" href="https://a.slack-edge.com/cebaa/img/ico/favicon.ico" /> <link href="https://a.slack-edge.com/bv1-9/slack-icons-v2-16ca3a7.woff2" rel="preload" as="font" crossorigin="anonymous" /> </head> <body> <div id="app"> </div> <script src="./dist/app.js"></script> <!-- index.html로 실행할 때는 ./ 쓰고 webpack-dev-server로 실행할 때는 ./ 없이 쓴다. --> </body> </html>