172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Slack 클론 코딩[실시간 채팅 with React]
예상하지 못한 부분에서 에러가 나와서 질문 남겨드립니다 ! ChatBox.tsx import React, { useCallback, useEffect, useRef, VFC } from 'react'; import { ChatArea, EachMention, Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import autosize from 'autosize'; import { Mention, SuggestionDataItem } from 'react-mentions'; import { useParams } from 'react-router'; import useSWR from 'swr'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import gravatar from 'gravatar'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { const { workspace } = useParams<{ workspace: string }>(); const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUser[]>(userData ? `/api/workspaces/${workspace}/members` : null, fetcher); const textareaRef = useRef<HTMLTextAreaElement>(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); const renderSuggestion = useCallback( ( suggestion: SuggestionDataItem, search: string, highlightedDisplay: React.ReactNode, index: number, focus: boolean, ): React.ReactNode => { if (!memberData) return; return ( <EachMention focus={focus}> <img src={gravatar.url(memberData[index].email, { s: '20px', d: 'retro' })} alt={memberData[index].nickname} /> <span>{highlightedDisplay}</span> </EachMention> ); }, [memberData], ); return ( <ChatArea> <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyPress={onKeydownChat} placeholder={placeholder} inputRef={textareaRef} allowSuggestionsAboveCursor > <Mention appendSpaceOnAdd trigger="@" data={memberData?.map((v) => ({ id: v.id, display: v.nickname })) || []} renderSuggestion={renderSuggestion} /> </MentionsTextarea> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true" /> </SendButton> </Toolbox> </Form> </ChatArea> ); }; export default ChatBox; 혼자서 해결해보려다가 못찾고 있어서 질문 남겨드려요 ㅠㅠ
react 웹팩 typescript socket.io babel 클론코딩
유니크한 고슴도치
2023-05-08T02:17:30.858Z
댓글 2
좋아요 0
조회수 831
미해결
[개정판] 파이썬 머신러닝 완벽 가이드
graphviz 설치하고 실습파일 4-2의 3번째줄까지 코드를 작성하면 '[Errno 13] Permission denied: PosixPath('dot')' 가 발생합니다. 해결방법을 알 수 있을까요?
sitedelarue
2023-05-04T10:36:34.397Z
댓글 2
좋아요 0
조회수 491
미해결
파이썬을 통해 음성 wave파일에서 주파수 값을 추출해서 array 등으로 계산할 수 있도록 하려고 합니다. 그렇게 해서 주파수 대역폭 (최대 - 최소)를 값으로 구하고 싶은데 아무리 구글링을 해도 안나오네요 ㅜㅜ 뭘써야할까요..>?
한정이
2023-05-03T08:23:40.313Z
댓글 1
좋아요 0
조회수 1190
해결됨
실전 금융 머신러닝: 파이썬으로 구축하는 중급 투자 전략
안녕하세요 예측에 관련되서 여쭤볼게 있어서 질문 드립니다. LSTM훈련 후 Original Price와 Predicted Price의 그래프를 그리실 때 자세히 보시면 Predict price가 Original price의 데이터를 1스탭 뒤로 그려지는 것을 볼 수 있습니다. 그렇다면 이건 예측이 아니라 전 스탭에 있는 데이터를 어느정도 이동평균 또는 지수 이동평균과 같이 보정해서 쓴다고 보는게 맞지 않을까요? 이렇게 나오는 것보다 완전히 맞지 않더라도 1스탭 뒤로 예측되는 예측되는 것보다 어느정도 맞게 따라가는 방법은 없을까요?
methodfunc
2023-04-28T01:59:10.248Z
댓글 1
좋아요 0
조회수 475
미해결
예제로 살펴보는 PyQt Tutorial
안녕하세요. 어떤 정보를 주기적으로 업데이트 하는 쓰레드를 만든다고 하였을때 qthread가 아니라 qtimer로도 가능한데요. 혹시 qtimer를 사용할때 단점이 있을까요?
J군
2023-04-23T11:39:36.398Z
댓글 1
좋아요 0
조회수 1211
미해결
작정하고 장고! Django로 Pinterest 따라만들기 : 바닥부터 배포까지
updateform에서 disabled = True로 변경하여 url로 접속해보면 제대로 적용이 되는 것을 확인할 수 있습니다. 하지만 비밀번호를 입력하고 제출을 누르면 계속해서 A user with that username already exists. 메시지만 뜨고 있는 상황입니다. ㅠㅠㅠ
kookb2000
2023-04-21T16:16:00.317Z
댓글 3
좋아요 3
조회수 1590
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ
react redux node.js express next.js
장산
2023-04-20T11:20:23.134Z
댓글 3
좋아요 0
조회수 565
미해결
[입문] Qt 6 프로그래밍 1편
60번째 라인 subWindow1이 아니라 subWindow2인 것 같습니다
sglee
2023-04-20T07:58:03.440Z
댓글 1
좋아요 1
조회수 401
미해결
[입문] Qt 6 프로그래밍 1편
구문에 마우스 커서를 대고 F1을 누르면 도움말이 뜨지 않고 다음과 같은 화면이 나옵니다. 조치 방법을 알 수 있을까요?
sglee
2023-04-20T07:43:13.488Z
댓글 1
좋아요 1
조회수 350
미해결
[입문] Qt 6 프로그래밍 1편
안녕하세요, 제가 다운로드 후 실행한 온라인 인스톨러는 qt-unified-linux-x64-4.5.2-online.run 인데 다음과 같은 문의사항이 있습니다. 우분투에서 qt-unified-linux-x64-4.5.2-online.run을 실행했을 때 Latest supported releases로 필터링한 Qt 버전 목록 중 강의 슬라이드에 나온 6.0.1이 없습니다. 6.5.0, 6.4.3, 6.3.2, 6.2.4, 5.15.2가 있는데 어떤 버전을 선택하면 될까요? 카테고리에서 Additional libraries가 Qt 버전별로 하위항목으로 들어가있고 Qt 3D, Qt Image Formats, Qt Network Authorization뿐만 아니라 다른 여러 항목들도 있는데 모두 체크하면 되나요? Developer and Designer Tools 카테고리도 있는데 여기선 어떤 걸 선택하면 되나요?
sglee
2023-04-17T00:32:33.764Z
댓글 2
좋아요 1
조회수 752
미해결
안녕하세요 현재 파이썬을 공부중인 학생입니다. 이전까지는 태그의 값을 텍스트로 출력하고 있었는데 태그안에 속성값을 텍스트로 출력할일이 생겨서 여러 방면으로 검색 및 시도를 해보고 있는데 잘 안되네요 여기서 data-taitle="BLACK(99)" 의 BLACK(99) 를 텍스트로 출력하고 싶습니다. 어떻게 하면 될까요? #python
kshssi
2023-04-16T08:21:35.588Z
댓글 1
좋아요 0
조회수 613
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다. https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04
react node.js postgresql docker typescript 클론코딩 next.js
rhkdtjd_12
2023-04-07T07:36:17.230Z
댓글 2
좋아요 2
조회수 1162
해결됨
[개념반] 배워서 바로 쓰는 Pandas
section1. where 강의자료 문제 16번 풀이에서 첫번째 파라미터에 ':'을 입력해주셨는데 어떤 의미인가요?
까망
2023-04-06T03:06:54.246Z
댓글 1
좋아요 0
조회수 457
미해결
[개정판] 파이썬 머신러닝 완벽 가이드
안녕하세요, 강의 내용을 Colab를 통해서 실습을 하고 있습니다. 다른 코드를 실행 할때는 별 문제가 없었지만, 산탄데르 은행 데이터셋과 사기검출 데이터셋을 실행할때 read_csv를 통해 csv파일을 읽어오면 실행 할때마다(런타임이 바뀔때 마다) read된 결과가 다른데 왜 그런지 알 수 있을까요? 사기검출 데이터의 경우 25838 rows × 31 columns 로 읽히는 경우도 있고, 39702 rows × 31 columns로 읽어지는 경우도 있습니다. 두 데이터셋다 공통적으로 Nan 값도 생기기도 하네요. 런타임을 몇번 초기화 하다보면 운좋게(?) 정상적으로 읽어지는 경우도 있습니다. 왜 실행할때마다 결과가 다르게 나오는지 궁금합니다!
2023-04-05T11:41:01.814Z
댓글 1
좋아요 0
조회수 413
해결됨
[개념반] 배워서 바로 쓰는 Pandas
조건을 주고 그에 맞는 데이터를 필터링하여 보여준다는 점에서 .loc[] 메서드와 .query() 메서드의 기능이 동일한 건가요? 다른 점이 있다면 어떤 부분에서 다른가요?
까망
2023-04-05T00:13:24.232Z
댓글 1
좋아요 0
조회수 390
미해결
안녕하세요 채팅을 구현하기위해 socket.io를 썼는데 통신이 안되는 것같습니다 io에 주소를 제대로 넣었고 서버 on 마다 클라이언트에서 emit으로 작성했는데 작동하지 않습니다 이유가 무엇일까요? // server 파일의 코드입니다 require('dotenv').config(); const { createApp } = require('./app'); const { appDataSource } = require('./models/index'); const startServer = async () => { const app = createApp(); const PORT = process.env.PORT; await appDataSource .initialize() .then(() => { const server = app.listen(PORT, () => { console.log(`🟢server is listening on ${PORT}🟢`); }); const io = require('socket.io')(server, { cors: { origin: true, credentials: true, }, }); const { socketMessage } = require('./middlewares/socket.io'); socketMessage(io); }) .catch((err) => { console.log(`❌Failed server connect❌`); appDataSource.destroy(); }); }; startServer(); // server의 socket 파일의 코드입니다 const jwt = require('jsonwebtoken'); const chatDao = require('../models/chatDao'); const { catchAsync } = require('../utils/error'); const socketMessage = (io) => { io.use((socket, next) => { const token = socket.handshake.headers.authorization; if (!token) { return next(new Error('Authentication error')); } jwt.verify(token, process.env.SECRET_KEY, async (err, decoded) => { if (err) { return next(new Error('Authentication error')); } userId = decoded.userId; next(); }); }); io.on('connection', (socket) => { console.log('A User Connected.'); socket.on( 'create_room', catchAsync(async (postId, callback) => { const room = await chatDao.createRoom(userId, postId); socket.join(room.raw.insertId); callback(room.raw.insertId); }) ); socket.on( 'enter_room', catchAsync(async (roomId, callback) => { socket.join(roomId); callback(roomId); }) ); socket.on('new_text', async (content, roomId, callback) => { await chatDao.createChat(userId, content, roomId); socket.to(roomId).emit('new_text', content); callback(content); }); socket.on('disconnect', () => { console.log('접속이 해제되었습니다', socket.id); clearInterval(socket.interval); }); socket.on('error', (error) => { console.error(error); }); socket.on('send', (data) => { console.log(data); socket.emit('reply', { data, }); }); socket.interval = setInterval(() => { socket.emit('news', 'Hello Socket.IO'); }, process.env.SOCKET_INTERVAL || 1000); }); }; module.exports = { socketMessage }; // client 코드입니다 import React, { useState, useContext } from 'react'; import io from 'socket.io-client'; import './chat.css'; import { MenuContext } from '../../components/Nav/MenuProvider'; const Token = localStorage.getItem('accessToken'); const socket = io.connect('http://192.168.0.194:4000', { withCredentials: true, extraHeaders: {Authorization: `Bearer ${Token}` } appDataSource.destroy(); }), }); socket.on('connection', () => { console.log('Connected to server'); }); const Chat = () => { const [roomId, setRoomId] = useState([]); const [searchData, setSearchData] = useContext(MenuContext); const handleCreateRoom = event => { event.preventDefault(); socket.emit('create_room', searchData, ({ searchData, roomId }) => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleJoinRoom = roomId => { socket.emit('enter_room', roomId, roomId => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const onCheckEnter = e => {if (e.key === 'Enter') { handleNewText(); } }; return ( <div className="h-screen pt-36"> <button onClick={handleCreateRoom}>테스트</button> <button onClick={() => handleJoinRoom(roomId)}>테스트2</button> <input id="input-text" type="text" onKeyDown={onCheckEnter} /> <button onClick={handleCreateRoom}>제출</button> </div> ); }; export default Chat;
react javascript socket socket.io node.js
bin
2023-03-28T19:56:06.242Z
댓글 1
좋아요 0
조회수 745
미해결
[리뉴얼] React로 NodeBird SNS 만들기
... Failed! Error: SET PASSWORD has no significance for user 'root'@' localhost ' as the authentication method used doesn't store authentication data in the MySQL server. Please consider using ALTER USER instead if you want to change authentication parameters. 구글링도하고 mysql다시깔아서 local password도 다시 설정했는데 자꾸 이 오류가 나오네요.. 혹시 해결 방법이 있을까요?
react redux node.js express next.js
dsfsdf
2023-03-26T08:20:40.693Z
댓글 2
좋아요 0
조회수 661
미해결
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
강사님 안녕하세요 :) 유익한 강의 잘 듣고 있습니다! 학습 중 궁금한 점이 있어서 질문드립니다. 강사님께서 DFS문제 외에도 코드 시작 부분에 이 코드를 작성하실 때가 종종 있는데 혹시 강사님의 사용 기준이 있는지 궁금합니다. ex) [섹션 8] 회장뽑기(플로이드-와샬) 사용 O vs 위상정렬(그래프 정렬) 사용 X
2023-03-25T09:35:08.578Z
댓글 1
좋아요 0
조회수 386
미해결
[입문] Qt 6 프로그래밍 1편
갑자기 Qt Creator 메뉴에 중국어가 뜨네요. 한국어로 수정하는 절차에 대하여 사르쳐 주세요?
우먹
2023-03-21T13:36:50.638Z
댓글 1
좋아요 1
조회수 1067
해결됨
직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피
GetText 사용법이 감이 잘 안오네요 while과 state없이 GetText()를 실행하면 텍스트 출력이 안되네요.. 파이썬에서 정확한 문법 정의가 어떻게 되는지요?
schnabel
2023-03-20T09:16:31.607Z
댓글 2
좋아요 1
조회수 2028