172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. import React from 'react'; import { Container, Header } from './styles'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import gravatar from 'gravatar'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`api/workspaces/${workspace}/members/${id}`, fetcher); const { data: myData } = useSWR('api/users', fetcher); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retor' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> {/* <ChatList /> <ChatBox /> */} </Container> ); }; export default DirectMessage; 이건 DirectMessage입니다. // import EachDM from '@components/EachDM'; // import useSocket from '@hooks/useSocket'; import { CollapseButton } from '@components/DMList/styles'; import { IDM, IUser, IUserWithOnline } from '@typings/db'; import fetcher from '@utils/fetcher'; import React, { FC, useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router'; import { NavLink } from 'react-router-dom'; import useSWR from 'swr'; const DMList: FC = () => { const { workspace } = useParams<{ workspace?: string }>(); const { data: userData } = useSWR<IUser>('/api/users', fetcher, { dedupingInterval: 2000, // 2초 }); const { data: memberData } = useSWR<IUserWithOnline[]>( userData ? `/api/workspaces/${workspace}/members` : null, fetcher, ); // const [socket] = useSocket(workspace); const [channelCollapse, setChannelCollapse] = useState(false); const [countList, setCountList] = useState<{ [key: string]: number }>({}); const [onlineList, setOnlineList] = useState<number[]>([]); const toggleChannelCollapse = useCallback(() => { setChannelCollapse((prev) => !prev); }, []); const resetCount = useCallback( (id) => () => { setCountList((list) => { return { ...list, [id]: 0, }; }); }, [], ); const onMessage = (data: IDM) => { console.log('dm왔다', data); setCountList((list) => { return { ...list, [data.SenderId]: list[data.SenderId] ? list[data.SenderId] + 1 : 1, }; }); }; useEffect(() => { console.log('DMList: workspace 바꼈다', workspace); setOnlineList([]); setCountList({}); }, [workspace]); // useEffect(() => { // socket?.on('onlineList', (data: number[]) => { // setOnlineList(data); // }); // console.log('socket on dm', socket?.hasListeners('dm'), socket); // return () => { // console.log('socket off dm', socket?.hasListeners('dm')); // socket?.off('onlineList'); // }; // }, [socket]); return ( <> <h2> <CollapseButton collapse={channelCollapse} onClick={toggleChannelCollapse}> <i className="c-icon p-channel_sidebar__section_heading_expand p-channel_sidebar__section_heading_expand--show_more_feature c-icon--caret-right c-icon--inherit c-icon--inline" data-qa="channel-section-collapse" aria-hidden="true" /> </CollapseButton> <span>Direct Messages</span> </h2> <div> {!channelCollapse && memberData?.map((member) => { const isOnline = onlineList.includes(member.id); const count = countList[member.id] || 0; <NavLink key={member.id} activeClassName="selected" to={`/workapce/${workspace}/dm/${member.id}`} onClick={resetCount(member.id)} > ; <i className={`c-icon p-channel_sidebar__presence_icon p-channel_sidebar__presence_icon--dim_enabled c-presence ${ isOnline ? 'c-presence--active c-icon--presence-online' : 'c-icon--presence-offline' }`} aria-hidden="true" data-qa="presence_indicator" data-qa-presence-self="false" data-qa-presence-active="false" data-qa-presence-dnd="false" /> ;<span className={count > 0 ? 'bold' : undefined}>{member.nickname}</span> {member.id === userData?.id && <span> (나)</span>} {count > 0 && <span className="count">{count}</span>} </NavLink>; // return <EachDM key={member.id} member={member} isOnline={isOnline} />; })} </div> </> ); }; export default DMList; 이건 DMList입니다. 현재 DM페이지 만들기 강의를 듣고 있는데, DM리스트에 사용자가 하나도 표시가 되지 않는데 원래 지금 강의까지는 표시가 되지 않는게 맞나요? 워크스페이스 초대, 채널 멤버 초대해도 에러는 발생하지 않는데 DM리스트에 추가는 다음 강의에서 진행하나요? 아니면 지금도 되야하는게 정상인가요..?
react 웹팩 typescript socket.io babel 클론코딩
jjh099
2023-06-26T03:11:44.545Z
댓글 1
좋아요 0
조회수 382
미해결
Slack 클론 코딩[실시간 채팅 with React]
import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { VFC, useCallback, useState } from 'react'; import { Redirect, Route, Switch, useParams } from 'react-router'; import useSWR from 'swr'; import { Header, ProfileImg, RightMenu, WorkspaceWrapper, WorkspaceName, Workspaces, Channels, Chats, MenuScroll, ProfileModal, LogOutButton, WorkspaceButton, AddButton, WorkspaceModal, } from './styles'; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from '@components/Menu'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); import { Link } from 'react-router-dom'; import { IChannel, IUser } from '@typings/db'; import Modal from '@components/Modal'; import { Button, Input, Label } from '@pages/SignUp/styles'; import useInput from '@hooks/useInput'; import { toast } from 'react-toastify'; import CreateChannelModal from '@components/CreateChannelModal'; import InviteWorkspaceModal from '@components/InviteWorkspaceModal'; import InviteChannelModal from '@components/InviteChannelModal'; // import ChannelList from '@components/ChannelList'; import DMList from '@components/DMList'; import ChannelList from '@components/ChannelList'; // FC타입안에 children이 알아서 들어있음 // children 안쓸거면 VFC const Workspace: VFC = () => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [showInviteWorkspaceModal, setShowInviteWorkspaceModal] = useState(false); const [showInviteChannelModal, setShowInviteChannelModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const [showWorkspaceModal, setShowWorkspaceModal] = useState(false); const [ShowCreateChannelModal, setShowCreateChannelModal] = useState(false); const { workspace } = useParams<{ workspace: string }>(); // 사용자 데이터 가져오기 const { data: userData, error, revalidate, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); // channel 데이터 가져오기 const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher); // 워크스페이스에 있는 멤버 데이터 const { mutate: revalidateMembers } = useSWR<IUser[]>( userData ? `/api/workspaces/${workspace}/members` : null, fetcher, ); // 로그아웃 const onLogout = useCallback(() => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then((response) => { mutate(response.data); // 기존에 받은 데이터를 mutate의 data에 담음 }) .catch((error) => { console.log(error); }); }, []); // 프로필 누르면 메뉴 보이기 const onClickUserProfile = useCallback(() => { setShowUserMenu((prev) => !prev); }, []); // 프로필 닫기 const onCloseUserProfile = useCallback((e) => { e.stopPropagation(); setShowUserMenu(false); }, []); // 워크스페이스 모달 열기 const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []); // 워크스페이스 모달 닫기 const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); setShowCreateChannelModal(false); setShowInviteChannelModal(false); setShowInviteWorkspaceModal(false); }, []); // 워크스페이스 생성 const onCreateWorkspace = useCallback( (e) => { e.preventDefault(); // trim() 안넣으면 띄어쓰기 넣으면 걍 통과됨 if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; axios .post( '/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ) .then(() => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.log(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); // 워크스페이스 사용자 초대 const onClickInviteWorkspace = useCallback(() => { setShowInviteWorkspaceModal(true); }, []); // Channel // 토글 const toggleWorkspaceModal = useCallback(() => { setShowWorkspaceModal((prev) => !prev); }, []); // 채널 만들기 const onClickAddChannel = useCallback(() => { setShowCreateChannelModal(true); }, []); if (!userData) { return <Redirect to="/login" />; } return ( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.nickname, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && ( <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onCloseUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { 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> <WorkspaceWrapper> <Workspaces> {userData?.Workspaces.map((ws) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName onClick={toggleWorkspaceModal}>Sleact</WorkspaceName> <MenuScroll> <Menu show={showWorkspaceModal} onCloseModal={toggleWorkspaceModal} style={{ top: 95, left: 80 }}> <WorkspaceModal> <h2>Sleact</h2> <button onClick={onClickInviteWorkspace}>워크스페이스에 사용자 초대</button> <button onClick={onClickAddChannel}>채널 만들기</button> <button onClick={onLogout}>로그아웃</button> </WorkspaceModal> </Menu> <ChannelList /> <DMList /> {/* {channelData?.map((v) => ( <div>{v.name}</div> ))} */} </MenuScroll> </Channels> <Chats> <Switch> <Route path="/workspace/:workspace/channel/:channel" component={Channel} /> <Route path="/workspace/:workspace/dm/:id" 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>워크스페이스 url</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> <CreateChannelModal show={ShowCreateChannelModal} onCloseModal={onCloseModal} setShowCreateChannelModal={setShowCreateChannelModal} /> <InviteWorkspaceModal show={showInviteWorkspaceModal} onCloseModal={onCloseModal} setShowInviteWorkspaceModal={setShowInviteWorkspaceModal} /> <InviteChannelModal show={showInviteChannelModal} onCloseModal={onCloseModal} setShowInviteChannelModal={setShowInviteChannelModal} /> </div> ); }; export default Workspace; 이건 제가 작성한 WorkSpace 입니다. import Modal from '@components/Modal'; import useInput from '@hooks/useInput'; import { Button, Input, Label } from '@pages/SignUp/styles'; import { IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { FC, useCallback } from 'react'; import { useParams } from 'react-router'; import { toast } from 'react-toastify'; import useSWR from 'swr'; interface Props { show: boolean; onCloseModal: () => void; setShowInviteChannelModal: (flag: boolean) => void; } const InviteChannelModal: FC<Props> = ({ show, onCloseModal, setShowInviteChannelModal }) => { const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const [newMember, onChangeNewMember, setNewMember] = useInput(''); const { data: userData } = useSWR<IUser>('/api/users', fetcher); const { revalidate: revalidateMembers } = useSWR<IUser[]>( userData ? `/api/workspaces/${workspace}/channels/${channel}/members` : null, fetcher, ); console.dir(channel); const onInviteMember = useCallback( (e) => { e.preventDefault(); if (!newMember || !newMember.trim()) { return; } axios .post(`/api/workspaces/${workspace}/channels/${channel}/members`, { email: newMember, }) .then(() => { revalidateMembers(); setShowInviteChannelModal(false); setNewMember(''); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [channel, newMember, revalidateMembers, setNewMember, setShowInviteChannelModal, workspace], ); return ( <Modal show={show} onCloseModal={onCloseModal}> <form onSubmit={onInviteMember}> <Label id="member-label"> <span>채널 멤버 초대</span> <Input id="member" value={newMember} onChange={onChangeNewMember} /> </Label> <Button type="submit">초대하기</Button> </form> </Modal> ); }; export default InviteChannelModal; 이건 제가 작성한 InviteChannelModal입니다. xhr.js:210 GET http://localhost:3090/api/workspaces/sleact/channels/undefined/members 404 (Not Found) dispatchXhrRequest @ xhr.js:210 xhrAdapter @ xhr.js:15 dispatchRequest @ dispatchRequest.js:58 request @ Axios.js:108 Axios.<computed> @ Axios.js:129 wrap @ bind.js:9 fetcher @ fetcher.ts:18 eval @ use-swr.js:392 step @ use-swr.js:43 eval @ use-swr.js:24 eval @ use-swr.js:18 __awaiter @ use-swr.js:14 eval @ use-swr.js:344 softRevalidate @ use-swr.js:532 onFocus @ use-swr.js:550 revalidate_1 @ use-swr.js:73 eval @ use-swr.js:77 eval @ web-preset.js:29 그런데 위와 같은 에러가 발생합니다. 콘솔에 channel을 출력해도 undefined가 뜹니다.. 그런데 url을 보면 http://localhost:3090/workspace/sleact/channel/테스트채널 이렇게 채널 명이 표시가 되는데 도대체 뭐 때문에 undefined라고 뜨는지 모르겠습니다... 아무리 찾아봐도 알 수가 없어서 글 남깁니다... 분명 WorkSpace의 route에도 오타가 없고 url도 표시가 잘되는데 왜 undefined일까요...
react 웹팩 typescript socket.io babel 클론코딩
jjh099
2023-06-25T15:36:04.840Z
댓글 1
좋아요 0
조회수 340
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요 선생님 강의를 보다보니 그림판에서 텍스트로 코딩을 하시는데 화살표함수 작성시 뒤에 구문이 자동으로 입력이 되던데 그림판에 어떤 플러그인을 설치하셨길래 이런 기능이 되는건지 궁금합니다.
node.js mysql mongodb express typescript socket.io jwt
카이
2023-06-25T04:33:35.830Z
댓글 1
좋아요 0
조회수 433
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 먼저 제로초님 강의 보면서 공부 열심히 하고 있습니다. 감사합니다!. 현재 DMList 만드는 중인데 깃허브에 올려주신 front의 DMList와 제로초님이 강의하면서 작성하시는 DMList의 코드가 서로 다른 부분이 꽤 있던데 원래 그런가요...? 영상을 정지해가면서 수정하고 있지만 안보이는 코드가 있어서 많이 헷갈리네요 ㅠㅠ
react 웹팩 typescript socket.io babel 클론코딩
jjh099
2023-06-24T14:40:04.188Z
댓글 1
좋아요 0
조회수 400
해결됨
Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
5/31 이벤트 유튜브 영상 ( https://youtu.be/3rpEsV0vnB8 ) 보고서 선생님께 메일 보냈었는데 메일이 안 간건지 보낸 메일 주소가 잘못된건지 보낸 방식이 잘못된건지 답변을 못 받았습니다. 어떤 메일 주소로 어떻게 캡쳐해서 보내드리면 될까요?
선종원
2023-06-23T04:58:07.727Z
댓글 1
좋아요 0
조회수 286
해결됨
Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
안녕하세요 수업 잘 듣고 있습니다 감사합니다. Callback 기반 비동기 파일 입/출력 부분에 질문이 있습니다. 만약 IoThreadFunction 함수에서 다수의 WriteFileEx 를 호출하고 콜백을 모두 같은 FileIoComplete 함수로 받는상황이 있을경우 테스트 해보니 하나의 파일 IO만 완료되도 SleepEx 가 통과되는 상황이 발생하는데요 이경우 만약 모든 콜백을 받길 원하면 구조적으로 스래드 하나당 하나의 WriteFileEx를 호출하도록 하거나 별도로 이벤트를 이용해서 처리하거나 하는 방법이 떠오르긴 한데 이방법이외에 다른 방법도 있을까요??
고대괴물
2023-06-22T04:54:52.851Z
댓글 2
좋아요 0
조회수 482
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요 11강에서 강의자료 ppt 파일을 올려주신다고 했는데 어디서 다운로드 받을수 있나요?
node.js mysql mongodb express typescript socket.io jwt
정상원
2023-06-20T18:01:47.638Z
댓글 1
좋아요 1
조회수 962
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요. 9장강의를 듣고 추가 과제를 시도해보던 중 궁금증이 생겨 질문드립니다. 스스로 해보기 -> 팔로잉 끊기 에서 destory와 라우터를 사용하라고 안내해주셨는데 user자체를 삭제하는 것이 아닌 중간테이블(follow)에서 해당 로우만 삭제하는 방법이 따로 있나요? if (user) { const a = await user.destroy({ where: { Followings: { followerId: req.params.id } }, }); 위와 같이 방법을 여러가지로 시도해보았지만 계속해서 유저 삭제(탈퇴)가 되는 상황이라 도움주시면 감사하겠습니다..!
node.js mysql mongodb express typescript socket.io jwt
최지인
2023-06-20T06:51:00.651Z
댓글 1
좋아요 0
조회수 311
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 선생님 늦은 시간인데도 답변해주셔서 감사합니다(꾸벅) 선생님께서 말씀해주신대로 useSelector를 써봤는데요. useSelector가 초기값만 읽고, updateReducer에 의해 상태가 업데이트되면, 업데이트 된 값을 읽지 못합니다.... 1. console.log(title)이라고 썼는데, 아무것도 뜨지 않습니다 2. Modal 컴포넌트에 제목을 입력을 해도 상태 변화를 읽지를 못합니다. 어디서 잘못 된걸까요?? const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const id = useSelector((state)=> state.update.id); const title = useSelector((state)=> state.update.title) const content = useSelector((state)=> state.update.content); const isDone = useSelector((state)=> state.update.isDone) const handleCheck = (id) =>{ dispatch(checkBox(id)); }; console.log(title) return( <SeveralItemContainer> <TodoItemContainer key={id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{title}</div> <img onClick={ () => {handleCheck(id)}} className="noncheck" src = {isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{content}</div> </div> </TodoItemContainer> </SeveralItemContainer> ) }; export default TodoItem; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const rootReducer = combineReducers({ update: updateReducer, check: checkReducer, }); export default rootReducer; const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal;
react 웹팩 typescript socket.io babel 클론코딩
정지은
2023-06-07T14:43:39.100Z
댓글 1
좋아요 0
조회수 487
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 선생님 선생님 말씀대로 useSelector를 사용해 보려고, 로컬스토리지 관련 코드들은 삭제했습니다. 원하는 구현기능) 질문은 Modal 컴포넌트에서 리듀서에 의해 업데이트된 상태를, todoItem 컴포넌트로 가져와서 사용이 가능한가요? todoItem 컴포넌트로 가져와서 todoData에 집어넣고 싶습니다... 그래서 updateReducer에서 ADD_ITEM case를 읽을때 그때 그 상태를 todoItem 컴포넌트로 가져와서 사용이 하고 싶습니다. 질문) 1. 위에 기능을 useSelector만 알면 가능할까요? 2. 리덕스에 4단계 액션, 디스패치, 리듀서, 스토어 중 스토어 부분, 저장했다가 필요할때 꺼내쓰는 부분을 잘 모르겠어요. 어떤 추가적인 개념 공부가 필요할 까요? const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const [todoData, setTodoData] = useState(todoItem); const handleCheck = (id) =>{ dispatch(checkBox(id)); }; return( <SeveralItemContainer> { todoData.map((item)=>{ return ( <TodoItemContainer key={item.id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{item.title}</div> <img onClick={ () => {handleCheck(item.id)}} className="noncheck" src = {item.isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{item.content}</div> </div> </TodoItemContainer> ) }) } </SeveralItemContainer> ) }; export default TodoItem;
react 웹팩 typescript socket.io babel 클론코딩
정지은
2023-06-07T14:07:13.132Z
댓글 1
좋아요 0
조회수 394
해결됨
Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
이벤트 기반 파일 입/출력 강의에서 예제를 통해 프로세스가 요청한 작업의 순서와 운영체제가 실제로 해당 작업들을 처리하는 순서가 달라질 수 있다는 것을 보여주셨습니다. 저는 이 예제의 결과를 보면서 프로세스에서 요청한 작업들이 커널 레벨의 큐에 순차적으로 삽입된다고 하더라도, 결국 운영체제도 큐에서 꺼낸 작업들을 비동기로 처리한다는 것으로 이해했는데요. 서로 다른 작업들을 비동기로 처리하기 위해서는, 결국 각 작업들이 서로의 완료 여부와는 관계 없이 독립적으로 수행되기 위해 멀티 Threading과 같은 방식을 처리될 것으로 예상됩니다. 궁금한 점은 여기서 생겨났는데요, 이렇게 최종 작업마저 비동기로 처리하게 되면 I/O 작업의 순서가 꼬여 프로세스 입장에서 기대하는 파일의 최종 상태와 실제로 모든 작업을 끝마친 파일의 상태가 달라지는 경우가 발생할 수 있지 않나요? 만약에 발생하지 않는다면, 왜 발생하지 않는지 궁금합니다.
didnlie
2023-06-07T00:39:11.065Z
댓글 2
좋아요 0
조회수 576
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
package.json 에서 "type": "module" 설정 유무에 따라 우선 순위가 다르게 나오는 이유가 궁금합니다. setImmediate(() => { console.log("immediate"); }); process.nextTick(() => { console.log("nextTick"); }); setTimeout(() => { console.log("timeout"); }, 0); Promise.resolve().then(() => console.log("promise")); 위의 코드로 설정없이 실행 시 강의 처럼 동일한 결과가 출력되는데 설정을 추가 하면 아래처럼 promise가 더 먼저 출력됩니다. 이러한 결과에 대한 원인이 궁금합니다!!
node.js mysql mongodb express typescript socket.io jwt
2023-06-05T12:26:41.222Z
댓글 1
좋아요 0
조회수 439
미해결
Slack 클론 코딩[실시간 채팅 with React]
Throttling navigation to prevent the browser from hanging. See <URL>. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223 . Command line switch --disable-ipc-flooding-protection can be used to bypass the protection 계속 강의 잘 듣고 있었는데 며칠 전부터 이런 에러 메시지가 뜨면서 로그인해서 넘어가면 아무 화면도 뜨지 않습니다. git reset --hard로 이전 코드로 돌려놔봐도 전에는 잘 되던 코드도 지금 안됩니다.구글링해봐도 무슨 말인지 잘 모르겠는데 뭐가 문제일까요....
react 웹팩 typescript socket.io babel 클론코딩
샤브샤브
2023-06-05T08:58:24.981Z
댓글 1
좋아요 0
조회수 1576
해결됨
[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
[섹션0_Node.js 기초 다지기] 파트에서 MySQL 연동하기 동영상 강좌에는 13_app_mysql.js 파일까지 강의가 진행되었는데 정적파일처리 영상을 보게 되면 16_static.js로 강의부터 강의가 진행되다보니 뭔가 좀 이상하다 싶어 우연히 발견하게 되었습니다. 14_route.js 파일 영상과 15_app_route_module에 관련된 동영상 강의가 없어서 문의 드립니다.
node.js mysql mongodb express 웹-크롤링 socket.io
김지환
2023-06-02T06:15:44.590Z
댓글 1
좋아요 0
조회수 433
해결됨
Slack 클론 코딩[실시간 채팅 with React]
알려주신대로 세팅을 해봤는데, 이게 맞는건가요? 강의에 보이는 선생님 세팅과 뭔가 다른것 같아서요 ㅜ 첫번째 사진은 폴더를 펼치지 않은것, 나머지 사진은 폴더를 모두 열어제낀것 입니다 이 상태로 다음 강의 진행해도 문제없을까요?
react 웹팩 typescript socket.io babel 클론코딩
정지은
2023-05-29T15:42:53.863Z
댓글 1
좋아요 0
조회수 642
미해결
[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
안녕하세요. 현재 mysql 연동하기 강의를 듣고 있는데, 개발자님이 예시로 해서 Mysql에 넣은 데이터들을 알수있을까요?
node.js mysql mongodb express 웹-크롤링 socket.io
단오
2023-05-28T08:49:41.295Z
댓글 1
좋아요 0
조회수 451
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요 선생님 npm start 실행하면 config파일이 잘 불러와지는데 npm run test를 실행하면 config 파일이 불러와지지 않는 것 같습니다. routes/auth.test.js ● Test suite failed to run TypeError: Cannot read properties of undefined (reading 'database') 10 | const db = {}; 11 | const sequelize = new Sequelize( > 12 | config.database, config.username, config.password, config, | ^ 13 | ); 14 | 15 | db.sequelize = sequelize; at Object.database (models/index.js:12:12) at Object.require (app.js:17:21) at Object.<anonymous> (routes/auth.test.js:1:30) npm run test를 했을 때 뜨는 오류입니다. { "development": { "username": "root", "password": "비밀번호", "database": "nodebird", "host": "127.0.0.1", "dialect": "mysql" }, config/config.json 파일에 developmont도 존재합니다. const Sequelize = require('sequelize'); const fs = require('fs'); const path = require('path'); const env = process.env.NODE_ENV || 'development'; console.log(env); const config = require('../config/config')[env]; console.log(config) const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config, ); models/index.js 파일입니다. npm start를 실행하면 에러없이 실행되고, console.log도 실행되어서 env, config 다 undefined가 아님을 확인했습니다. 어떤 부분이 문제인지 감을 잘 잡지 못하겠습니다. 힌트 좀 주실 수 있을까요?
node.js mysql mongodb express typescript socket.io jwt
정민교
2023-05-28T08:39:23.061Z
댓글 2
좋아요 0
조회수 536
미해결
Slack 클론 코딩[실시간 채팅 with React]
setSignUpError(error.response.data); 이 부분의 data에 typeerror가 뜹니다. 왜 뜨는지 검색을 해봐도 모르겠어서 질문 남깁니다.
react 웹팩 typescript socket.io babel 클론코딩
marlee128
2023-05-26T12:04:01.023Z
댓글 1
좋아요 0
조회수 433
해결됨
Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
안녕하세요 선생님~ tcp 관련해서 질문을 드리고 싶습니다. ^^ tcp 버퍼라는게 따로 존재하나요? 아니면 소켓 버퍼가 곧 tcp 버퍼인가요? segmentation된 데이터는 어디서 조립되나요? 만약 소켓 버퍼에서 조립된다면 recv했을 때 덜 조립된 데이터를 받거나 하진 않는지 궁금합니다. 관련 책에서 본 내용인데요, 송신 버퍼에 1바이트의 여유만 있어도 tcp는 send가 가능하다는데 이러면 데이터가 다른 관련없는 데이터와 섞여서 송신되거나 하지는 않나요? 다른건 안그러는데 이상하게 네트워크 쪽만 공부하면 자꾸 깊게 파고들려고 하네요. ;; 호기심을 적당히 가져야 진도를 빠르게 뺄텐데... 그래도 좋게 생각해야겠죠? ㅎㅎ 항상 좋은 강의 감사드립니다~^^
sete
2023-05-25T17:52:39.057Z
댓글 2
좋아요 0
조회수 624
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
로그인 후 포스팅 하나 작성하면 계속 에러가 발생합니다. exports.renderMain = async (req, res, next) => { try { const posts = await Post.findAll({ include: { model: User, attributes: ['id', 'nick'], }, order: [['createdAt', 'DESC']] // 최신순 정렬(작성일 기준 내림차순) }); res.render('main', { title: 'NodeBird', twits: posts }); } catch (error) { console.error(error); next(error); } }; renderMain 메서드에서 따로 follwerIdList를 보내지 않는 것 같은데 {% for twit in twits %} <div class="twit"> <input type="hidden" value="{{twit.User.id}}" class="twit-user-id"> <input type="hidden" value="{{twit.id}}" class="twit-id"> <div class="twit-author">{{twit.User.nick}}</div> {% if not followerIdList.includes(twit.User.id) and twit.User.id !== user.id %} <button class="twit-follow">팔로우하기</button> {% endif %} <div class="twit-content">{{twit.content}}</div> {% if twit.img %} <div class="twit-img"><img src="{{twit.img}}" alt="섬네일"></div> {% endif %} </div> {% endfor %} followerIdList는 어디서 나온 어디서 나온건지 찾을 수가 없습니다..
node.js mysql mongodb express typescript socket.io jwt
정민교
2023-05-24T11:58:43.342Z
댓글 1
좋아요 1
조회수 603
