25%
29,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Menu의 onCloseModal 이벤트에 관한 질문입니다.
Menu component에 onCloseModal 이벤트가 가장 바깥쪽의 CreateMenu에 한번, CloseModalButton에 한번 그사이에 stopPropagation 한번 있는데요, stopPropgation의 동작원리는 알겠는데 여기서 CreateMenu가 화면의 바깥쪽 크기를 전부 차지하는 것 맞나요? CSS 속성을 읽어보니 position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 1000; 이렇게 되어있는데 이렇게 하면 전체화면의 크기와 같은 div가 되는건가요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
swr상태관리시 다른 컴포넌트 리렌더링 하는방법 문의
안녕하세요. swr관련 문의 드립니다. local state를 관리하는 용도로 swr을 사용해보고 있습니다. 컴포넌트 구조는 Main아래 Overview아래 OverviewDut라는 컴포넌트를 두고있는데요. Main에서 Socket.io를 통해서 받아온 데이터를 OverviewDut에서 사용하려고 합니다. swr에서 관리하고 있는 값은 제대로 변경되고 있는데요. OverviewDut컴포넌트의 리렌더링이 되지 않습니다. 부모컴포넌트에서 swr의 상태가 바뀐경우 자식컴포넌트에서 리렌더링이 필요한 경우에 대해 문의드립니다. [useDuts.js] [Main.jsx] [OverviewDut.jsx]
- 미해결Slack 클론 코딩[실시간 채팅 with React]
swr, gravatar 에러
안녕하세요, 제로초님. 코드 그대로 잘 따라쳤는데 왜 저는 아래 에러가 왜 나는건지 모르겠습니다.. ㅜㅜ swr은 1이 설치되었어서 0.5버전으로 다시 설치했습니다! 그래도 revalidate 에러가 사라지지 않고 있습니다. 각각의 에러 메세지는 revalidate : 'SWRResponse<void, any>' 형식에 'revalidate' 속성이 없습니다.ts(2339) mutate(false, false) : 'false' 형식의 인수는 'void | Promise<void> | MutatorCallback<void> | undefined' 형식의 매개 변수에 할당될 수 없습니다.ts(2345) data.email과 data.nickname은 동일하게 'never' 형식에 각각의 속성이 없다고 나옵니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
swr 키와 fetcher에 대한 질문입니다.
같은 key라면 같은 전역 data 상태라고 하셨는데 그렇다면 만약 같은 key를 가졌지만 다른 fetcher 함수를 가진다거나 하는 경우엔 여전히 같은 data를 덮어쓰는건가요? 그리고 또 혹시const {data:{user}} = useSWR("/api/user", getUserInfo); const{data:{workspace}} = useSWR("/api/user", getWorkSpaceInfo); 이런식으로 같은 key인데 다른 fetcher를 이용할 경우 data 객체를 세분화해서 같은 공간에 관리하는게 가능한가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
제로초님 프록시와 withcredential 옵션에 대한 질문입니다.
프록시를 사용하니 withCrendentials 옵션 없이 정상적으로 쿠키 생성 및 fetcher의 get 요청 응답이 오는데, 프록시를 사용하면 withCredential 옵션은 필요 없나요? 만약 그렇다면 둘 중 무엇을 더 자주 사용하나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님! 네트워크 에러 질문드립니다
우선 axios.post('http://localhost:3095/api/users', { email, password, nickname})이렇게 요청했을 시에 에러가 나구요, 또 한가지는 제가 wsl을 사용하는데 리눅스 firefox로 localhost 3090에 접속하여 회원가입을 하면 CORS에러가 뜹니다. 제가 CORS에러에 대해서 완벽하게 이해하지는 못하지만, 리눅스 상에서의 접속과 일반 윈도우 브라우저 환경에서의 접속에서 CORS에러가 다르게 나타나는 이유가 있나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
GET .../members error
이전에 비슷한 문제를 겪은 글이 있었는데 해결되지 않아서 글을 작성하게 되었습니다. InviteChannelModal 컴포넌트에서 보내는 GET 요청 const { revalidate: revalidateMembers } = useSWR( userData ? `/api/workspaces/${workspace}/channels/${channel}/members` : null, fetcher, ); 위 코드의 실행되는 결과로 다음과 같은 에러가 발생합니다. const { workspace, channel } = useParams(); InviteChannelModal 컴포넌트에서 콘솔에 workspace와 channel을 찍어보니 channel이 undefined 값으로 나오는데 useParams를 사용하면 현재 URL에서 라우터에서 지정한 콜론 뒤의 키에 해당하는 값을 반환하는 것으로 알고 있습니다. 로그인 후 "http://localhost:3090/workspace/sleact/channel/일반" 주소로 이동하기에 channel 값이 일반으로 출력되기를 예상합니다만.. Workspace layouts 에서 라우터 설정을 했음에도 매칭되는 channel 값을 받아오지 못하기에 원인을 알 수 없어 여쭤봅니다. <Switch> <Route path="/workspace/:workspace/channel/:channel" component={Channel} /> <Route path="/workspace/:workspace/dm/:id" component={DirectMessage} /> </Switch>
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
npm install error
아래처럼 react-custom-scrollbars가 설치되지 않는데요. 어떻게 해야하나요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
채널 등록 질문입니다..!
안녕하세요 항상 강의 잘듣고 있습니다..! post 요청시 서버가 리소스를 못찾는 404 에러에 대해 질문이 있습니다..! 워크스페이스 등록은 잘 되는데, 채널 등록은 404 에러가 나와 백엔드 서버 경로 문제인가 했지만, 정상 경로이고 리퀘스트 데이터도 정상적으로 보내지고 있어 글을 올리게 되었습니다 ㅠㅠ post 요청 함수 코드이며 에러 내용은, 아래와 같습니다! 포트는 3000번을 사용하고 있고, 프록시 사용중입니다..!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
회원가입 500 에러 (Internal Server Error)
회원가입을 시도할 경우 500 에러가 납니다. const onSubmit = useCallback( (e) => { e.preventDefault(); // console.log(email, nickname, password, passwordCheck); if (!mismatchError) { console.log('서버로 회원가입하기'); setSignUpError(''); setSignUpSuccess(false); axios .post('/api/users', { email, nickname, password }) .then((response) => { console.log(response); setSignUpSuccess(true); }) .catch((error) => { console.log(error.response); setSignUpError(error.response.data); }) .finally(() => {}); } }, [email, nickname, password, passwordCheck, mismatchError], ); 개발자 도구의 network 탭을 보니 아예 요청이 가지 않는것 같습니다. 어디서 문제인걸까요..?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
revalidate 오류 문제
안녕하세요 제로초님, 늘 명강의 잘 듣고 있습니다. 현재 워크스페이스 만들기와 SWR 설정 단계를 듣고 있던 도중 SWR에 revalidate가 아무리 해도 불러들이지 않습니다. 그대로 따라한다고는 따라했는데.. 제가 어떤걸 놓쳤을까요? 도움을 좀 부탁 드리겠습니다..ㅠㅠ 에러 메시지는 아래처럼 뜹니다... All destructured elements are unused.ts(6198) Property 'revalidate' does not exist on type 'SWRResponse<any, any>'.ts(2339) const revalidate: any
- 미해결Slack 클론 코딩[실시간 채팅 with React]
404 에러
서버랑 front 쪽 npm run dev 하고 localhost:3090/signup 열었는데 Cannot GET /signup 이란 404 에러가 뜹니다..ㅜㅜ 어디서 잘못된건지 모르겠습니다. webpack.config.ts 파일과 App.tsx 파일 첨부하겠습니다. import path from 'path'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack, { Configuration as WebpackConfiguration } from 'webpack'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } 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: ['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: [ // ts와 webpack 동시에 돌아가게 해주는 플러그인 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()); // 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; import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; const LogIn = loadable(() => import('@pages/LogIn')); const SignUp = loadable(() => import('@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]
이미지를 여러장 올리고 싶은 경우
안녕하세요!!이미지를 여러장 올렸다가 한번에 보내는 경우에는 따로 서버에 미리 등록되어있어야 할까요 ? 만약 이미지를 보내지 않고 부분적으로 취소할 경우도 생각한다면 어떤 방법이 좋을까요 또한 노드버드 홈페이지 들어가봤는데 개인과 개인간의 대화에서는 안읽은 메시지가 계속 뜨는데 원래 존재하는 오류인지도 궁금합니다 !
- 미해결Slack 클론 코딩[실시간 채팅 with React]
net::ERR_ABORTED 404 (Not Found) 에러 질문드립니다..!
안녕하세요 항상 강의 잘 듣고 있습니다 ..! 이번에 강의를 보면서 나름 강의 내용을 커스텀하면서 진행하고 있습니다..! 그래서 폴더 구조와 웹팩 내용 그리고 컴포넌트 코드가 조금 다릅니다.. ! 그래서 그런지 경로 문제로 추정되는 에러가 발생했는데 어디서 경로를 수정해야할지 몰라서 질문드립니다 ㅠㅠ 먼저 에러 메세지 사진입니다.. 로그인과 로그아웃 그리고 회원가입 정상적으로 작동하고 /workspace/channel 로 라우터가 지정한대로 잘 작동합니다 하지만 새로고침을 하면 저렇게 에러메세지가 뜨면서 브라우저에 아무것도 보여주지 않습니다.. ㅠ 제 폴더 구조와 웹팩 내용입니다 절대경로는 주석처리만하고 사용은 안했습니다..! 웹팩에서 따로 경로 지정 옵션을 줘야할까요?.. ㅠㅠ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
메시지 관련 질문있습니다 !
대화창을 켜놓고 과거 기록을 보고 있는 중에 상대방이 메시지를 보내면 보냈다는 알림?같이 미리 보기 형식으로textarea위에 보여주게 하고 싶은데 이런 경우에는 socket id의 data를 가져와서 출력해줘야 하는걸까요 ?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요
강의 잘 보고 있습니다 궁금증이 생겼는데 const current = (scrollRef as MutableRefObject<Scrollbars>)?.current; 1.타입 해결해놓으신걸 참고하니 이렇게 되어있더라구요 ㅕ기서 as는 그냥 별명같은 역할을 하는건가요 ? 아니면 타입이 저렇게된다는걸 알려주는건가요 ? 2.위 타입 오류는 어떻게 해결하셨는지 궁금합니다 마우스를 가져다대도 딱히 해결할만한 실마리가 안 보였는데 타입에러의 원인을 어떻게 아셨나요 ?!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
2차원 배열->1차원으로
2차원 배열을 1차원으로 하기위해 flat을 사용하셨는데여 전에는 spread 문법으로 뮤타블을 지켜줬는데 flat을 사용하면 자동적으로 뮤타블을 지켜주는건가요 ?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문있습니다.
swr, recoil등의 전역 상태 관리 라이브러리를 단순히 하나의 컴포넌트에서만 사용될 데이터를 가져오는데 사용하기도 하는지 궁금합니다.swr, recoil은 캐싱 / 에러, 로딩중에 따른 관리 용이 / 유용한 메서드 제공 등의 장점이 있어서 api로 가져온 데이터(axios.get)를 다루기 편하게 해주는데,전역적인 관리 목적이 아닌 이러한 장점을 취할 목적으로 한 컴포넌트 안에서만 사용될 데이터를 가져올 때도 전역 상태관리 라이브러리를 사용해도 괜찮은지 알고 싶습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요
{[]:[]} 타입스크립트에서 {[key:string]:IDM[]} 이라면 key는 string이고 value 가 IDM[] 형태인건가요? 아니면 key는 string이고 [](배열)의 타입이 IDM[] 형태인건가요?!
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
http://localhost:3095/api/users 동작안하는문제
안녕하세요. 하루에 한챕터씩 따라가고 있는 수강생입니다. 어제 '메뉴와 모달만들기'까지 수강을 완료하고, 금일 'DM목록 만들기'를 수강하던 중, 언제부터인지는 확실하지 않으나, 추측은 proxy서버설정후 부터 GET /api/users 정보를 가져오지 못하고 있습니다. mysql workbench에서 users테이블을 확인해보면 데이터가 정상적으로 들어있습니다. back폴더에서 'npm run dev'실행 하여 'DB 연결 성공'이라는 메시지 확인후, postman을 이용해서 'http://localhost:3095/api/users' 리퀘스트를 보내보아도 false가 리턴됩니다.(status code 404) 어떤 문제인지 확인이 가능할까요?