Slack 클론 코딩[실시간 채팅 with React]

TypeError (0 , swr__WEBPACK_IMPORTED_MODULE_5__.useSWRConfig) is not a function 에러와 관련하여 질문 드립니다.

2022-02-05T18:41:08.698Z

1522

cofla411

작성한 질문수 1

안녕하세요. 강의를 듣다가 에러가 발생하여 질문드립니다. 타입스크립트를 다루는데 익숙하지 않아 에러가 어디서 발생했는지 가늠이 잘 안됩니다ㅜㅜ

공지사항에 올려주신 대로 ser-devtools 업데이트에 맞게 client.tsx를 아래와 같이 수정했는데 다음과 같은 에러메세지가 계속 나와 화면이 보이지 않습니다

코드를 수정할 때 core-js와 @jjordy/swr-devtools 를 함께 설치해주었습니다. 이때 @jjordy/swr-devtools 를 설치할 때 에러가 나 -f로 강제로 설치했었는데 혹시 이것이 문제가 되는 것일까요?

typescript Socket.io react babel 웹팩 클론코딩

답변 5

cofla411

2022-02-07T02:17:45.742Z

감사합니다. 어제 user===false로 지정하자 아래 질문과 같은 에러가 발생하였습니다. 에러문은 아래와 같습니다.

const userData: IUser | undefined 개체가 'undefined'인 것 같습니다.ts(2532)

typings 설정도 제대로 했는데 왜 이런 오류가 발생하는 걸까요..? 혹시 몰라 typings 코드도 함께 남겨드립니다..

https://www.inflearn.com/questions/370629

export interface IUser {
id: number;
nickname: string;
email: string;
Workspaces: IWorkspace[];
}
 
export interface IUserWithOnline extends IUser {
online: boolean;
}
 
export interface IChannel {
id: number;
name: string;
private: boolean; // 비공개 채널 여부, 강좌에서는 모두 false(공개)
WorkspaceId: number;
}
 
export interface IChat {
// 채널의 채팅
id: number;
UserId: number;
User: IUser; // 보낸 사람
content: string;
createdAt: Date;
ChannelId: number;
Channel: IChannel;
}
 
export interface IDM {
// DM 채팅
id: number;
SenderId: number; // 보낸 사람 아이디
Sender: IUser;
ReceiverId: number; // 받는 사람 아이디
Receiver: IUser;
content: string;
createdAt: Date;
}
 
export interface IWorkspace {
id: number;
name: string;
url: string; // 주소 창에 보이는 주소
OwnerId: number; // 워크스페이스 만든 사람 아이디
}

제로초(조현영)

2022-02-07T02:34:16.333Z

IUser | false를 IUser | false | undefined 로 바꿔보세요

cofla411

2022-02-06T15:22:26.609Z

아래 페이지로 이동합니다 ..!

https://support.google.com/chrome/answer/95669?visit_id=637797567181515999-2649936511&p=e_awsnap&rd=1

제로초(조현영)

2022-02-06T15:46:42.540Z

if (!userData)를 if (userData === false) 로 바꿔보세요.

cofla411

2022-02-06T12:47:21.367Z

/workspace/:workspace로 바꾼 이후에도 http://localhost:3090/workspace/channel로 이동이 되지 않습니다..

위 사진과 같이 네트워크 창에 channel이 생기지 않습니다. login에서 workspace/channel로 넘어가는데 문제가 있는 것 같은데 대체 어디서 문제가 발생하는 것인지 모르겠습니다..

나중에 로딩에 실패하고 다시 새로고침을 하면 아래와 같이 channel이 네트워크에서 보입니다.

Request URL:

http://localhost:3090/workspace/channel

제로초(조현영)

2022-02-06T14:35:32.365Z

저기서 자세히 알아보기 누르면 뭐가 뜨나요?

cofla411

2022-02-06T05:29:07.283Z

답변 감사드립니다. package.json에서 확인해본 결과 아래와 같습니다!

"@jjordy/swr-devtools": "^2.2.0",

"swr": "^0.4.2",
 

제로초(조현영)

2022-02-06T05:55:59.144Z

swr 1버전이 아니시네요. 그럼 강좌 영상에 나온대로 쓰셔야 합니다. @jjordy/swr-devtools도 1버전을 설치하셔야 하고요. npm i @jjordy/swr-devtools@1

