반응형 개발/React176 리액트, Node JS - Socket.IO로 채팅하기 (Chatting with Socket.IO) 리액트 전체 링크 Node JS 전체 링크 참고 - Socket.IO로 로그인 유저 관리하기 - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 Socket.IO를 이용해서 실시간 채팅을 구현해 보자. 구현 이전 글에서 구현한 채팅방은 bloodstrawberry와 Patrik (id 0, 1)이 있다. 편의상 존재하는 방은 빈방이고, 로그인 한 사용자는 id 0인.. 2024. 3. 31. 리액트 - 채팅방 들어오고 나갈 때 표시하기 (Message Separator) 리액트 전체 링크 참고 - https://chatscope.io/storybook/react/?path=/docs/components-messageseparator--docs - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 채팅방을 들어오거나 나갈 때, separator를 이용해 표시해 보자. MessageSeparator 추가하기 먼저 MessageList에 .. 2024. 3. 31. 리액트 - 채팅방 변경하기 (Change Chat Room) 리액트 전체 링크 참고 - https://chatscope.io/storybook/react/?path=/docs/components-maincontainer--docs - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 채팅방 UI를 만들었으니, 채팅방을 변경하는 기능을 추가해 보자. 컴포넌트와 데이터 분리하기 메시지 컴포넌트에서 데이터를 분리한 것처럼, Conv.. 2024. 3. 29. 리액트, Node JS - Socket.IO로 로그인 유저 관리하기 (Managing Logged-in Users with Socket.IO) 리액트 전체 링크 Node JS 전체 링크 참고 - webSocket으로 로그인 유저 관리하기 - Socket.IO로 로그인 유저 관리하기 - Socket.IO로 채팅하기 - Socket.IO로 Toast UI Editor 동시 편집하기 이전 글에서 webSocket을 이용하여 로그인 유저를 처리하였다. 여기서는 socket.io를 사용해 보자. Socket.IO Server Node 서버에서 socket.io를 사용하기 위해 라이브러리를 설치한다. npm install socket.io 예시 코드는 다음과 같다. const { Server } = require("socket.io"); const io = new Server("3333", { cors: { origin: "http://localhost:.. 2024. 3. 27. 리액트, Node JS - webSocket으로 로그인 유저 관리하기 (Managing Logged-in Users with WebSocket) 리액트 전체 링크 Node JS 전체 링크 참고 - webSocket으로 로그인 유저 관리하기 - Socket.IO로 로그인 유저 관리하기 다음과 같이 각 페이지 별로 로그인 한 사용자가 누구인지 web socket을 이용해서 관리해 보자. Socket 라우터 페이지에서 ID를 입력하고 로그인 버튼을 누르면, 현재 페이지에 로그인 한 User ID를 모두 보여주고, 페이지를 나가거나, React App을 종료하면 로그아웃 한다. Simple Login 리액트에서 로그인 버튼을 누르면 input과 버튼이 비활성화 되도록 하자. import React, { useState } from "react"; const WebSocketClient = () => { const [user, setUser] = useS.. 2024. 3. 27. 리액트 - 로그인 + 채팅방 UI 만들기 (React Chat Room UI) 리액트 전체 링크 참고 - https://mui.com/material-ui/react-select/ - useNavigate로 Toast UI Editor 이동하기 - https://chatscope.io/storybook/react/?path=/docs/components-maincontainer--docs - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 로.. 2024. 3. 25. 리액트 - chat-ui-kit-react로 채팅창 UI 만들기 (React Chat UI) 리액트 전체 링크 참고 - https://www.npmjs.com/package/@chatscope/chat-ui-kit-react - chat-ui-kit-react로 채팅창 UI 만들기 - 로그인 + 채팅방 UI 만들기 - 채팅방 변경하기 - 채팅방 들어오고 나갈 때 표시하기 - Socket.IO로 채팅하기 - Socket.IO Room으로 채팅방 관리하기 - Socket.IO namespace로 채팅방 관리하기 - Socket.IO로 중복 로그인 제한하기 - Socket.IO Middleware로 중복 로그인 방지하기 chat-ui-kit-react를 이용해서 채팅 UI를 만들어보자. 먼저 라이브러리를 설치한다. npm install @chatscope/chat-ui-kit-react 예시 코드는 .. 2024. 3. 24. 리액트 - SWR로 상태 관리하기 (Managing State with SWR) 리액트 전체 링크 참고 - https://swr.vercel.app/ko - 리덕스로 상태 관리하기 - Context API로 상태 관리하기 - recoil로 상태 관리하기 - SWR로 상태 관리하기 props로 useState에 정의된 값을 넘겨주면, 하위 컴포넌트에서 상태를 관리할 수 있다. 예시 코드는 다음과 같다. // ParentComponent.js import React, { useState } from "react"; import ChildComponent from "./ChildComponent"; const ParentComponent = () => { const [value, setValue] = useState(0); return ( Parent Component setValue(v.. 2024. 3. 22. 리액트 - recoil로 상태 관리하기 (Managing State with recoil) 리액트 전체 링크 참고 - 리덕스로 상태 관리하기 - Context API로 상태 관리하기 - recoil로 상태 관리하기 - SWR로 상태 관리하기 리액트는 props를 넘겨서 하위 컴포넌트에서도 state를 관리할 수 있다. 예시 코드는 다음과 같다. // ParentComponent.js import React, { useState } from "react"; import ChildComponent from "./ChildComponent"; const ParentComponent = () => { const [value, setValue] = useState(0); return ( Parent Component setValue(value + 1)}>Parent + {`Parent value : $.. 2024. 3. 22. 이전 1 2 3 4 5 6 7 ··· 20 다음 반응형
