묻고 답해요

DM 내용 표시하기

미해결

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

안녕하세요 강의중에 DM 내용 표시 하기 강의에서 map을 활용해 DM내용을 표시하는 부분인데 DM을 클릭하고 내용을 확인할 때 TypeError에러가 뜨면서 chatData.map is not a function 이라는 오류가 나오고 있습니다.. 혼자 해결하다 막혀서 질문 남겨 드립니다! DirectMessage.tsx (return 부분) return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); chatList.tsx import React, { VFC, useCallback, useRef } from 'react'; import { ChatZone } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { const scrollbarRef = useRef(null); const onScroll = useCallback(() => {}, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollbarRef} onScrollFrame={onScroll}> {chatData?.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Scrollbars> </ChatZone> ); }; export default ChatList; chat.tsx import { IDM, IChat } from '@typings/db'; import React, { VFC, memo, useMemo } from 'react'; import gravatar from 'gravatar'; import { ChatWrapper } from './styles'; interface Props { data: IDM; } const Chat: VFC<Props> = ({ data }) => { const user = data.Sender; return ( <ChatWrapper> <div className="chat-img"> <img src={gravatar.url(user.email, { s: '36px', d: 'retro' })} alt={user.nickname} /> </div> <div className="chat-text"> <div className="chat-user"> <b>{user.nickname}</b> <span>{data.createdAt}</span> </div> <p>{data.content}</p> </div> </ChatWrapper> ); }; export default Chat; 오류내용

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

웹소켓은 프록시 사용 할 수 없나요?

해결됨

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

`http://localhost:3095/ws-${workspace}` 위 주소로는 잘 되는데 `/api/ws-${workspace}` 로는 연결이 안됩니다. 웹소켓은 프록시 못쓰는건지, 못쓴다면 혹시 왜 안되는건지 이유를 여쭈워도 괜찮을까요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

Scss문법

해결됨

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

styles.tsx파일을 보면 & img {...} & > div {...} 이렇게 있던데 '>' 기호가 있고 없고의 차이점은 뭔가요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

chat box가 위에 고정되어 있습니다.

미해결

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

DirectMessage import React, { useCallback, useState } from 'react'; import gravatar from 'gravatar'; import { Container } from 'semantic-ui-react'; import { Header } from './styles'; import useSWR from 'swr'; import { useParams } from 'react-router'; import fetcher from '@utils/fetcher'; import ChatBox from '@components/ChatBox'; import useInput from '@hooks/useinput'; import axios from 'axios'; import { IDM } from '@typings/db'; import ChatList from '@components/ChatList'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher); const { data: myData } = useSWR('/api/users', fetcher); const { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspace/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); const onSubmitForm = useCallback( (e) => { e.preventDefault(); console.log('chat'); if (chat?.trim()) { axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); setChat(''); }) .catch(console.error); } }, [chat], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage; ChatList import React, { VFC } from 'react'; import { ChatZone, Section } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { return ( <ChatZone> {chatData?.map((chat) => { <Chat key={chat.id} data={chat} />; })} </ChatZone> ); }; export default ChatList; 보여드린 코드처럼 chatbox 중간에 chatlist를 넣게 되면 자동으로 아래로 내려갈 수 있게 했습니다. 말씀대로 chatlist를 만들고 directmessage사이에 chatlist를 import 했습니다. 그런데 아래로 내려오지 않고 상단으로 그대로 고정되어 있어서 아무리 찾아보려고 해도 답이 안나오는거 같아 질문 남겨드립니다 ㅠ

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

graphviz 설치 후 에러메시지..문의드립니다.

미해결

[개정판] 파이썬 머신러닝 완벽 가이드

graphviz 설치하고 실습파일 4-2의 3번째줄까지 코드를 작성하면 '[Errno 13] Permission denied: PosixPath('dot')' 가 발생합니다. 해결방법을 알 수 있을까요?

• python
• 머신러닝
• 통계

파이썬 주파수 추출

미해결

