본문 바로가기
반응형

개발739

리액트, 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.
깃허브 액션 - 리포지토리의 폴더 정보 저장하기 (Chonky File Map) 깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기) Git / GitHub 전체 링크 리액트 전체 링크 Node JS 전체 링크 참고- RESTful API로 파일 읽기- RESTful API로 파일 쓰기- 로또 번호 수집해서 json으로 저장하기 - 파일 브라우저 만들기- chonky 기본 설정 확인하기- 액션 추가하고 다크 모드 구현하기- 커스텀 액션 추가하기 - Chonky 파일 맵 만들기- 리포지토리의 폴더 정보 저장하기- 깃허브 리포지토리를 파일 브라우저로 불러오기- useNavigate로 Toast UI Editor 이동하기 이전 글에서 구현한 Chonky File Map을 깃허브 액션을 이용해서 리포지토리에 저장해 보자. Chonky 브라우저가 깃허브의 리포지토리에 대한.. 2024. 3. 16.
Node JS - Chonky 파일 맵 만들기 (Make Chonky File Map) 리액트 전체 링크 Node JS 전체 링크 참고 - 파일 브라우저 만들기 - chonky 기본 설정 확인하기 - 액션 추가하고 다크 모드 구현하기 - 커스텀 액션 추가하기 - Chonky 파일 맵 만들기 - 리포지토리의 폴더 정보 저장하기 - 깃허브 리포지토리를 파일 브라우저로 불러오기 - useNavigate로 Toast UI Editor 이동하기 Chonky 브라우저에서 사용하는 예시 demo.json은 다음과 같다. 1) 최상위 폴더의 ID인 rootFolderId가 필요하다. 2) fileMap에서 전체 폴더/파일에 대한 정보가 있다. 3) 폴더의 경우, isDir과 childrenIds, childrenCount 정보가 있다. 4) 파일의 경우, size와 isHidden 정보가 있다. 5) 폴.. 2024. 3. 16.
반응형

티스토리툴바