39,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
강의소개에서
강의소개보면 swr(리덕스대체) 라고 나와있는데 swr도 리덕스처럼 상태관리를 하는건가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
fetcher은 정상적으로 값을 리턴하는데 useSWR의 data에 값이 들어오지 않습니다.
1. Login.tsx import React, { useState, useCallback, useEffect } from "react"; import * as Styled from "./style"; import { Link, Navigate } from "react-router-dom"; import axios from "axios"; import useSWR from "swr"; import fecther from "../../utils/fetcher"; function Login() { const { data, error, revalidate } = useSWR( "http://localhost:3095/api/users", fecther // { // dedupingInterval: 100000, // } ); const [info, setInfo] = useState({ email: "", password: "", }); const { email, password } = info; const onSubmit = useCallback( (e) => { e.preventDefault(); if (!email || !password) return; axios .post( "http://localhost:3095/api/users/login", { email, password }, { withCredentials: true, } ) .then(() => { revalidate(); }) .catch(() => { console.log("로그인 실패"); }); }, [info] ); console.log(data); const onChange = useCallback( (e) => { const { value, name } = e.target; setInfo({ ...info, [name]: value }); }, [info] ); if (data) { //로그인이 되어있는 경우 return <Navigate to="/workspace/channel" />; } return ( <Styled.LoginContainer> <form className="signup" onSubmit={onSubmit}> <header>Sleact</header> <label> <span>아이디</span> <input type="email" name="email" onChange={onChange}></input> </label> <label> <span>비밀번호</span> <input type="password" name="password" onChange={onChange}></input> </label> <button>로그인</button> <div> <span>아직 회원이 아니신가요?</span> <Link to="/signup"> <span className="goLogin">회원가입 하러가기</span> </Link> </div> </form> </Styled.LoginContainer> ); } export default Login; 2. fetcher import axios from "axios"; const fetcher = (url: string) => { axios .get(url, { withCredentials: true, }) .then((res) => res.data); }; export default fetcher; 3.네트워크 users 확인 커뮤니티 qna에 검색해보고 구글링을 반복해봐도 문제가 해결되지 않아 질문드립니다 ㅠㅠ fetcher은 data를 정상적으로 리턴하는데 useSWR에는 data가 들어오지 않습니다............ 어떤 점이 문제인지 도움을 요청해봅니다. (+추가) 이것저것 시도 해보니 fetcher에 문제가 있는 것 같습니다. then을 통해 리턴된 값이 data에 들어가지 않습니다. 하지만 then에서 res를 콘솔에 찍어보면 값이 정상적으로 출력됩니다. 정상적으로 then을 거치는 것 같은데 어떤 점이 문제일까요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
event 타입
안녕하세요! 강의에서는 event에 대한 타입을 any로만 쓰시던데 event: React.FormEvent<HTMLElement>와 같이 타입을 적지 않는 이유가 있을까요?? 보통 현업에서도 any로 쓰는지 궁금합니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
slack 강의 커스텀 훅 만들기 질문이 있습니다.
강의를 보면서 많이 배우고 있습니다 :) setValue가 <T>를 인자로 받도록 타입을 지정해서 e.currentTarget.value는 못들어가는것인데(string이라서), e.currentTarget.value as T를 하면 될것이라고 생각했는데, 안되었고 강의에서 as unknown as T를 해주셨는데 이렇게 unknown을 한번 거치시는 이유가 궁금합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
onCreateWorkspace Submit 무반응
안녕하세요! 지금까지는 문제 없이 잘 진행하고 있었으나 계속 찾아보고, alecture 폴더 내에 있는 소스코드와 비교를 해보아도 어떤 코드가 문제인지 모르겠어서 질문 글을 남기게 되었습니다. 해당 섹션 마지막에서 액시오스 코드를 작성하고 백엔드에 워크 스페이스를 생성하도록 요청하는 부분이 있는데요, const onCreateWorkspace = useCallback((e) => { console.log('ok'); e.preventDefault(); console.log(newWorkspace); if (!newWorkspace || !newWorkspace.trim()) return; console.log('b'); if (!newUrl || !newUrl.trim()) return; console.log('c'); axios.post('/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ).then((response) => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }).catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, []); 워크스페이스 이름과, 워크스페이스 url 을 넣고 생성하기 버튼을 누르면 반응이 없어서 위 코드처럼 console.log 를 찍어서 확인해보니 newWorkspace 에 아무런 값이 담기지가 않고 있습니다. 해당 소스코드 및 라인 : https://github.com/Kuass/sleact/blob/master/setting/ts/layouts/Workspace/index.tsx#L32 입니다. onCreateWorkspace = useCallback 에 event 객체도 콘솔에 찍어서 보았으나 값은 정상적으로 있는데.. 왜 이럴까요 강사님 ㅠㅠ..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
seeders 에 .env파일을 만들어서 거기에 비밀번호를 적었는데 작동이 안됩니다.
password를 바로 적어주면 강의 그대로 전부 작동을하는데 password:process.env.MYSQL_PASSWORD 로 바꿔주면 작동을 안합니다 dotenv문제인것 같아서 dotenv를 다시 깔아도 강의에서 말씀하신것처럼 using password가 no 로 뜹니다. 혹시 어떤문제인지 알 수 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react-router 버전 낮추기
npm remove react-router react-router-dom npm i react-router@5 react-router-dom@5 @types가 붙은 라이브러리는 아직 5버전이라 다운그레이드 안해도 될듯합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
revalidate를 props로 전달
안녕하세요! 강의에서는 CreateChannelModal에서 한번더 useSWR을 이용해 revalidate을 가져오시건데 그냥 CreateChannelModal에 props로 revalidate를 전달해줘도 될까요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
데이터 초기화 관련 문의드립니다.
안녕하세요 제로초님! 수업 잘 듣고 관련 공부를 하다가 질문드립니다. DELETE /workspaces/:workspace/members/:id 으로 workspaces 내부의 멤버를 제거하는 API는 존재하는데 혹시 workspace나 channel 을 삭제하는 방법은 없을까요? 만약 없다면, 모든 데이터를 초기화 하는 방법이 있을까요? back과 front 폴더를 전부 다시 설치해봐도 되지 않아서 데스크톱 로칼에 데이터가 존재하기 때문에 삭제할 수 없는 것인지 여쭙고 싶습니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
react swr, react-query 에 대해서
제가 useQuery Hook 을 사용 할 떄 Service 폴더 로직에서 Axios API (GET, POST) 등을 작성하지 않고, 해당 page 에 해당 컴포넌트에서 보통 비동기 요청을 받아오는 함수를 만들어서, Axios GET 로직을 짜고 얻어낸 값(response.data)을 -> useQuery (data)에 사용 합니다. 근데 제가 질문이 있습니다. 보통 백단에서 비동기로 데이터를 가져 올 떄 service 라는 폴더에서 관리 하는 데, useQuery 를 이용하면 service 폴더를 굳이 만들지 않고, 해당 컴포넌트에서 함수를 구현 해 axios(request, response) 를 받아오고 useQuery data 로직을 처리해도 될까요? 아니면 해당 service 에서 함수를 만들고 -> axios(request, response) 받아온 값들을, 해당 페이지에 있는 컴포넌트에 import 로 가져와서 사용 해야 할까요? 강의들었을 떄 useSWR 을 사용하면 해당 컴포넌트에서 사용해도 된다고 하셔서 궁금해서 물어봅니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
webpack 에서 typescript를 또 babel로 변환하는 이유
제가 강의를 잘 들은건지 모르겠는데 ,, webpack 설정하면서 typescript 를 babel로 한번더 컴파일 해주신다고 들었는데요 typescript를 사용하면 es5로 변환해주기 때문에 bable이 필요없다고 들었는데 왜 또 변환해주는 건가요? 단지 type검사만 하고 bable로 또 한번더 컴파일 해주시는건가요..?ㅠㅠ 이해가 안가네요 ,,
- 미해결Slack 클론 코딩[실시간 채팅 with React]
굉장히 사소한 질문인데요
npm i 로 했는데 저도 똑같이 오류가 나더라구요 그런데 yarn install 로 하자 정상적으로 설치가 되었습니다. 가끔 이런 경우들이 있어서 얼렁뚱땅 해결하고 넘어가곤 했는데, 두 방식 차이로 어떤건 되고 어떤건 안 되는것의 이유가 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Invalid frame header 에러
안녕하세요 제로초님! socket 연결 관련 부분 진행 중 아래와 같은 에러가 계속 출력되며 서버 동작이 되질 않아 질문 드립니다! WebSocket connection to 'ws://localhost:3095/socket.io/?EIO=3&transport=websocket' failed: Invalid frame header 우선 제로초님의 백엔드 강의를 먼저 수강하고 제가 코딩한 nestjs 버전의 서버를 사용 중이며, 이 에러로 검색을 해보면 서버와 클라이언트의 버전이 다를 경우 나타날 수 있다고 해서 확인해보니 client는 2.4.0 이고 서버 측은 nestjs/platform-socket.io 8.2.4 버전입니다.코드 상의 문제가 있는지 제로초님의 깃헙 코드와 비교해보고, 제로초님의 서버를 실행해서 테스트 해봤는데요, 우선 제로초님의 express 서버로 실행 시 문제 없이 잘 작동하나, 제로초님의 nestjs 서버를 실행하면 동일 에러 상황이 나오네요 ㅠㅠ 버전은 제로초님 깃헙 코드와 동일하게 설정하여 사용했는데 어떤 문제가 있는지 계속 찾아봐도 잘 모르겠네요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
질문있습니다
강사님 강의를 보고 실습한 후 새로 프로젝트를 만들어서 다시 처음부터 하려고 합니다. 그런데 초반 레이아웃 구성하는 단계이며 socket.io는 사용하지도 않는 단계인데 WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed: WebSocketClient @ WebSocketClient.js:16 initSocket @ socket.js:21 (anonymous) @ socket.js:45 콘솔에 이런 에러가 계속 여러번 발생합니다. 이번에는 CRA로 프로젝트를 생성했고 "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@loadable/component": "^5.15.2", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router": "^6.2.1", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" }, 패키지는 이렇게만 설치한 상태입니다. 그런데 계속 저런 연결 실패 오류가 콘솔에 올라옵니다. 오류가 난 WebSocketClient.js는 CRA로 생성한 새 프로젝트의 node-modules로부터 났다는데., 이전에 sleact를 실습하면서 했던 소켓 연결에 문제가 있는걸까요? ㅠㅠ 어째서 새로 생성한 프로젝트에 소켓 연결 실패 오류가 뜨는건지 이유를 찾아보다가 아직도 해결하지 못했습니다..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
back> npm i 에서 오류로 진행이 안됨
진행 과정은 1) git clone 2) node 설치 3) mysql 설치 상태에서 Back> npm I 진행에서 계속 오류가 발생하고 있습니다. Npm install –global –production windows-build-tools 실행을 하면, 진행되다가 멈춘 상태가 됩니다. ------------------------------------- D:\.edu-ms\sleact\back>npm i npm ERR! code 1 npm ERR! path D:\.edu-ms\sleact\back\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@8.2.0 npm ERR! gyp info using node@16.13.0 | win32 | x64 npm ERR! gyp info find Python using Python version 3.10.1 found at "C:\Users\astro\AppData\Local\Programs\Python\Python310\python.exe" npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS msvs_version was set from command line or npm config npm ERR! gyp ERR! find VS - looking for Visual Studio version 2015 npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt npm ERR! gyp ERR! find VS checking VS2017 (15.9.28307.1759) found at: npm ERR! gyp ERR! find VS "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools" npm ERR! gyp ERR! find VS - found "Visual Studio C++ core features" npm ERR! gyp ERR! find VS - found VC++ toolset: v141 npm ERR! gyp ERR! find VS - found Windows SDK: 10.0.17763.0 npm ERR! gyp ERR! find VS - msvs_version does not match this version npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use npm ERR! gyp ERR! find VS looking for Visual Studio 2015 npm ERR! gyp ERR! find VS - not found npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8 npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS valid versions for msvs_version: npm ERR! gyp ERR! find VS - "2017" npm ERR! gyp ERR! find VS - "C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools" npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload. npm ERR! gyp ERR! find VS For more information consult the documentation at: npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use npm ERR! gyp ERR! stack at VisualStudioFinder.fail (D:\env\node-v16.13.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47) npm ERR! gyp ERR! stack at D:\env\node-v16.13.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16 npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (D:\env\node-v16.13.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14) npm ERR! gyp ERR! stack at D:\env\node-v16.13.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14 npm ERR! gyp ERR! stack at D:\env\node-v16.13.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16 npm ERR! gyp ERR! stack at D:\env\node-v16.13.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7 npm ERR! gyp ERR! stack at D:\env\node-v16.13.0-win-x64\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16 npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:404:5) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1064:16) npm ERR! gyp ERR! System Windows_NT 10.0.19043 npm ERR! gyp ERR! command "D:\\env\\node-v16.13.0-win-x64\\node.exe" "D:\\env\\node-v16.13.0-win-x64\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" npm ERR! gyp ERR! cwd D:\.edu-ms\sleact\back\node_modules\bcrypt npm ERR! gyp ERR! node -v v16.13.0 npm ERR! gyp ERR! node-gyp -v v8.2.0 npm ERR! gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\astro\AppData\Local\npm-cache\_logs\2022-01-06T01_58_35_428Z-debug.log
- 미해결Slack 클론 코딩[실시간 채팅 with React]
next 리랜더링
제가 슬랙 클론 코딩을 next js로 짜봤는데 , ChatBox Input 창에 입력을 하면 react와 짠 코드와는 다르게 모든 컴포넌트가 다 리랜더링 되더라구요 ! (강의에 나온 useMemo, memo 구현했습니다) 조금 걸리는 부분은 선생님과는 다른 부분인 workspace 쪽에서 switch로 감싸준 부분인데 이쪽 부분을 리액트처럼 코드 스플릿팅을 하지 않아서 일까요 ? 어떤 이유인가 궁금해서 여쭤봐요 !
- 미해결Slack 클론 코딩[실시간 채팅 with React]
[메뉴만들기] props와 onCloseModal에 대해 질문드립니다.
제로초님 안녕하세요. [메뉴만들기] 강좌에서 팝업메뉴를 띄우고 닫는 과정에서 좀 더 상세히 알고싶어 질문드립니다. 1. Workspace > index.tsx props 사용에 대한 이해는 조금 하고 있는데 [ show와 onCloseModal ] props 사용 방식이 궁금한데요 props로 가져오기 위한 시작이 어디서부터인지와 {childern}의 사용순서를 알고싶습니다. 그리고 onCloseModal 이라는 props에는 onCloseUserProfile 코드를 적용하겠다는 뜻으로 이해하면 될까요? 보통은 onCloseMoal 이면 { onCloseModal } 로 사용하는데 여기서는 다르게 입력되어 이 과정이 궁금합니다. 2. Menu > index.tsx 팝업메뉴 바깥 배경을 눌렀을 때, 닫히는 기능에 대한 질문입니다. <CreateMenu> 스타일은 팝업된 메뉴인데 거기에 Click이벤트로 { onCloseModal }을 적용하면 팝업메뉴를 눌렀을 때, 모달창이 닫히는게 되고, 그 안의 <div>태그에 Click 이벤트로 { stopPropagation } 을 적용하면 <div>태그 내부를 눌렀을 때는 모달창이 닫히지 않는 것으로 이해하였습니다. 그런데 어떤 부분때문에 CreateMenu가 <div>태그를 제외한 배경으로 적용이 되어 배경을 눌렀을 때, 창이 닫히는 것인지 궁금합니다. <CreateMenu/>에는 stopPropagation이 적용되어 있지 않기때문인 것 같긴한데 어쨌든 이벤트버블링은 Click 이벤트가 적용된 버튼이나 창을 눌렀을 때, 부모도 눌리게 되는 거라고 생각했었거든요. 그래서 배경에 Click 적용이 되는 과정이 궁금합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
오류 : ReferenceError: Can't find variable: $RefreshReg$
강의를 잘 보던 중 index.html 을 띄우니, 이러한 오류가 발생합니다. 구글링을 해보아도 RN 관련 글들만 나와서 질문드립니다. + webpakc.config.ts에 plugin 부분 react-refresh/babel 은 추가되어 있습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
swr 관련 질문입니다.
SWR 관련 질문입니다. 1.x 사용 했을 때 mutate를 적용을 시켜 봤습니다. 강의 초반부에 로그 아웃 버튼을 달고 화면만 띄우고 swr로 불러온 데이터를 찍으면 /api/users 데이터가 있는 것을 확인 할 수가 있는데 login 후 workspace/channel 들어가면서 console로 찍어보니 최초에는 데이터가 있는 것으로 나오는데 한번 더 렌더링이 되는건지 workspace : {id :...}workspace: undefined 이렇게 나오던데 어떤 식으로 접근하면 좋을지 문의 드립니다. 혹시 몰라서 let count = 0; 0 : workspace : {id :...}1 : workspace: undefined 식으로 카운팅도 해 봤는데지렇게 찍혀서 어떻게 접근을 해야할지 몰라 문의 드립니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
에디터 질문입니다.
VSCODE, Sublime, Atom 등이 아닌 웹스톰을 사용하시는 듯 한데 특별히 웹스톰을 사용하면 좋거나꼭 웹스톰을 사용해야 할 필요가 있을까요?