파이썬을 통해 음성 wave파일에서 주파수 값을 추출해서 array 등으로 계산할 수 있도록 하려고 합니다. 그렇게 해서 주파수 대역폭 (최대 - 최소)를 값으로 구하고 싶은데 아무리 구글링을 해도 안나오네요 ㅜㅜ 뭘써야할까요..>?

• 파이썬
• 주파수
• 통신
• python

(req,res,next) -> next()

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

책에서 프로젝트를 진행하다보면 보통 try { } catch(error) { console.error(error); next(error) } 로 next(error)를 해주시는데 error가 발생했을때 console.error(error)를 찍고 next(error)에서 에러처리(ex)프로젝트에서 app.use((err, req, res, next) => { res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; res.status(err.status || 500); res.render('error'); }); 여기로로 보내지는게 맞나요?

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

제로초 슬랙방에 참여가 불가능합니다.

해결됨

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

위와 같이 활성 상태가 아니라고만 뜹니다. http://bitly.ws/yCFL 이 링크를 통해 들어가려고 시도했습니다. 2번째 동영상 강의교안, 깃헙 등 링크모음 강의에 있는 링크 입니다.

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

Windows 프로젝트 만드는 방법

해결됨

Windows 소켓 프로그래밍 입문에서 고성능 서버까지!

안녕하세요~ IOCP까지 강의를 들으면서 예제들을 다운로드 하면서 실행하고 이해하고 하였습니다. 예제들인, Windows 프로젝트를 다운로드해서 실행하는 방식 말고, 직접 손 코딩이 하고 싶어 만들려고 하니, 오류도 나고 뭐가 뭔지 잘 모르는 부분이 있어 남겨봅니다. 일단 저가 시도 한 부분 적어보고, 수정해야 할 부분 피드백 부탁드립니다. (아니면 그냥 순차적으로 전체적으로 하는 방법 설명해주셔도 됩니다.^^) 첫번째로. Windows 데스크 톱 마법사에서 데스크톱 애플리케이션 미리 컴파일된 헤더만 클릭하였습니다. 두번째로 미리 컴파일된 헤더 추가하는 방법 링크 https://hungrysoul9.github.io/2019/09/26/add-vs-pre-complied-header/ 처럼 stdafx.cpp 추가하고 stdafx.h 해서 뭘 어떻게 해야되는지 모르겠고, ->여기서 조금 헤더파일 pch관련된 부분 수정하고 ctrl+f5 누르면 ( 심각도 코드 설명 프로젝트 파일 줄 비표시 오류(Suppression) 상태 오류 LNK2019 WinMain@16"int _cdecl invoke_main(void)" (?invoke_main@@YAHXZ) 함수에서 참조되는 확인할 수 없는 외부 기호 IOCP_chat D:\C++\IOCP_chat\MSVCRTD.lib(exe_winmain.obj) 1 오류 LNK1120 1개의 확인할 수 없는 외부 참조입니다. IOCP_chat D:\C++\IOCP_chat\Debug\IOCP_chat.exe 1 ) 다음과 같은 오류가 뜹니다.. 따라서 -> https://pang2h.tistory.com/156 링크를 참조해서 속성 링커에 시스템에 하위 시스템을 콘솔 또는 지우니까 해결이 되었는데,,, 이렇게 만들어 지는 건가요? 해결이 되었다면 되었는데,, C/C++과는 다르게 Windows 프로그래밍은 처음이라,, 어떻게 프로젝트를 만들어야 하는지 정리 한번 부탁드립니다. 또는 맞게 잘 하였다면,, 피드백 부탁드립니다. 감사합니다. (질문 등록하고 수정하고 한 글입니다...^^)

• socket.io
• udp
• iocp
• tcpip

영상 5:20 설명 질문

해결됨

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

실패하면 then의 revalidate때문에 원래 있던 데이터가 사라진다고 하셨는데 따로 catch부분에서 처리해줘야 이전에 넣어뒀던 가짜 데이터를 삭제하는 등 처리되는 거 아닌가요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

useSWRInfinite에서 index질문

해결됨

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

