39,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:seed:all 시, ERROR: Validation error 이슈
안녕하세요 강사님,강의 중 채널 생성과정에서 오류가 있어 문의를 남깁니다.먼저, 채널 데이터를 가져오지 못해 다른 문의를 찾아보니 seed 설정을 해주지 않은거 같아 npx sequelize db:create 진행하였고, 이어서npx sequelize db:seed:all 과정을 진행했습니다npx sequelize db:seed:all 을 진행하니 Validation error가 발생했습니다.다른 문의를 보니 db에 sleact table이 생성되지 않아 발생하는 문의글이 많아서 db 사진 올려드릴게요추가적으로, back 파일에서 npm run dev를 실행하면 db 연결까지 잘 됩니다.도대체 어디가 잘 못 된 건지 감이 오지 않습니다..감사합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
POST http://localhost:3090/api/users net::ERR_INTERNET_DISCONNECTED
제로초님, 코드는 정확히 따라 한 거 같은데, 무엇이 문제인지 판단이 안되네요...리액트 v18, 타입스크립트 v18, axios는 1.2.3 입니다. webpackimport path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from "webpack"; import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server"; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; const isDevelopment = process.env.NODE_ENV !== 'production'; const config: Configuration = { name: 'sleact', 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: ['IE 10'] }, 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, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, proxy: { '/api/': { target: 'http://localhost:3095', changeOrigin: true, }, }, }, }; if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); } if (!isDevelopment && config.plugins) { } export default config; index.tsximport useInput from "@hooks/useInput"; import React, { useCallback, useState } from "react"; import { Form, Label, Input, LinkContainer, Button, Header, Error} from './styles' import axios from "axios"; const SignUp = () => { const [email, onChangeEmail] = useInput('');//useInput은 커스텀 훅 const [nickname, onChangeNickName] = useInput(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const [mismatchError, setMismathError] = useState(false); const onChangePassword = useCallback((e: any) => { setPassword(e.target.value); setMismathError(e.target.value !== passwordCheck); // 함수 기준으로 외부 변수만 deps에 적어줌 내부 변수는 x }, [passwordCheck]); const onChangePasswordCheck = useCallback((e: any) => { setPasswordCheck(e.target.value); setMismathError(e.target.value !== password) }, [password]); const onSubmit = useCallback((e: React.FormEvent) => { e.preventDefault(); if(!mismatchError && nickname){ console.log('서버로 회원가입하기'); axios.post('/api/users', { email, nickname, password, }) .then((response) => { console.log(response); })//요청이 성공하면 실행 .catch((error) => { console.log(error.response); })//요청이 실패하면 실행 .finally(() => {});//성공하든 실패하든 실행시키고 싶은 것 } console.log(email, nickname, password, passwordCheck) }, [email, nickname, password, passwordCheck, mismatchError]); 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>{signUpError}</Error>} */} {/* {signUpSuccess && <Success>회원가입되었습니다! 로그인해주세요.</Success>} */} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요? <a href="/login">로그인 하러가기</a> </LinkContainer> </div> ); }; export default SignUp;이렇게 따라 한 후에 회원 가입 누르면 아래 같은 화면이 뜹니다.
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
안녕하세요.
안녕하세요.sleact 강의를 들으려고 하는데 영상에서는 SWR을 사용하시더라고요. SWR를 react query로 대체하여 강의를 들으려는데 괜찮을까요? github 확인해보니 노드버드처럼 react query 폴더가 따로 있던데 그걸 참고해서 하려고 합니다.감사합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 실행후 http://localhost:3090/
http://localhost:3090입력하면 아무반응이 없어요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react-router-dom 오류
여기서 react-router-dom에 쓰이는 Switch, Route, Redirect에서 오류가 발생했습니다.그래서 react-router-dom 버전 문제가 있어서 코드를 바꿔서 진행했습니다. 결론은 여전히 빨간색 오류가 발생하는데 어떤 부분이 오류인지 찾기 힘들어서 여쭤봅니다!!BrowserRouter 추가하는 것도 오류가 발생합니다 Its instance type 'BrowserRouter' is not a valid JSX element. TS2786: 'BrowserRouter' cannot be used as a JSX component. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/Users/user/node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'.오류메시지입니다 react-router-dom 버전 "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3",
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm vs yarn
첫 인프런 강좌로 이 수업을 듣게 되었습니다. 기존 리액트를 사용했을 때, yarn으로 설치를 했었는데이 강의에서는 npm을 사용하는 것으로 보이는데npm 대신 yarn으로 설치해도 문제가 없나요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
회원가입 로그인 api 설정 하고 난뒤로 화면이 로딩중만 떠요
1. 라이브러리도 다 설치했고2. 백도 연결했고3. 로직도 계속안되서 깃허브꺼를 복사해서도 했는데404만 뜨네요.. 어떤부분이 잘못된걸까요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
http://localhost:3090/을 실행하면 Cannot GET 이렇게 뜹니다..
client.js 라우터 설정하고import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from '@layouts/App'; render( <BrowserRouter> <App /> </BrowserRouter>, document.querySelector('#app'), );App.tsx 도 라우터 설정하고import React from "react"; import { Switch, Route, Redirect } from 'react-router-dom'; import LogIn from '@pages/LogIn'; import SignUp from '@pages/SignUp'; const App = () => { return ( <Switch> <Redirect exact path="/" to="/login" /> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> </Switch> ); }; export default App;이렇게 했는데렌더링이 안되고 에러도 안생기고.. 깃허브 보면서 코드확인했는데 다른게 없는거 같은데 안되요...
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 실행하니까 이상한 화면이 실행이 되요...
leo@LEO-MackBook ~/Desktop/Inflearn_SLEACT/sleact/alecture main npm run dev > alecture@1.0.0 dev > webpack serve --env development <w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration. <i> [webpack-dev-server] [HPM] Proxy created: /api/ -> http://localhost:3095 <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:3090/ <i> [webpack-dev-server] On Your Network (IPv4): http://172.30.1.18:3090/ <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:3090/ <i> [webpack-dev-server] Content not from webpack is served from '/Users/leo/Desktop/Inflearn_SLEACT/sleact/alecture' directory <i> [webpack-dev-server] 404s will fallback to '/index.html' @babel/preset-env: `DEBUG` option Using targets: { "ie": "10" } Using modules transform: auto Using plugins: proposal-class-static-block { ie } proposal-private-property-in-object { ie } proposal-class-properties { ie } proposal-private-methods { ie } proposal-numeric-separator { ie } proposal-logical-assignment-operators { ie } proposal-nullish-coalescing-operator { ie } proposal-optional-chaining { ie } proposal-json-strings { ie } proposal-optional-catch-binding { ie } transform-parameters { ie } proposal-async-generator-functions { ie } proposal-object-rest-spread { ie } transform-dotall-regex { ie } proposal-unicode-property-regex { ie } transform-named-capturing-groups-regex { ie } transform-async-to-generator { ie } transform-exponentiation-operator { ie } transform-template-literals { ie } transform-literals { ie } transform-function-name { ie } transform-arrow-functions { ie } transform-block-scoped-functions { ie < 11 } transform-classes { ie } transform-object-super { ie } transform-shorthand-properties { ie } transform-duplicate-keys { ie } transform-computed-properties { ie } transform-for-of { ie } transform-sticky-regex { ie } transform-unicode-escapes { ie } transform-unicode-regex { ie } transform-spread { ie } transform-destructuring { ie } transform-block-scoping { ie } transform-typeof-symbol { ie } transform-new-target { ie } transform-regenerator { ie } proposal-export-namespace-from { ie } syntax-dynamic-import syntax-top-level-await Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set. Webpack Bundle Analyzer is started at http://127.0.0.1:8888 Use Ctrl+C to close it asset app.js 1.53 MiB [emitted] (name: app) runtime modules 28.4 KiB 13 modules modules by path ./node_modules/core-js-pure/ 122 KiB 119 modules modules by path ./node_modules/@pmmmwh/react-refresh-webpack-plugin/ 52.7 KiB 23 modules modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules modules by path ./node_modules/webpack/hot/*.js 4.59 KiB 4 modules modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules modules by path ./node_modules/scheduler/ 26.3 KiB 4 modules modules by path ./node_modules/react-refresh/ 20.2 KiB 2 modules modules by path ./node_modules/react/ 70.6 KiB 2 modules modules by path ./node_modules/react-dom/ 875 KiB ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated] ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated] + 7 modules sleact (webpack 5.75.0) compiled successfully in 6017 ms실행하니까 이런 화면이 뜨는데 왜그런건까요???
- 미해결Slack 클론 코딩[실시간 채팅 with React]
setting/ts/webpack.config.ts 여기도 에러가 너무 많이 생겼어요ㅜㅜ
(사진)
- 미해결Slack 클론 코딩[실시간 채팅 with React]
깃허브에서 클론 받아온 내용이랑 현재 동영상의 내용이 다른데 그냥 이대로 진행하면되는건가요??
강의에 있는 client.tsx 파일이고깃허브에서 받아온 client.tsx 파일 내용인데 두개가 같은 파일에 내용이 다른데 지금 제가 이걸 어떤걸 따라가면될까요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm i 하는데 error가 납니다,.
npm ERR! code 1 npm ERR! path /Users/leo/Desktop/제로초-타입스크립트 (슬랙클론코딩)/sleact/back/node_modules/bcrypt npm ERR! command failed npm ERR! command sh /var/folders/qg/4dd42fqx19z1586_bnwpnls40000gn/T/install-f8f8f103.sh npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.17.0 | darwin | x64 npm ERR! gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTools/usr/bin/python3" npm ERR! gyp info spawn /Library/Developer/CommandLineTools/usr/bin/python3 npm ERR! gyp info spawn args [ npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py', npm ERR! gyp info spawn args 'binding.gyp', npm ERR! gyp info spawn args '-f', npm ERR! gyp info spawn args 'make', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/leo/Desktop/제로초-타입스크립트 (슬랙클론코딩)/sleact/back/node_modules/bcrypt/build/config.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/leo/Library/Caches/node-gyp/16.17.0/include/node/common.gypi', npm ERR! gyp info spawn args '-Dlibrary=shared_library', npm ERR! gyp info spawn args '-Dvisibility=default', npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/leo/Library/Caches/node-gyp/16.17.0', npm ERR! gyp info spawn args '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp', npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/leo/Library/Caches/node-gyp/16.17.0/<(target_arch)/node.lib', npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/leo/Desktop/제로초-타입스크립트 (슬랙클론코딩)/sleact/back/node_modules/bcrypt', npm ERR! gyp info spawn args '-Dnode_engine=v8', npm ERR! gyp info spawn args '--depth=.', npm ERR! gyp info spawn args '--no-parallel', npm ERR! gyp info spawn args '--generator-output', npm ERR! gyp info spawn args 'build', npm ERR! gyp info spawn args '-Goutput_dir=.' npm ERR! gyp info spawn args ] npm ERR! gyp: Undefined variable module_name in binding.gyp while trying to load binding.gyp npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1 npm ERR! gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28) npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) npm ERR! gyp ERR! System Darwin 21.6.0 npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" npm ERR! gyp ERR! cwd /Users/leo/Desktop/제로초-타입스크립트 (슬랙클론코딩)/sleact/back/node_modules/bcrypt npm ERR! gyp ERR! node -v v16.17.0 npm ERR! gyp ERR! node-gyp -v v9.0.0 npm ERR! gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! /Users/leo/.npm/_logs/2023-01-04T02_43_12_172Z-debug-0.log노드버전 : v16.17.0운영체제 : MacBook Pro (13-inch, 2016, Four Thunderbolt 3 Ports) 버전 12.6레포 클론받고 cd back 한뒤에 npm i 했는데 에러남
- 미해결Slack 클론 코딩[실시간 채팅 with React]
초기 세팅중인데 MySQL이 설치 부터 안됩니다,.
https://dev.mysql.com/downloads/mysql/ 사이트에서 첫번째 항목을 다운받았습니다.설치하니 위 처럼 떠서 어떻게해야될까요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
sqlMessage: "Unknown database 'sleact'"
안녕하세요.npm install 후 npm run dev시 DB연결에서 오류가 나는 것 같은데, SQL은 아예 몰라 질문드립니다.아래는 해당 오류 전문입니다. uploads 폴더가 없어 uploads 폴더를 생성합니다.listening on port 3095ConnectionError [SequelizeConnectionError]: Unknown database 'sleact' at ConnectionManager.connect (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\dialects\mysql\connection-manager.js:126:17) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async ConnectionManager._connect (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\dialects\abstract\connection-manager.js:318:24) at async C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\dialects\abstract\connection-manager.js:250:32 at async ConnectionManager.getConnection (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\dialects\abstract\connection-manager.js:280:7) at async C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\sequelize.js:613:26 at async MySQLQueryInterface.createTable (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\dialects\abstract\query-interface.js:225:12) at async Function.sync (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\model.js:1300:5) at async Sequelize.sync (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\sequelize\lib\sequelize.js:793:35) { parent: Error: Unknown database 'sleact' at Packet.asError (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\packets\packet.js:712:17) at ClientHandshake.execute (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\commands\command.js:28:26) at Connection.handlePacket (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\connection.js:425:32) at PacketParser.onPacket (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\connection.js:75:12) at PacketParser.executeStart (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\connection.js:82:25) at Socket.emit (node:events:513:28) sqlMessage: "Unknown database 'sleact'" }, original: Error: Unknown database 'sleact' at Packet.asError (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\packets\packet.js:712:17) at ClientHandshake.execute (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\commands\command.js:28:26) at Connection.handlePacket (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\connection.js:425:32) at PacketParser.onPacket (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\connection.js:75:12) at PacketParser.executeStart (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (C:\Users\94app\Desktop\STUDY\sleact\back\node_modules\mysql2\lib\connection.js:82:25) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:315:12) at readableAddChunk (node:internal/streams/readable:289:9) at Socket.Readable.push (node:internal/streams/readable:228:10) { code: 'ER_BAD_DB_ERROR', errno: 1049, sqlState: '42000', sqlMessage: "Unknown database 'sleact'" }
- 미해결Slack 클론 코딩[실시간 채팅 with React]
(참고) Menu' components don't accept text as child elements. 오류
오류 원문'Menu' components don't accept text as child elements. Text in JSX has the type 'string', but the expected type of 'children' is 'Element'. Workspace/index.tsx에서 오류 Menu 컴포넌트에서 interface Props를 children 부분에서 오류 난 것 해결 참고한 사이트 : Text in JSX has the type 'string', but the expected type of 'children' is 'string | Element | Element[] 코드 이전 코드(components/Menu/index.tsx)interface Props { show: boolean; onCloseModal: (e: any) => void; style: CSSProperties; closeButton?: boolean; children: JSX.Element; } 수정 코드(components/Menu/index.tsx)interface Props { show: boolean; onCloseModal: (e: any) => void; style: CSSProperties; closeButton?: boolean; children: React.ReactNode; }
- 미해결Slack 클론 코딩[실시간 채팅 with React]
spawn UNKNOWN 관련 에러 질문 드립니다.
안녕하세요 dev 명령어로 실행할때 다음과 같은 에러 메세지가 나오는데 cross-env를 다시 설치해봐도 똑같습니다pakage.json 입니다.{ "compilerOptions": { "module": "commonjs", "moduleResolution": "Node", "target": "es5", "esModuleInterop": true } }컴파일 옵션도 확인했습니다. cross-env 관련 에러라고 파악하고 검색해봐도정확한 답변을 못찾겠어서 질문드립니다.참고로 npm run build 실행할때는 size 관련 warining은 뜨지만 정상적으로 dist 파일 생성됩니다. +) alecture 에서도 동일한 에러가 발생합니다. ㅠ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
React 프레임 워크 관련해서 질문드립니다.
안녕하세요. 제로초님 강의 잘 들었습니다.제가 처음부터 Next.js를 사용해서인지 순수 React(?)만 사용한 프로젝트는 오히려 더 어렵게 느껴졌습니다.그래서 혹시 실무에서도 해당 강의처럼 React 프레임워크를 사용하지 않고 순수하게 React만으로 프로젝트를 진행해야될 때가 많을까요?실무에서는 주로 어떤식으로 프로젝트를 진행하는지 궁금해서 질문드립니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
No overload matches this call 오류 해결방법 (redirect -> Navigate)
작성 이유--> loadable에서 코드 스플리트가 정상적으로 동작하는데, Channel과 Workspace 코드를 작성 시 Login/index.tsx가 오류가 생김--> 타입을 지정했어야 했나?(아니었음) 여러 고민하면서 시간을 보내 다른 분들도 참고하시라고 올리는 글 코드 오류가 나오는 곳--> pages/SignUp/index.tsx에 오류 없이 작성했으나 layouts/App.tsx에서 오류 나는 경우const LogIn = loadable(() => import('@pages/LogIn')); //import가 오류난다고 하는 경우 오류 코드Type 'Promise' is not assignable to type 'Promise>'.Type 'typeof import("C:/OneDrive/\uBC14\uD0D5 \uD654\uBA74/\uD070 \uD30C\uC77C\uB4E4/slack_react/sleact/alecture/pages/LogIn/index")' is not assignable to type 'DefaultComponent'.Type 'typeof import("C:/Users/131ji/OneDrive/\uBC14\uD0D5 오류 원인--> redirect를 제대로 인식하지 못함 if (data) { return redirect('/workspace/channel/'); } 오류 해결--> redirect 대신 Navigate를 사용해보세요Navigate 공식 문서import { Link, Navigate } from 'react-router-dom'; if (data) { return <Navigate to="/workspace/channel/" />; }
- 미해결Slack 클론 코딩[실시간 채팅 with React]
swr revalidate에 대해 질문드립니다.
안녕하세요 swr revalidate 가 deprecated 되어 mutate를 사용하면 된다는 답변을 확인하고 mutate를 썼는데 궁금한 점이 있습니다. mutate()를 하는 이유는 로그인 성공했을때 그 시점에 users api를 호출하기 위해서 인가요?그리고 mutate 와 무관하게 디폴트 설정에따라(화면전환등) SWR에서 userapi를 호출하고 있는것도 맞나요?1: 화면 첫 렌더링때 user api 콜로그인mutate실행으로 user api 콜화면전환했을때 다시 콜 제가 이해한게 맞는지 답변 부탁드립니다.감사합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
SWR or axios 관련 질문이 있습니다.
프론트에서 백앤드 서버로 네트워크 요청시 요청 헤더에 보면 Connection: keep-alive 라고 표기 되는데 이 상태의 요청들이 많으면 서버가 부하가 큰다던가 할 수 있는 요지가 있을까요?프론트에서 보내는 저 api 상태의 요청이 많으면 문제가 생길수 있다는데프론트에서 요청시 팬딩이 걸리는 그런 상황에 요청을 끊을 수 있는 방법이 있을까요?(백엔드 서버에 어떻게히면 부담을 줄일수 있을까 고민중입니다;)