cofla411

2022-02-06T09:53:33.021Z

감사합니다! 이부분은 해결했습니다. 다만 swr에러를 해결하고 나니 map관련 오류가 발생하여 아래 부분을 다음과 같이 수정하니 로그인에서 http://localhost:3090/workspace/channel로 넘어가는 화면이 뜨지 않습니다.. 어느 부분을 수정해야하는 걸까요..? 혹시 db쪽에 문제가 있는 것일까요?

{userData?.Workspaces?.map((ws)=>{

다음은 Workspace의 index.tsx 코드입니다

import {
AddButton,
Channels,
Chats,
Header,
LogOutButton,
MenuScroll,
ProfileImg,
ProfileModal,
RightMenu,
WorkspaceButton,
WorkspaceModal,
WorkspaceName,
Workspaces,
WorkspaceWrapper,
} from './styles';
import React, { FC, useCallback, useState } from "react";
import fetcher from "@utils/fetcher";
import useSWR from "swr";
import axios from "axios";
import{Link, Redirect, Route, Switch} from "react-router-dom";
import gravatar from 'gravatar';
import loadable from "@loadable/component";
import Menu from "@components/Menu";
import { IUser } from "@typings/db";
import { Button, Input, Label } from "@pages/SignUp/styles";
import useInput from "@hooks/useInput";
import Modal from '@components/Modal';


const Channel=loadable(()=>import('@pages/Channel'));
const DirectMessage=loadable(()=>import('@pages/DirectMessage'));

const Workspace: FC=({children})=>{
const [newUrl, onChangeNewUrl, setNewUrl]=useInput('');
const [newWorkspace, onChangeNewWorkspace, setNewWorkspace]=useInput('');
const [showUserMenu, setShowUserMenu]=useState(false);
const [showCreateWorkspaceModal, setShowCreateWorkspaceModal]=useState(false);
const { data:userData, error, revalidate, mutate } = useSWR<IUser | false>('http://localhost:3095/api/users', fetcher, {
dedupingInterval: 2000, //2초
});

const onLogout=useCallback(()=>{
axios
.post('http://localhost:3095/api/users/logout',null, {
withCredentials: true,
} )
.then(()=>{
mutate(false, false);
})
}, []);

const onCloseUserProfile=useCallback((e)=>{
e.stopPropagation();
setShowUserMenu(false);
}, []);

const onClickUserProfile=useCallback(()=>{
setShowUserMenu((prev)=>(!prev));
}, []);

const onClickCreateWorkspace=useCallback(()=>{
setShowCreateWorkspaceModal(true);
}, []);

const onCreateWorkspace=useCallback(()=>{

}, []);

const onCloseModal=useCallback(()=>{
setShowCreateWorkspaceModal(false);
}, []);

if(!userData){ //로그아웃해서 data가 false가 되는 순간 login페이지로 보내버림 
return <Redirect to="/login"/>;
}

return(
<div>
<Header>
<RightMenu>
<span onClick={onClickUserProfile}>
<ProfileImg src={gravatar.url(userData.email, {s: '28px', d: 'retro'})} alt={userData.nickname}/>
{showUserMenu && (
<Menu style={{right: 0, top: 38}} show={showUserMenu} onCloseModal={onClickUserProfile}>
<ProfileModal>
<img src={gravatar.url(userData.email, {s: '36px', d: 'retro'})} alt={userData.nickname}/>
<div>
<span id="profile-name">{userData.nickname}</span>
<span id="profile-active">Active</span>
</div>
</ProfileModal>
<LogOutButton onClick={onLogout}>로그아웃</LogOutButton>
</Menu>
)}
</span>
</RightMenu>
 
</Header>
<button onClick={onLogout}>로그아웃</button>
<WorkspaceWrapper>
<Workspace>
{userData?.Workspaces?.map((ws)=>{
return(
<Link key={ws.id} to={'/workspace/${}/channel/일반'}>
<WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton>
</Link>
)
})}
<AddButton>onClick={onClickCreateWorkspace}</AddButton>
</Workspace>
<Channels>
<WorkspaceName>Sleact</WorkspaceName>
<MenuScroll>menu scroll</MenuScroll>
</Channels>
<Chats>
<Switch>
<Route path="/workspace/channel" component={Channel}/>
<Route path="/workspace/dm" component={DirectMessage}/>
</Switch>
</Chats>
</WorkspaceWrapper>
<Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}>
<form onSubmit={onCreateWorkspace}>
<Label id='workspace-label'>
<span>워크스페이스 이름</span>
<Input id='workspace' value={newWorkspace} onChange={onChangeNewWorkspace}/>
</Label>
<Label id='workspace-url-label'>
<span>워크스페이스 이름</span>
<Input id='workspace' value={newUrl} onChange={onChangeNewUrl}/>
</Label>
<Button type="submit">생성하기</Button>
</form>
</Modal>
{children}
</div>
)
}

export default Workspace;

cofla411

2022-02-06T09:56:13.971Z

추가로 마지막에 다음과 같은 에러메세지가 나오고 결국 workspace/channel이 로딩되지 않습니다.

제로초(조현영)

2022-02-06T10:29:17.348Z

저건 에러가 아니고요. layouts/App 보여주세요.

cofla411

2022-02-06T10:35:02.924Z

네 감사합니다 ! App/index.tsx입니다.

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 Workspace=loadable(()=>import('@layouts/Workspace'));

const App=()=>{

return (
<Switch> //세개 중에 하나의 컴포넌트만 보이게 됨.
<Redirect exact path="/" to="/login"/>
<Route path="/login" component={LogIn} />
<Route path="/signup" component={SignUp} />
<Route path="/workspace" component={Workspace}/>
</Switch>
);
};

export default App;

제로초(조현영)

2022-02-06T10:45:39.119Z

주소를 /workspace/:workspace로 바꿔보세요

cofla411

2022-02-06T10:54:02.045Z

package.json에서 확인해본 결과 리액트라우터5 사용중인 것 같습니다..!

"react-router": "^5.2.1",

"react-router-dom": "^5.3.0",

제로초(조현영)

2022-02-06T02:05:04.387Z

swr이랑 swr-devtools 버전 알려주세요.

기본 셋팅과 관련하여

2025-08-11T15:50:56.111Z

106

초기 셋팅 back과 front만 남겨두고 다 지운 후 진행 방법

2025-08-09T15:43:50.696Z

109

focus 시에만 화면 업데이트 되는 이유 + 해결방법

2025-06-14T05:40:47.752Z

165

useEffect 개수 관리

2025-06-14T05:04:18.193Z

122

라이브러리 서치 방법

2025-06-14T03:29:19.028Z

118

함수 정의 패턴

2025-06-11T14:56:02.168Z

npm run dev 에러

2025-04-13T09:49:22.220Z

156

npx webpack 후 에러

2025-04-07T14:19:18.928Z

187

'void' 형식 식의 truthiness를 테스트할 수 없습니다.ts(1345)

2025-02-08T09:01:53.800Z

151

사용자 가입시 에러발생 (TypeError: Cannot read properties of null (reading 'addMembers')

2025-02-03T02:08:49.147Z

192

초기세팅중 packge.json 에러떠요

2024-12-08T15:00:27.143Z

162

CORS - Access-Control-Allow-Origin 누락 문제

2024-11-13T09:17:55.966Z

439

로그인 페이지 무한 새로고침 현상

2024-10-10T11:03:18.851Z

608

Module not found: Error: Can't resolve './App' 에러

2024-09-01T12:26:40.103Z

970

배포 방법

2024-08-26T08:59:12.027Z

306

npm run dev 시 빌드가 매우 느려졌습니다

2024-08-07T09:01:29.274Z

1010

alias 경로 설정 오류

2024-07-24T13:14:00.985Z

461

fetcher 함수의 data 값이 두번 찍히는 이유

2024-07-23T15:02:04.839Z

282

제네릭 질문

2024-07-18T14:06:09.530Z

225

ts-node 대신 tsx 사용여부

2024-06-27T14:08:53.330Z

377

배포 관련 질문

2024-04-17T15:14:13.473Z

249

[nginx + https] 서비스를 실행하면 niginx가 아닌 서비스 화면을 보여주게 하고 싶습니다.

2024-04-14T17:41:31.788Z

395

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

2024-04-14T08:29:36.673Z

341

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

2024-03-28T12:29:14.111Z

252