본문 바로가기
반응형

개발/React173

리액트, 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.
리액트 - useNavigate로 Toast UI Editor 이동하기 (Toast UI Editor with Chonky Browser) 리액트 전체 링크 참고 - Toast UI로 에디터 만들기 - RESTful API로 파일 읽기 - URL query string 받아오기 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 아래 결과는 링크에서 확인할 수 있다 이제 마크다운(.md) 파일을 더블 클릭하면 선택된 파일을 Toast UI Editor에서 열어보자. 이미 파일을 여는 액션이 정의되어 있으므로 targetFile.name의 확장자가 .md인 경우에 대해 코드를 추가한다. cons.. 2024. 3. 16.
리액트 - 깃허브 리포지토리를 파일 브라우저로 불러오기 (Chonky Browser with GitHub Repository) 리액트 전체 링크 참고 - RESTful API로 파일 읽기 - RESTful API로 파일 이름 변경하기 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 이전 글에서 만든 chonky_map.json을 이용해서 리포지토리의 정보를 파일 브라우저로 불러오자. chonky_map.json을 얻기 위해 ChonkyLoader 컴포넌트를 만들고, map file을 props로 넘긴다. chonkyMap이 없는 경우(= undefined)는 렌더링 하지 않는다.. 2024. 3. 16.
리액트 - 커스텀 액션 추가하기 (Add Custom Actions) 리액트 전체 링크 참고 - https://chonky.io/docs/2.x/file-actions/custom-actions - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 다음과 같이 커스텀 액션을 추가해 보자. 액션 정의하기 myCustomAction.js를 만들고 defineFileAction과 ChonkyIconName을 import 하자. import { defineFileAction, ChonkyIconName } from "chonky"; .. 2024. 3. 16.
반응형

티스토리툴바