39,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
회원가입 API 요청 전 상태 초기화 관련돼서 질문드립니다
react에서 setState으로 인한 변경은 비동기적으로 이뤄지는 것으로 알고 있습니다. 그래서 state 변경 이후의 처리를 하게 해주기 위해 setState의 2번째 인자로 콜백을 보내도록 제공하는 거로 아는데 그러면 http 요청도 상태를 초기화시킨 다음 요청해야 되는거면setState의 2번째 인자로 넣어줘야 상태가 초기화된 이후가 보장되지 않는지.. 궁금해서 질문드립니다! 아니면 API 요청 시간에 의해 상태 초기화와 상태 업데이트가 서로 다른 주기로 이뤄지는 게 보장되는 것일까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
입력한 target.value 값을 배열에 저장 할려고 합니다.
안녕하세요, 제로초님 제가 강의를 듣고 개인 프로젝트를 하고 있습니다. 다름이 아니고 제가 useState 배열을 만들어서 Input 으로 입력한 값(event.target.value) 을 배열에 집어 넣을려고 합니다. 제가 직접 구현한 코드인데. 배열에 event.target.value 값이 잘 저장되는 것 같지만 문제가 있어요 ㅠㅠ. 이게 input 에 123을 입력하고 배열 ['123'] 이 저장되고 input 을 끊었다가 123 -> 이어서 456 을 입력하면 ['123'] ['123456'] 배열이 2개가 생성됩니다. 저는 배열이 계속 생성되는 게 아니라 event.target.value 마지막으로 입력된 값을 저장하고 싶은데.. 어떻게 처리 해 줘야 할 지 모르겠습니다. const [integerIdList, setIntegerIdList] = useState<any>([]); const handleInputChange = (index: number, event: any) => { if (event.target.name === "IntegerId") { setIntegerIdList([...integerIdList, event.target.value]) } } return ( <input type="text" name="IntegerId" onChange={(event) => handleInputChange(index, event)}/> ) 이게 한턴 한턴 끊었다가 입력을 하면 이렇게 됩니다. 저는 최종 124124124124124 값을 첫 번째 배열 -> integerIdList: ['124124124124124'] 이렇게 등록하고 싶습니다. 어떻게 수정을 해줘야 할까요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
git clone한 상태에서 get error가 뜹니다.
안녕하세요. 강의 영상 잘 보고 있습니다. git clone하고 소스코드는 아직까지 건들지 않고 영상만 보고 있다가 네트워크 탭을 보니 Get api에러가 보이네요.. api url이 다른건지, 뭐가 문제일까요? 해당 에러는 이렇습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
redis사용
안녕하세요 제로초님 제로초님의 강의에서 말씀대로 socket에 접속한 member들 ( onlineMap ) 을 redis에 저장해보려고 하는데요. redis의 기본port가 6370인데 nodebird처럼 서버를 만들었다고 할때, 만든서버에서 80과 443 port말고도 6370포트도 허용해주어서 6370port에서 redis가 돌아가게 하면 되나요? 대부분 현업에서는 서버가 중지되어도 정보가 남게 redis용 서버를 따로 또 사서 redis를 돌리나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
back Dm과User 모델? 관계 질문이 있습니다.
https://github.com/ZeroCho/sleact/blob/master/back/models/dm.js https://github.com/ZeroCho/sleact/blob/master/back/models/user.js 제로초님 모델들 관계를 살펴보다가 Dm은 belongsTo User로 되어있는데 User는 Dm에 hasmany 관계가 없어서 궁금해서 질문드립니다. User에서는 따로 설정 안해줘도 상관없는건가요???
- 미해결Slack 클론 코딩[실시간 채팅 with React]
오브젝트 전달관련 질문드립니다.
강의 중 질문이 있어 글남깁니다. 모달 팝업을 열거나 할때, 아래와 같이 하위 컴포넌트에서 스테이스를 전달하여 모달을 닫는 방식으로 되어 있는것을 확인하였습니다. 상위 컴포넌트: const [showCreateChannelModal, setShowCreateChannelModal] = useState(false); <CreateChannelModal show={showCreateChannelModal} onCloseModal={onCloseModal} setShowCreateChannelModal={setShowCreateChannelModal} /> 하위 컴포넌트 : interface Props { show: boolean; onCloseModal: () => void; setShowCreateChannelModal: (flag: boolean) => void; } const CreateChannelModal: FC<Props> = ({ show, onCloseModal, setShowCreateChannelModal }) => { ... 이 방식을 활용하여 아래와 같이 하위 컴포넌트에서 사용자 정보인 IUser를 전달해보고자 했는데 자꾸 set이 안되고 빈 값만 출력이 되는데 어떻게 해야할지를 모르겠어서 문의드립니다. const [User, setUser] = useState({}); <CreateChannelModal show={showCreateChannelModal} onCloseModal={onCloseModal} setUser={setUser} /> 하위 컴포넌트 : interface Props { show: boolean; onCloseModal: () => void; setUser: (u: IUser) => void; } const CreateChannelModal: FC<Props> = ({ show, onCloseModal, setUser}) => { ...
- 미해결Slack 클론 코딩[실시간 채팅 with React]
배포 관련질문
안녕하세요 제로초님 정말 마지막 질문 드리겠습니다.. 홈페이지 띄우는 것까지 성공했고, 이제 회원가입까지 완료되었는데 회원가입한 아이디로 로그인이 안됩니다. 로그인 요청은 가는데 응답이 false로 돌아옵니다. 혹시 저 같은 사람이있을것 같아 커뮤니티에 배포라고 검색해보니 저랑 똑같은 에러를 겪는 사람이 있더군요 근데 해결방법이 적혀있지 않 아서.. 질문 너무 많이해서 죄송합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
서버 관련 배포 질문 드립니다
안녕하세요 제로초님 제로초님 강의를 듣고, sleact 프론트 제작하고, 서버는 제가 직접 express로 만든 다음 node-bird강의 처럼 ec2에 back연결하고 front는 build해서 dist내용물과 index.html back의 public 폴더에 넣고 실행을 했는데요,, 화면에 아무것도 뜨지가 않습니다.. 제가 localhost에서 돌릴때는 아무문제가 없는데.. 왜그런 건가요 시간이 되신다면 코드 한번 봐주실수있으실까요? https://github.com/gkqkehs7/sleact_clone
- 미해결Slack 클론 코딩[실시간 채팅 with React]
프론트 서버 배포
안녕하세요 제로초님 sleact 프론트 서버를 배포 해보려고 합니다. react-nodebird강의에서 배포하는 방법을 보고, 프론트서버 백서버 따로 나누어 배포하려고하는데요 백서버는 제가 따로 express로 만들어서 제로초님이 강의에서 하는것처럼 성공했습니다. localhost에서 돌리면 프론트가 문제 없이 잘만 돌아가는데 근데 프론트 서버는 우분투에 들어가서 start하면 에러가 수천수만줄이 뜨고 build도 되지 않고... start명령어가 무엇인지도 모르겠습니다. 어떻게 배포를 해야하나요 ㅠㅠ nodebird랑 다르게 ts라 배포하는 법을 하나도 모르겠습니다.. "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", "start": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env production" },
- 미해결Slack 클론 코딩[실시간 채팅 with React]
제로초 선생님 질문있습니다
index.tsx 파일에 const App = () => { const getName = () => { return "test";} return <div>{getName()}</div> } 예를 들어 위와 같은 구조에서 1. App 컴포넌트 내부에 getName 함수를 정의해서 사용하는거랑 App 컴포넌트 밖에 함수를 정의해서 사용하는 경우 어떤 차이가 있는지 궁금합니다 2. App 컴포넌트 내부에서 함수를 정의하는 경우 App 컴포넌트가 랜더링 될 때마다 getName 함수도 다시 만들어지는 걸로 알고 있는데 이런 일반함수들은 App 콤포넌트 밖에다 정의해도 상관이 없는건가요? 3. 상태를 변경하는 함수인 경우에만 App 콤포넌트 내부에 정의하고 그렇지 않은 경우 밖에다 정의하는게 좋을까요? 감사합니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
images저장 코드가 이해가 되질 않습니다
안녕하세요 제로초님 질문에 대한 빠른답변 항상 감사드립니다 :) 제로초님 sleact express code에서 이미지를 저장하는 부분의 코드가 이해가 되지 않아서 질문 올립니다 밑에 처럼 코드가 되어있는데 for문을 돌면서 req.files 길이 마다 n번 create를 하는 것인가요? 궁금해서 console.log(req.files)를 입력해보았는데 undefined라고 뜹니다. 코드를 작성하면 잘 저장은 되는데.. 왜 for문을 도는 건가요?? for (let i = 0; i < req.files.length; i++) { const chat = await ChannelChat.create({ UserId: req.user.id, ChannelId: exChannel[0].id, content: req.files[i].path, }); }
- 미해결Slack 클론 코딩[실시간 채팅 with React]
로그인/로그아웃이 동작하지 않습니다.
기존까지 로그인은 잘 됐었는데 Workspace.tsx에 if (!data) { return <Redirect to="/login"/>;} 이 코드를 추가하니, 로그인을 하면 이런 식으로 무한호출이 되고, 빈 페이지가 떠 있어서 어떤문제인지 여쭤보고 싶습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요! css 관련 질문드립니다
안녕하세요! 강의 잘 듣고 있는 한 학부생입니다! 다름이 아니라 강의를 듣다보니 선생님께서 슬랙의 css를 그대로 긁어오셨다고 하셨는데, css를 긁어오신다는게 따로 익스텐션이 있어서 긁어오시는건지, 아니면 선생님께서 직접 사이트를 보고 컴포넌트를 디자인하시는건지 궁금합니다! 현재 졸업작품으로 웹서비스를 개발중인데, 반응형으로 구현하고 싶어 미디어쿼리를 도입했으나, 반응형을 고려한 개발이 처음이기도해서 코드만 길어지고 어떤 기기는 되고 안되고 이런 상황이 많아서 다른 시중 사이트들의 반응형 관련 css를 참고하고싶어 이렇게 질문드립니다! https://github.com/BB-PSP/BB-PSP-client 위 깃허브는 혹시 시간되실 때 봐주시면 감사하겠습니다
- 미해결Slack 클론 코딩[실시간 채팅 with React]
cors에러
안녕하세요.회원가입 페이지를 띄우고 콘솔창을 봤는데서버와 클라이언트 간에 소통에서만 볼 수 있었던 cors에러가 아직 axios 코드도 적지 않았는데 발생하여서... 이게 무슨 일인가 싶어서 해결 방법을 여쭤봅니다...webpack부분은 셋팅부분에서 따로 손대지 않았고 손을 안대서 문제가 생겼을 수도 있다고 생각해서 alecture부분의 webpack 코드부분을 사용해봤는데도 해결이 안되서 웹팩 관련 부분은 아닌것 같기도 하고... 사진 첨부 합니다 다른 분들은 저와 같은 에러가 없는것 같아서 제가 덜찾아 본건가 싶어서 이래저래 찾아봤는데 해결을 못해서 여쭤봅니다...죄송합니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안 읽은 메세지 불러오기
안녕하세요 제로초님 :) 안읽은 메세지수를 가져오는 코드중 이코드를 내가 메세지 보낼때와 그 페이지에 접근했을때 작성했는데 이렇게 하면 내가 그 방에 들어가 있는 도중 상대방이 메세지를 보내고 읽은 다음, 내가 아무런 행동도 취하지 않고 나오면 바로 읽은 메세지도 안읽었다고 뜨는데 그렇다면 onMessage에도 시간을 코드를 적어줘야 하지 않나요..?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useSWR, useQuery 를 사용하면
useSWR, useQuery 를 사용하면 useContext 를 사용하지 않아도 되나요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
getChats 에 관한 질문
안녕하세요 제로초님 제로초님 sleact강의 듣고 직접 express로 서버를 만들어 보고 있습니다. 채널의 채팅을 가져오는 부분을 작성해보았는데요, 제로초님 코드로 하면 되는데, 제 코드로 getChats를 하면 getChats is not function이라고 뜹니다.. 왜이런 걸까요 ㅠ router.get('/:workspace/channels/:channel/chats', isLoggedIn, async (req, res, next) => { try { const exWorkspace = await Workspace.findOne({ where: { url: req.params.workspace } }); if (!exWorkspace) { return res.status(403).send('존재하지 않는 워크스페이스 입니다'); } const exChannel = await exWorkspace.getChannels({ where: { name: req.params.channel } }); if (!exChannel) { return res.status(403).send('존재하지 않는 채널입니다'); } const ChannelChats = await exChannel.getChats({ include: [ { model: User, attributes: ['nickname', 'id', 'email'], }, ], }); return res.json(ChannelChats); } catch (error) { console.error(error); next(error); } });
- 미해결Slack 클론 코딩[실시간 채팅 with React]
no overload matches this call
TS2769: No overload matches this call. Overload 1 of 3, '(loadFn: (props: unknown) => Promise<DefaultComponent<unknown>>, options?: OptionsWithoutResolver<unknown> | undefined): LoadableComponent<unknown>', gave the following error. Type 'Promise<typeof import("/workspace/chatting_app/alecture/layouts/Workspace/index")>' is not assignable to type 'Promise<DefaultComponent<unknown>>'. Type 'typeof import("/workspace/chatting_app/alecture/layouts/Workspace/index")' is not assignable to type 'DefaultComponent<unknown>'. Property 'default' is missing in type 'typeof import("/workspace/chatting_app/alecture/layouts/Workspace/index")' but required in type 'DefaultImportedComponent<unknown>'. Overload 2 of 3, '(loadFn: (props: any) => Promise<ComponentClass<any, any> | { default: ComponentClass<any, any>; }>, options?: Options<any, ComponentClass<any, any>> | undefined): LoadableClassComponent<...>', g ave the following error. Type 'typeof import("/workspace/chatting_app/alecture/layouts/Workspace/index")' is not assignable to type 'ComponentClass<any, any> | { default: ComponentClass<any, any>; }'. Property 'default' is missing in type 'typeof import("/workspace/chatting_app/alecture/layouts/Workspace/index")' but required in type '{ default: ComponentClass<any, any>; }'. const LogIn = loadable(() => import('@pages/LogIn')); const SignUp = loadable(() => import('@pages/SignUp')); const Workspace = loadable(() => import('@layouts/Workspace')); 제로초님 아무리 노력해도 어디가 문제인지 못찾겠습니다 어디서부터 어떻게 해결해야 할까요??
- 미해결Slack 클론 코딩[실시간 채팅 with React]
revalidate가 안됩니다.
제로초님 revalidate가 존재하지 않는다고 뜨는데요. 이때 mutate로 대체해도 괜찮을까요? 추가로 <IChannel[]>제네릭 문법이 궁금합니다. <IUser>은 []를 왜 안쓰시는지 궁금합니다. setShowCreateChannelModal: (flag: boolean) => void; 이것은 또 어떤 타입선언인지 궁금합니다. true, false를 바꾸고 아무것도 리턴하지 않는 함수? 너무 기초적인것 여쭤봐서 죄송합니다ㅠㅠ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
socket 객체의 삭제에 관한 질문
안녕하세요 제로초님 ㅎ 제가 sleact프론트 만들기 강의를 듣고 express로 서버를 직접 구현해보고 있습니다. 근데 socket부분을 구현하던 중 의문이 들었습니다. workspace가 바뀌거나, 페이지 새로고침을 하면 서버에 새롭게 socket.on('connect') 요청이 가고 서버에선 새롭게 다시 통신을 합니다. onlineMap[newNamespace.name][socket.id] = id; //유저정보 기록 이렇게 새롭게 유저를 넣어주고, newNamespace.emit('onlineList', onlineMap[newNamespace.name]); 이렇게 서버로 온라인 리스트를 보내주고 콘솔에 찍어주니 새로고침할때마다 id 앞에있는 socket id가 이렇게 바뀌는데, 매번 새로고침할때마다 기존의 socket은 삭제되고, 새롭게 생성되는 것인가요? (disconnect해서 onlineList= {} 에서 삭제되는것 질문하는거아님) 그리고 DMList에서 onlineList를 가져온다음 socket.off를 해주는 이유가 무엇인가요>? 질문이 길어서 죄송합니다. 답변 기다리겠습니다!