39,600원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
배운 내용을 토대로 swr을 이용하여 프로젝트를 하고 있는데요!
const {data, error, revalidate}=useSWR(주소, fetcher) -> 주소: fetcher 함수 실행을 요청할 주소 fetcher: 어떤 기능을 수행할 지 정의해 둔 함수 요청이 성공되면, revalidate 함수가 실행된 뒤, data로 응답을 받아와서 응용할 수 있다. 이렇게 이해했는 데 맞을까요? 그리고, fetcher는 하나가 아니라 여러가지를 만들어도 괜찮을까요? get을 할 수 있는 fetcher, post를 할 수 있는 fetcher 등 나눠서 사용할 수 있을까요? 그리고 프로젝트를 함께 진행하고 있는 친구가 회원가입을 하기 위해 post를 해줬고, 성공 시 response로 관련 데이터를 보내주는데 /api/user에 굳이 userData를 넣어서 또 get으로 받아볼 수 있도록 해야 하냐고 물어보던데 당연히 필요한 거 아닌가..? 라는 생각이 들지만 명확한 근거를 모르겠어서 질문드립니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
useMemo 대신에
안녕하세요 제로초님 유즈메모 대신에 유즈 콜백 써도 되나요? 유즈 콜백이랑 모양이 똑같이 생긴거같은데.. 다른때는 왜 유즈콜백쓰고 여기에는 유즈메모를 썼는지 그 차이점이 바로 보이지 않네요ㅠㅠ 감사합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
렌더링 될 때마다 socket.io connect 오류
렌더링 될 때마다 socket.io가 connect이 되어 소켓상태에서 connect상태로 로그가 찍힙니다. 혹시 렌더링이 될때마다 socket .io connect를 시키지 않는 방법이 있을까요 ?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 질문이 있습니다!
안녕하세요 제로초님의 react 관련 강의들을 수강 중에 강의 내용과 조금 무관하지만 궁금한 점이 있어 질문 드립니다! client 단과 server단의 코드들을 각각 실행시키는 것에 대해 궁금점이 있는데요, 예를들어 client를 react cra로 환경을 구성하고, server를 node js express 로 구성한다고 가정할 경우 제로초님 강의도 그렇고 보통 client와 server 각각 다른 포트로 서버를 실행시켜 진행을 하시던데요, 이 방법은 개발 단계(배포 이전)에서 편의를 위해 사용하시는 건가요? 만약 배포 과정이라면 client 코드를 빌드시켜 server 측에서 해당 index.html 파일을 참조하는 방식으로 로드를 하는건가요? 제가 강의의 배포 과정들을 다 면밀히 보진 않아서... 실제 현업에서 개발을 진행할 경우 보통 실행을 어떤 식으로 하시는지 궁금해서 질문 드려봅니다!
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 ! 강의와 관련 없는 질문이지만 답변주시면 감사하겠습니다 :D ..
안녕하세요. 항상 제로초님 강의 들으면서 열심히 공부하고 있는 학생입니다 ! 채팅서비스를 React 를 이용한 모바일 웹으로 한번 만들어 보고 싶은데요, 사진업로드 관련하여 질문이 있습니다 .. ! 카카오톡을 보면 사진 업로드 할 때, 아래 사진처럼 핸드폰 앨범의 이미지가 미리보기 형태로 나오더라구요. native가 아닌 React로도 이런 기능을 구현할 수 있는지 궁금합니다. 가능하다면, 어떤 식으로 접근해야하는지 알려주시면 정말 감사하겠습니다 .. !
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npx sequelize db:create 에러
환경변수 설정 잘 해두었습니다. ---------------------------------------------- Sequelize CLI [Node: 16.15.0, CLI: 6.4.1, ORM: 6.19.0] Loaded configuration file "config\config.js". Using environment "development". ERROR: Access denied for user 'root'@'localhost' (using password: NO) 오류가 뜹니다. ------------------------------------------------ 선생님과 다르게 .env가 색(?)활성화(?) 문제로 인식이 안되는 것 말고는 크게 모르겠습니다. config.js의 password는 devlepment,test,production 3개다 모두 바꿨습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
로그아웃 시 useSocket 에러발생
기존 에는 로그아웃을 하면 로그인 페이지로 바로 이동을 했는데 useSocket 훅스를 추가하고 나서 로그아웃을 하면 위처럼 useSocket에러가 생기네요 ㅠㅠ 뭐가 잘못된건지 잘 모르겠어서 질문남깁니다! 아래는 useSocket 코드랑 로그아웃 코드입니다.. import { io, Socket } from 'socket.io-client'; const backUrl = 'http://localhost:3095'; const sockets: { [key: string]: Socket } = {}; function useSocket(workspace?: string): [Socket | undefined, () => void] { const disconnect = () => { if (workspace) { sockets[workspace].disconnect(); delete sockets[workspace]; } }; if (!workspace) return [undefined, disconnect]; if (!sockets[workspace]) { sockets[workspace] = io(`${backUrl}/ws-${workspace}`, { transports: ['websocket'], // without polling http }); } return [sockets[workspace], disconnect]; } export default useSocket; const handleLogout = () => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then(() => { mutate(false, false); navigate('/login'); }); }; +) // useEffect(() => { // return () => { // disconnect(); // }; // }, [workspace, disconnect]); 워크스페이스 컴포넌트에 useEffect로 disconnect() 했던것을 주석처리하니 로그아웃 에러는 사라졌습니다! 그외에도 로그인 시 접속중인 유저를 바로 못 불러오고 여러번 새로고침을 해야 겨우 접송중 유저 불러오기에 성공하곤 했었는데 저 useEffect를 주석처리하니 그 에러 역시 고쳐졌습니다. disconnect() 코드가 왜 그런 에러들을 발생시킨건지,, 코드 주석처리 없이 에러 해결을 하려면 어떻게 해야할지 아이디어 주시면 감사드리겠습니다 😭 https://github.com/devjoylee/slack
- 미해결Slack 클론 코딩[실시간 채팅 with React]
<IUser | false> 에러 입니다 ㅠ
안녕하세요 제로초님 혼자 에러해결해보려다 실패해서 질문남깁니다 ㅠㅠ <IUser | false> 쓰니까 에러가 납니다 userData는 개체가 undefined 인거 같습니다 에러 뜨길래 ? 넣어서 막았는데 막으니까 false | IUser 형식에 닉네임 이메일 워크스페이스 속성이 없다고 합니다.. 제로초님 이랑 똑같이 코딩했는데 왜 이럴까요..
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 socket 통신으로 실시간 DM할 때 문제가 발생했습니다.
안녕하세요 제로초님. socket을 이용하여 onMessage 훅으로 스크롤 바를 자동으로 내리거나 현 위치를 유지하는 부분에서 다음과 같이 코드를 작성했습니다. 이렇게 작성하고 채팅을 전송하면 받는 브라우저에서는 myData.id에서 id를 읽을 수 없다는 에러가 발생합니다. 그래서 위 코드를 보듯이 myData를 console.log로 출력하니 다음과 같이 undefined가 출력되더군요. 전에 질문 했던 DM에 Header 렌더링시 userData가 undefined가 로드된 상황과 같이 처리하기에는 의도하는 것과 다르게 구현하는거라 생각하기 때문에 이런 문제를 해결하는 방법을 알려주실 수 있을까요? myData는 다음과 같이 swr로 로드했습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
새로고침시 swr 에러납니다 ㅠ
새로고침, 렌더링 하면 로그인데이터가 없다고 에러가 나는거같습니다 저 에러창에서 파라미터 다 지우고 http://localhost:3090 으로 이동하면 에러 안나고 잘 나옵니다(로그인데이터도 가지고있습니다) 아마 제 추측으로 revalidate(); 대신 mutate() 를 썻는데 그게 문제가 되는게 아닐까 싶습니다 ㅜ
- 미해결Slack 클론 코딩[실시간 채팅 with React]
여러번 로그인 해도 계속 성공합니다.
안녕하세요. 백엔드는 네스트로 만들었고, LocalAuthGuard 사용 중인데요, 여러번 로그인해도 다 성공합니다. 참고 이미지 첨부할게요. <2번 연속 로그인 성공 화면> <백엔드> nest-typeorm과 비교한 결과 캡쳐한 부분은 같은거 같은데 인증가드만 쓰고 로그인가드는 안써서 이런 결과가 나온건가요? 또, 스테이터스가 201로 오는데요 이건 크리에이트 성공 스테이터스 같은데 이렇게 설정한적이 없는데 왜 이렇게 오는지 잘 모르겠습니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
Workspace: FC = ({children}) 이 안됩니다.
이런식으로 에러가 나는데 어떻게 해결하면 좋을까요?
- 해결됨Slack 클론 코딩[실시간 채팅 with React]
기술 스택 선택에 있어 조언을 구하고 싶습니다
안녕하세요, 현재 슬랙 클론코딩 강의와 노드버드 강의를 모두 신청해서 듣고 있는 수강생입니다. 프론트엔드 쪽으로 취업 준비 중인데 덕분에 CSR과 SSR을 둘 다 경험해보며 많은 걸 배우고 있습니다! 강의를 바탕으로 응용해서 졸업논문 프로젝트로 AI 챗봇 웹사이트를 만들고자 합니다. 기본적인 회원가입/로그인 기능을 구현할 예정이고 주 기능이 챗봇과의 채팅이라서 2~3페이지 정도 필요할 것 같습니다. 사용자의 응답에 따라 챗봇 API에 요청을 보내고 응답을 받는 과정이 자주 일어납니다. 채팅 기록을 DB에 저장하고 검색할 수 있게 할 예정입니다. 기능을 고려했을 때 CSR(React)과 SSR(Next.js) 중 어떤 방식을 택하는 게 좀 더 나을지 고민이 많이 돼서 제로초님의 조언을 구하고 싶습니다ㅠ 필요한 페이지가 적고 SEO가 당장 급하지 않은 상황이긴 한데 저 혼자 풀스택으로 웹 개발을 해야 해서 슬랙 클론코딩 강의와 노드버드 강의 중 백엔드까지 배울 수 있는 노드버드 강의에 좀 더 눈이 가네요 SSR로 프로젝트를 해보고 싶기도 하고요..! 1. 본 프로젝트에 SSR, CSR 중 어떤 방식이 좀 더 적합할지, 2. CSR가 더 낫다면 슬랙 클론코딩 백엔드를 같이 수강하고 프로젝트에 응용하는 게 적합할지 궁금합니다! 글 읽어주셔서 감사합니다 :)
- 미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 DirectMessage 페이지 구현중에 문제가 생겼습니다.
문제가 발생한 부분이 아래 코드와 같이 Header 컴포넌트에서 userData와 myData값을 사용하지 않고 useSWR로 userData와 myData를 불러오면 문제 없이 데이터를 불러올 수 있습니다. 그러나 아래와 같이 주석을 풀면 useSWR에서 값을 불러오면 아래 결과와 같이 undefined로 나오는 문제가 발생합니다. 그래서 결과화면에는 TypeError Cannot read properties of undefined(reading 'email')이라는 에러 문구만 나오게 되는 상황인데 이 기묘한 문제가 왜 발생하는지와 해결법을 알 수 있을까요..? swr의 버전은 1.2.2이며 fetcher코드는 아래입니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
로그인 후 페이지 이동하면서 에러뜹니다.
로그인 후에 해당 화면이 뜨고 새로고침하면 다시 워크스페이스 화면으로 랜딩되긴 합니다. 하지만, 그 이후로 부터 api/users 404에러가 계속 뜨고 있습니다.. 제가 놓친 부분이 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
백엔드 socket.io 버전 업그레이드
안녕하세요 프론트 socket.io를 v4 공지사항 올려주신거 보고 최신버전으로 적용해봤는데 백엔드에 설치된 socket.io는 2.0~ 버전으로 설치되어있더라구요/ 그래서 그런지 socket 연결에 실패하네요.. 백엔드쪽 socket 최신버전으로 재설치 해도 되나요? 업그레이드 시 기존 코드랑 충돌이 생기진 않을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
./dist/Workspace.tsx에서 {children} 질문입니다.
강의를 들으면서 Workspace.tsx 코드를 작성할 때 const Workspace :FC를 해주면 children부분 타입에러가 해결된다고 하셨는데 계속 타입에러 뜨면서 컴파일 에러가 발생합니다. 그래서 따로 {children} : React.ReactNode도 해보고 any도 입력해 보았는데 둘다 해결되지 않습니다. 어떻게 해야하나요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
DedupingInterval에 관해서 질문드립니다.
안녕하세요 강사님. 강의 잘 보고있습니다! useSWR을 이곳저곳에서 사용하면서, 어떤 곳에서는 DedupingInterval을 1000으로 주고, 다른 곳에서는 100000으로 주면 어떤 DedupingInterval을 따르나요? 예를 들어서 A에서는 'api/users/'에 DedupingInterval을 2000으로 주고 B에서도 마찬가지로 'api/users/'을 key로 설정하지만, DedupingInterval을 5000으로 준다면 실제 캐시에는 몇 초마다 값이 갱신되나요? 혹시 현재 보고있는 view에 따라서 결정되나요? 만약 그렇다면, 매번 DedupingInterval을 매번 설정할 필요없이 전역적으로 설정하는 방법도 있을까요?
- 미해결Slack 클론 코딩[실시간 채팅 with React]
/api/users 데이터 체크
안녕하세요 강사님 userData 확인하는 부분에 대해 문의드립니다. const { data: userData } = useSWR('api/users', fetcher); const { data: channelData } = useSWR<IChannel[]>( userData ? `/api/workspaces/${workspace}/channels` : null, fetcher ); 모달이나 채팅 컴포넌트 등 만들때 위처럼 userData가 있으면 channelData를 가져오도록 user 데이터가 있는지 매번 확인을 하던데 export const WorkspaceLayout = () => { const { data } = useSWR('/api/users', fetcher); const navigate = useNavigate(); useEffect(() => { if (!data) navigate('/login'); }, [data, navigate]); return ( workspace 레이아웃에 userData가 없으면 login 페이지로 가도록 하는 코드가 있는데 굳이 매번 확인을 해야하는지 궁금해서요! workspace페이지가 보인다 = user가 있다 라고 볼 수 있으니 컴포넌트 생성시 user가 있으면 출력~~ 하는 방식은 생략해도 괜찮은가요? 아니면 혹시모를 상황을 위해 user값을 항상 확인하고 데이터를 출력하는게 맞는건지 궁금합니다.
- 미해결Slack 클론 코딩[실시간 채팅 with React]
npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-ally 설치시 에러
안녕하세요, eslint 플러그인들 설치하다가 에러가 났는데, 다시 설치해봐도 똑같은 에러만 반복이 됩니다.. 버전을 낮추라는것 같긴 한데, 버전을 낮추게되면 파일 여기저기에서 에러가 발생할까봐 무섭네요 에러를 어떻게하면 해결할 수 있을까요? `npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-ally`