const { data: chatData, mutate, setSize, } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, ); setSize에서 prevSize +1이 1페이지 더 불러오는 거면 useSWRInfinite에서 index +1은 뭔 역할이죠? 둘 다 페이지 관련된거라 헷갈립니다.

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

[Tip] NAS와 같이 외부의 DB에 연결하는 경우

해결됨

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

Environment - Synology NAS - code-server - MySQL(mariaDB) - Node.js@latest | v18.16.0 - npm@latest | v9.5.1 - nvm@latest | v0.39.3 sequelize 사용 시, 로컬이 아닌 외부 DB에 연결하는 경우 저 같은 경우, Synology NAS로 code-server를 사용하고 있습니다. 저와 비슷한 환경에서 개발하시는 경우, 포트 설정에 애먹으시는 분 있을까봐 메모 납깁니다. db의 port를 방화벽에서 해제하기 해당 포트 포트포워딩(공유기) 참고로, phpMyAdmin이나 WorkBench에서 외부 DB에 접근이 가능한데, squelize 로 접근하면 ERROR: connect ETIMEDOUT 과 같은 메시지가 출력되는 경우가 있는데, 저는 아래 방법으로 해결할 수 있었습니다. (위 에러메시지는 host는 찾았지만 DB를 찾지 못했거나, DB가 있어도 접근할 수 없을 때 출력된다고 합니다.) { "development": { "username": "slackk", "password": process.env.DB_PASSWORD, "database": "slack-db", "host": "***.***.***.***", //IP "port": 3307, //source|target 다를 경우 별도로 지정 "dialect": "mysql" } } port 를 별도로 지정해주어야 합니다. ERROR: getaddrinfo ENOTFOUND {IP address} 메시지가 출력되는 경우 host 에 입력한 주소 문제입니다.

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

LSTM 예측에 관련되서 질문입니다.

해결됨

실전 금융 머신러닝: 파이썬으로 구축하는 중급 투자 전략

안녕하세요 예측에 관련되서 여쭤볼게 있어서 질문 드립니다. LSTM훈련 후 Original Price와 Predicted Price의 그래프를 그리실 때 자세히 보시면 Predict price가 Original price의 데이터를 1스탭 뒤로 그려지는 것을 볼 수 있습니다. 그렇다면 이건 예측이 아니라 전 스탭에 있는 데이터를 어느정도 이동평균 또는 지수 이동평균과 같이 보정해서 쓴다고 보는게 맞지 않을까요? 이렇게 나오는 것보다 완전히 맞지 않더라도 1스탭 뒤로 예측되는 예측되는 것보다 어느정도 맞게 따라가는 방법은 없을까요?

• python
• 머신러닝

로그인 성공시 /workspace/channel 로 이동이 안되고 있습니다.

미해결

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

App.tsx import React, { FC } from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router'; const Login = loadable(() => import('@pages/Login')); const SignUp = loadable(() => import('@pages/SignUp')); const Channel = loadable(() => import('@pages/Channel')); const App: FC = () => { return ( <Switch> <Redirect exact path="/" to="/login" /> <Route path="/login" component={Login} /> <Route path="/signUp" component={SignUp} /> <Route path="/workspace/channel" component={Channel} /> </Switch> ); }; export default App; Login/ index.tsx import React, { useState, useCallback } from 'react'; import useInput from '@pages/hooks/useinput'; import axios from 'axios'; import { Error, Form, Label, Input, LinkContainer, Button, Header } from '@pages/SignUp/styles'; import { Link, Redirect } from 'react-router-dom'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; const Login = () => { const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher); //주소를 fetcher로 옮겨주고 실제로 주소를 어떻게 처리할지 정해줌 const [logInError, setLogInError] = useState(false); const [email, onChangeEmail] = useInput(''); const [password, onChangePassword] = useInput(''); const onSubmit = useCallback( (e) => { e.preventDefault(); setLogInError(false); axios .post( 'http://localhost:3095/api/users/login', { email, password }, { withCredentials: true, }, ) .then(() => { revalidate(); }) .catch((error) => { setLogInError(error.response?.data?.statusCode === 401); }); }, [email, password], ); if (data) { return <Redirect to="/workspace/channel" />; } Channel / index.tsx import Workspace from '@layouts/Workspace'; import React from 'react'; const Channel = () => { return ( <Workspace> <div>로그인을 축하합니다.</div> </Workspace> ); }; export default Channel; Workspace.tsx import React, { FC, useCallback } from 'react'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import { Redirect } from 'react-router'; const Workspace: FC = ({ children }) => { const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher); const onLogout = useCallback(() => { axios .post('http://localhost:3095/api/users/logout', null, { withCredentials: true, }) .then(() => { revalidate(); }); }, []); if (!data) { return <Redirect to="/login" />; } return ( <div> <button onClick={onLogout}>로그아웃</button> {children} </div> ); }; export default Workspace; 현재 코드에서 로그인 성공까지 되는데 페이지 이동이 없습니다... 하나하나 빠짐없이 확인 해봤는데 제가 찾지 못하는거 같습니다 ㅠㅠ 더군다나 URl 주소를 다이렉트로 localhost:3090/workspace/channel 입력해도 아무런 창이 뜨지 않고 있어서 어떤 문제가 있는지 확인이 어렵습니다.. 도움을 부탁드려요

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

정규표현식 질문

해결됨

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

만약에 닉네임을 name[react](23) 라고 지었고, id가 20이라면 data.content는 @[name[react](23)](20) 이런식으로 되잖아요. 그런데 거기서 코드에 있는 정규표현식을 쓰면 match는 ](1) 부분을 빼먹게 되고 그 상태에서 arr을 구하면 닉네임이 name[react 으로, id는 1이 아닌23으로 출력되더라고요. 실제로 예시와 똑같이 회원가입 하고 name[react](23)에게 멘션 해보니 클릭했을 때 초깃값으로 파란줄이 name[react 까지만 생성되고 추가로 ](20) 이란 텍스트가 더해지더라고요. (참고로 name[react](23)의 ID가 20입니다.)물론 Link로 넘어가는 것도 안되고요. 그래서 +? 말고 그냥 +로 해보니깐 위처럼 잘 매칭 되는 것 같아서 코드에 적용시켰더니 이제 Link부분은 잘 나오는데 멘션 클릭시 초깃값이 여전히 이상하게 나옵니다. 저 부분은 어딜 고쳐야 되는 건가요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

폴링 방식 쓰면 CORS에러 나는 이유

해결됨

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

웹 소켓쓸 때 폴링방식으로 쓰면 http갔다가 웹 소켓으로 전환되기 때문에 CORS문제가 발생한다고 했는데 http요청을 한다 한들 저희는 이미 proxy를 설정한 상태인데 왜 cors문제가 발생하는 건가요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

socket.io 버전

해결됨

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

다시 시도해보고 질문하겠습니다.

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

회원가입 버튼 클릭 시 콘솔창에 입력정보들이 나열되지않습니다.

해결됨

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

정보를 입력 후 회원가입 버튼을 클릭하면 콘솔창에 제로초님 화면처럼 정보들이 나열되지않습니다! -백 콘솔창 Executing (default): SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_NAME = 'ChannelMembers' AND TABLE_SCHEMA = 'sleact' Executing (default): SHOW INDEX FROM ChannelMembers FROM sleact DB 연결 성공 GET /api/users 304 24.697 ms - - GET /api/users 200 4.038 ms - 5 GET /api/users 304 2.241 ms - - GET /api/users 304 3.459 ms - - GET /api/users 304 2.637 ms - - GET /api/users 304 2.528 ms - - -회원가입 index import useInput from '@hooks/useInput'; import { Header, Form, Label, Input,Error, Success, LinkContainer, Button } from "./style"; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, useState } from "react"; import { Redirect } from "react-router-dom"; import useSWR from 'swr'; const Signup = () => { const [email, setEmail] = useState(''); const [nickname, setNickname] = useState(''); const [password, setPassword] = useState(''); const [passwordCheck, setPasswordCheck] = useState(''); const {data: userData} = useSWR('/api/users', fetcher); const [signupError, setSignUpError] = useState(false); const [signUpSuccess, setSignUpSuccess] = useState(false); const [mismatchError, setMismatchError] = useState(false); const onChangeEmail = useCallback ( (e) => { setEmail(e.target.value); }, []); const onChangeNickname = useCallback ( (e) => { setNickname(e.target.value); }, []); const onChangePassword = useCallback ( (e) => { setPassword(e.target.value); setMismatchError(passwordCheck !== e.target.value); }, [passwordCheck, setPassword], ); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setMismatchError(password !== e.target.value); }, [password, setPasswordCheck], ); const onSubmit = useCallback( (e) => { e.preventDefault(); if(!nickname || nickname.trim()) { return; } if(! mismatchError) { setSignUpError(false); setSignUpSuccess(false); axios .post('/api/users', {email, nickname, password }) .then(() => { setSignUpSuccess(true); }) .catch((error) => { console.log(error.response?.data); setSignUpError(error.response?.data?.code ===403); }); } }, [email, nickname, password, mismatchError], ); if (userData) { return <Redirect to ="/workspace/sleact"/>; } return ( <div id="container"> <Header>Sleact</Header> <Form onSubmit={onSubmit}> <Label id="email-label"> <span>이메일 주소</span> <div> <Input type="email" id="email" name="email" value={email} onChange={onChangeEmail}/> </div> </Label> <Label id="nickname-label"> <span>닉네임</span> <div> <Input type="text" id="nickname" name="nickname" value={nickname} onChange={onChangeNickname}/> </div> </Label> <Label id="password-label"> <span>비밀번호</span> <div> <Input type="password" id="password" name="password" value={password} onChange={onChangePassword}/> </div> </Label> <Label id="password-check-label"> <span>비밀번호 확인</span> <div> <Input type="password" id="password-check" name="password-check" value={passwordCheck} onChange={onChangePasswordCheck}/> </div> {mismatchError && <Error>비밀번호가 일치하지 않습니다.</Error>} {!nickname && <Error>닉네임을 입력해주세요</Error>} {signupError && <Error>이미 가입된 이메일입니다.</Error>} {signUpSuccess && <Success>회원 가입되었습니다! 로그인해주세요.</Success>} </Label> <Button type="submit">회원가입</Button> </Form> <LinkContainer> 이미 회원이신가요?&nbsp; <a href="/login">로그인 하러 가기</a> </LinkContainer> </div> ); }; export default Signup; -개발자도구 콘솔창 -개발자도구 네트워크 요청 URL: http://localhost:3090/api/users 요청 메서드: GET 상태 코드: 304 Not Modified 원격 주소: [::1]:3090 리퍼러 정책: strict-origin-when-cross-origin 응답 헤더소스 보기 access-control-allow-credentials: true connection: close date: Wed, 26 Apr 2023 05:29:10 GMT etag: W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ" vary: Origin x-powered-by: Express 요청 헤더소스 보기 Accept: application/json, text/plain, / Accept-Encoding: gzip, deflate, br Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7 Connection: keep-alive Host: localhost:3090 If-None-Match: W/"5-fLbvuYullyqbUJDcLlF/4U0SywQ" Referer: http://localhost:3090/signup sec-ch-ua: "Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99" sec-ch-ua-mobile: ?0 sec-ch-ua-platform: "Windows" Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-origin User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

api/workspaces POST요청시 500에러가 뜹니다.

해결됨

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

const onCreateWorkspace = useCallback( (e: any) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; // trim : 앞 뒤 공백제거 if (!newUrl || !newUrl.trim()) return; axios .post( 'http://localhost:3095/api/workspaces', { Workspace: newWorkspace, url: newUrl, }, { withCredentials: true }, ) .then(() => { mutate(userData, true); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); 뭐가 문제인건가요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

interface Props 타입 넣는 법 질문

해결됨

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

interface Props { show: boolean; onCloseModal: () => void; style: CSSProperties; closeButton?: boolean; } const Menu: FC<React.PropsWithChildren<{}>> = ({ children, style, show, onCloseModal, closeButton }) => {...} 이 상태에선 Props타입을 어떻게 넣어야 하는 건가요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