25%
29,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev - webpack-cli 에러
npm run dev 했을 때 계속 이런 에러가 납니다! 무슨 오류인지 잘 모르겠습니다.. "scripts": { "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" 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" }, "dependencies": { "@emotion/babel-plugin": "^11.3.0", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@loadable/component": "^5.15.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3", "@types/react": "^17.0.19", "@types/react-dom": "^17.0.9", "cross-env": "^7.0.3", "css-loader": "^6.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "style-loader": "^3.2.1", "ts-node": "^10.2.1", "typescript": "^4.3.5", "webpack-cli": "^4.8.0" }, "devDependencies": { "@babel/core": "^7.15.0", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.15.0", "@types/loadable__component": "^5.13.4", "@types/node": "^16.7.1", "@types/react-router": "^5.1.16", "@types/react-router-dom": "^5.1.8", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^3.11.1", "babel-loader": "^8.2.2", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.4.1", "fork-ts-checker-webpack-plugin": "^6.3.2", "prettier": "^2.3.2", "react-refresh": "^0.10.0", "webpack": "^5.51.1", "webpack-dev-server": "^4.0.0" }
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
질문 입니다.
안녕하세요 제로초님 질문1. const onSubmitForm = useCallback( (e) => { e.preventDefault(); // console.log(chat); if (chat?.trim() && chatData) { const savedChat = chat; mutateChat((prevChatData) => { prevChatData?.[0].unshift({ id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt: new Date(), }); return prevChatData; }, false).then(() => { setChat(''); scrollbarRef.current?.scrollToBottom(); }); axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); }) .catch(console.error); } }, [chat, chatData, myData, userData, workspace, id], ); DirecMessage에서 메시지를 보내면 onSubmitform이 실행되잖아요? 그러면 mutateChat으로 인해 옵티미스틱 ui가 되는데 이 원리가 궁금합니다 분명 디엠데이터는 Chatdata를 props로 chat컴포넌트에 넘겨준다음 result에 표시되어 렌더링 되는거잖아요?. 그런데 chat컴포넌트에 mutateChat를 넣어준곳도 없는데 어떻게 mutatechate를 인식해서 result로 보여지는지 궁금합니다. 질문2. 강의에서 제로초님이 옵티미스틱 ui가 실패했을 때(좋아요먼저 띄어주고 요청을 나중에 보냈는데 점검때 실패했을 경우 얼른 하트를 꺼버림 ) 경우 얼른? 다시 원상태로 돌아와야 한다고 제가 이해했는데요 mutatechate에서 axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); }) 이요청이 실패했을 경우 이미 렌더링 되어있는 디엠 데이터가 (얼른) 사라지지 않고 새로고침을 해야 사라지더라구요? 이렇게 작동하는게 맞나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
로그인되면 redirect하게 만드려다가
콘솔탭에 application에서 connect.id 말고 다른것도 지웠는데.. connect.id말고 다른것의 정체는 무엇이었고 다시 생성하려면 어떻게 해야하나요? server를 백, 프론트 다시 돌려도 생기지가 않네요 ㅠ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm run build 에러
제로초님, 안녕하세요! npm run build 하고 index.html 라이브 서버 켜봤는데 화면에 아무것도 나오지 않습니다..! dist 폴더와 App.js 파일은 잘 생겼구요 아래는 에러 내용입니다. 제로초님의 소스코드를 살펴보니 package.json에 emotion/babel-plugin은 설치되어 있지 않았는데ㅜㅜ 그걸 설치하면 해결되는걸까요? $ npm run build > client@1.0.0 build C:\Users\user\Desktop\coding\sleact\client > cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack asset app.js 4.28 KiB [emitted] (name: app) ./client.tsx 39 bytes [built] [code generated] [1 error] ERROR in ./client.tsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@emotion/babel-plugin' Require stack: - C:\Users\user\Desktop\coding\sleact\client\node_modules\@babel\core\lib\config\files\plugins.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\@babel\core\lib\config\files\index.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\@babel\core\lib\index.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\babel-loader\lib\index.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\loader-runner\lib\loadLoader.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\loader-runner\lib\LoaderRunner.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack\lib\NormalModuleFactory.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack\lib\Compiler.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack\lib\webpack.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack\lib\index.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack-cli\lib\webpack-cli.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack-cli\lib\bootstrap.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack-cli\bin\cli.js - C:\Users\user\Desktop\coding\sleact\client\node_modules\webpack\bin\webpack.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15) at resolve (C:\Users\user\Desktop\coding\sleact\client\node_modules\v8-compile-cache\v8-compile-cache.js:164:23) at resolveStandardizedName (C:\Users\user\Desktop\coding\sleact\client\node_modules\@babel\core\lib\config\files\plugins.js:111:7) at resolvePlugin (C:\Users\user\Desktop\coding\sleact\client\node_modules\@babel\core\lib\config\files\plugins.js:55:10) at loadPlugin (C:\Users\user\Desktop\coding\sleact\client\node_modules\@babel\core\lib\config\files\plugins.js:63:20) at loadPlugin.next (<anonymous>) at createDescriptor (C:\Users\user\Desktop\coding\sleact\client\node_modules\@babel\core\lib\config\config-descriptors.js:187:16) at createDescriptor.next (<anonymous>) at step (C:\Users\user\Desktop\coding\sleact\client\node_modules\gensync\index.js:261:32) at evaluateAsync (C:\Users\user\Desktop\coding\sleact\client\node_modules\gensync\index.js:291:5) sleact (webpack 5.51.1) compiled with 1 error in 1475 ms npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! client@1.0.0 build: `cross-env TS_NODE_PROJECT="tsconfig-for-webpack-config.json" webpack` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the client@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2021-08-24T16_04_56_594Z-debug.log
- 미해결Slack 클론 코딩[실시간 채팅 with React]
정규표현식
@[제로초]12](7)인 경우에 왜 최대한 조금 찾는걸까요 ? "제로초]12" 이게 닉네임 아닌가요 ? 이렇게 된다면 제로초]12 가 맞는 게 아닐까요 ? 왜 "제로초"만 찾는지 궁금합니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Mysql 에러
제로초님, Node.js 교과서 7장 보면서 Mysql 재설치를 했는데요 비밀번호 입력하는 부분은 진행이 되지 않습니다. 위와 같이 입력 후 엔터를 누르면 그냥 멈춰 있고, Enter password: 가 나오지 않습니다. mysql -u root -p 라고 입력해도 마찬가지이구요.. 그것 때문인지.. sleact/back 에서 npx sequelize db:create 하면 다음과 같은 에러가 발생합니다. 프로젝트 폴더에서 mysql 명령어(mysql -u root -p)를 입력하면 그건 또 bash: mysql: command not found 라고 나오구요... ㅜㅜ 이부분은 인터넷 찾아보니 환경 변수 설정 문제인것 같아 인터넷에 나온대로 고급 설정에서 추가했습니다만.. 해결되지는 않았습니다. 해결할 수 있는 방법이 있을까요? 서버는 잘 작동중입니다.
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 궁금한점이요!!
안녕하세요 저는 웹팩 소스는 복붙하고 패키지를 직접 하나씩 설치해보았는데 빌드나 실행시 에러가 나서 webpack-dev-server 가 4.0.0 인걸 지우고 @ 3.11.2로 다시설치하니까 되더라고요. 원래 이렇게 버전하나때문에 에러가 잘 발생하나요? 그리고 setting/ts 그대로 빌드해보면 저는 이건 에러는 아니고 경고지만 이런 세가지 경고 들이 뜨는데 원래 이런건가요?? 상관없는건가요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
안녕하세요
강사님 깃헙에서 front 라는 폴더로 공부중인데요 질문1. 프론트에서 코드를 수정했을시 컴파일은 잘 되는데 새로고침이 자동으로 안되네요 그래서 수동으로 새로고침을 하지 않으면 브라우저에서 수정된 코드로 화면이 렌더링되지 않네요 혹시 어떤문제일까요?.. 또한 슬랙 프론트 강의 완성본이 front폴더죠?? 질문2. direcMessage컴포넌트에서 useEffect가 onMessage 와onSubmitForm 함수보다 밑에 있는데 useEffect(() => { socket?.on('dm', onMessage); return () => { socket?.off('dm', onMessage); }; }, [socket, onMessage]); useEffect(() => { localStorage.setItem(`${workspace}-${id}`, new Date().getTime().toString()); }, [workspace, id]); 강의중에 useEffect는 다른 함수나 훅보다 위에있어야 한다고 하신것 같은데 왜 useEffect가 더 밑에 있는지 궁금합니당
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useState에 배열 넣기 질문
const [getName, setName] = useState<string[]>([]); for(let i = 0; i < res.data.length; i++) { landName[i] = res.data[i].landName; setName([...getName, landName[i]]); } 위에처럼 코드를 작성하였습니다. 배열이 돌면서 landName에 인덱스별로 값이 들어간 후 그 배열로 된 값들을 getName에 집어넣고 싶은데 제가 알고 있는 방법을 다 써보았는데 값이 안들어가는데 팁좀 주실 수 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
connect 에러 발생
제로초님 안녕하세요! npx sequelize db:create 하니까 에러가 발생합니다.. MySQL 워크벤치에서 text connection 해보니 그것도 에러가 나더라구요.. 어떻게 해결해야 할까요? localhost 문제인것 같은데.. 어떻게 해야할지 모르겠습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
soket io 사용시
soket io를 사용하여 실시간 채팅을 만드려보려고 하는데 실제 배포를 해도 문제가 없을까요 ?? 정상적으로 유저들간의 채팅이 작동할 수 있는지 궁금합니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Menu에 style 질문있습니다 !
현재 Menu components에 inline style을 주셨는데 이렇게되면, index.tsx에서 style 의 값을 받아서 <div> 태그안에 들어가게되는건가요 ? 만일 그렇다면 div 태그 안에는 어떠한 스타일도 정의되어 있지 않은데 top : 95, left:80 값을 주면 어떤 변화가 생기는 건가요 ? 이 값들은 position : absolute 시 정의해주는 속성들 아닌가요 ?!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
db에 연결이 안되서 새로운 스키마를 생성연결
새로운 스키마를 연결을 따로 해줘야 하는지 궁금합니다. 지금 현재 에러는 회원가입 페이지에서 회원가입을 하면 이미 등록된 이메일이라고 뜨는데 로그인을 하면 존재하지 않는 이메일이라고 뜹니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
프론트엔드 에러모니터링 툴
안녕하세요 제로초님 혹시 프론트엔드 에러모니터리용 어떤걸 쓰시나요?(리액트) (Sentry같은 라이브러리?) 무료이면서 좋은거 알고 계신가해서 물어봅니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요! mysql root 아이디 생성되서 로그인되는데 npx sequelize db:create하면 econnrefused 에러가 뜨네요
전체 메시지는 Sequelize CLI [Node: 14.17.2, CLI: 6.2.0, ORM: 6.6.5] Loaded configuration file "config/config.js". Using environment "development". ERROR: connect ECONNREFUSED 127.0.0.1:3306 입니다. db 접속도 되구, mysql 서비스 시작도 되있는 상태입니다 cmd에서 net start mysql 서비스해서 시작하는것도 확인했구요.... 뭐가 문제일까요,,,>
- 미해결Slack 클론 코딩[실시간 채팅 with React]
logout시 발생하는 순서
logout 버튼을 누르면 /api/users/logout으로 post요청이 보내진후 성공 -> revalidate함수실행 -> useSWR의 fetcher함수 실행 fetcher함수가 api/users로 axios를 실행하면 왜 false 값이 return이 되나요? api/users/logout 으로 post를 보내면 서버측에서 알아서 로그인 할 때 전달받은 정보를 false로 바꾸어주는 건가요? 답변 부탁드립니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Route
이렇게 사용해야하는 이유가 있을까요 ? <Route exact path="/" components={login} /> 이렇게 사용해도 될까요 ? <Route exact path="/"> <Redirect to="/login" /> </Route>
- 미해결Slack 클론 코딩[실시간 채팅 with React]
코드 스플리팅 기준
안녕하세요 제로초님 강의를 보면서 느낀점은 App.tsx에서만 코드 스플리팅을 적용시켜준 것 같은데 다른 페이지에서는 코드 스플리팅을 할 필요가 없는 건가요 ? 예를들어 workSpace에서 Redirect에서 login 페이지 이동시 string으로 보내줘야하는데 이 같은 경우는 따로 스플리팅이 필요 없는걸까요 ? const LogIn = loadable(() => import('@pages/Login'));
- 미해결Slack 클론 코딩[실시간 채팅 with React]
gravatar 질문입니다.
그라바타를 적용하려고 하려고 하는데 왜 data.email, nick이 빨간줄이 쳐지는지 모르겠네요. 위에 이렇게 받아와서 data까지 잘 넘어오는거 확인했는데 왜이러는걸까요? export interface IUser { id: number; nick: string; email: string;}이렇게 @typings/db 에도 잘 적었습니다.
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
제로초님
안녕하세요 질문1. const sockets = {}; sockets[workspace] 이 문법이 헷갈립니다. sokets이라는 객체를 만들었는데 sokets[ ] 이건 무엇을 뜻하나요? sokets안에 workspace 배열을 넣은것인가요? 이런식으로 ? { [ ] } 질문2. 소켓을 콘솔에 찍어보면 네임스페이스 안에 /ws-sleact라고 적혀 있습니다. 그런데 네임스페이스가 이름이 들어오는 경로가 궁금합니다. hooks 컴포넌트에서 if (!sockets[workspace]) { sockets[workspace] = io.connect(`${backUrl}/ws-${workspace}`, { transports: ['websocket'], }); sokectes[workspace] 처럼 소켓객체의 wrokspace로 해줘서 그런것인가요? soket에는 수많은 객체가 있는데 soketes[workspace]로 해주면 알아서 네임스페이스를 인식해서 넣어주는것인가요? 들어오는 흐름이 궁금합니다! 질문 3. 강의에중 제로초님께서 usememo는 개별값들을 캐싱하고 싶을 때 쓴다고 하셨는데 useCallback과 usememo의 차이점이 무엇인지 헷갈립니다. 구글링 해봐도 차이점이 뭔지 명확히 안와 닿더라구요. 어떤 차이점이 있는지 궁금합니다!