React

[프로젝트] REACT 채팅서버 만들기 [3]

- REACT를 사용한 채팅 어플리케이션 구현 1. 환경 REACT node.js socket.io 2. 프로젝트 구성 node.js 환경의 server 구성 socket.io 라이브러리로 웹소켓 통신 및 실시간 채팅기능 구현 client front 환경 분리 및 서버간의 실시간 통신 구현 3. 흐름도 먼저 server(node)를 start 명령어로 실행합니다(서버가 동작하고 있다는 전제하에 진행합니다) client(react) 환경에서 접속하여 채팅방 가입을 위한 정보를 입력하여 "가입" 버튼을 클릭합니다. 가입 버튼을 클릭하면 이벤트가 호출되어 아래의 url의 컴포넌트에 이름과 방 이름을 전달합니다. chat 컴포넌트는 서버의 sccket.io-client를 통한 sever간의 실시간 웹소켓 통신을..

[프로젝트] REACT 채팅서버 만들기 [2]

- REACT를 사용한 채팅 어플리케이션 구현 1. 환경 REACT node.js socket.io 2. 프로젝트 구성 node.js 환경의 server 구성 socket.io 라이브러리로 웹소켓 통신 및 실시간 채팅기능 구현 client front 환경 분리 및 서버간의 실시간 통신 구현 3. 흐름도 먼저 server(node)를 start 명령어로 실행합니다(서버가 동작하고 있다는 전제하에 진행합니다) client(react) 환경에서 접속하여 채팅방 가입을 위한 정보를 입력하여 "가입" 버튼을 클릭합니다. 가입 버튼을 클릭하면 이벤트가 호출되어 아래의 url의 컴포넌트에 이름과 방 이름을 전달합니다. chat 컴포넌트는 서버의 sccket.io-client를 통한 sever간의 실시간 웹소켓 통신을..

[프로젝트] REACT 채팅서버 만들기 [1]

- REACT를 사용한 채팅 어플리케이션 구현 1. 환경 설정 REACT node.js socket.io 2. 개요 REACT, SOCKET-IO 기반의 채팅 어플리케이션 구축 및 이해하기 3. 프로젝트 소스 GitHub - S-YC/react-chatt: 리엑트 채팅 앱 제작 리엑트 채팅 앱 제작. Contribute to S-YC/react-chatt development by creating an account on GitHub. github.com

[프론트엔드] 서버 사이드 랜더링[5]

3. 서버 사이드 렌더링 구현하기 3.5 정적 파일 제공하기 이번에는 Express에 내장ㅇ되어 있는 static 미들웨어를 사용하여 서버를 통해서 build에 있는 JS, CSS 정적 파일들에 접근할 수 있도록 처리해 하겠습니다. - index.server.js import React from "react"; import ReactDOMServer from "react-dom/server"; import express from "express"; import { StaticRouter } from "react-router-dom"; import App from "./App"; import path from "path"; // express 선언 const app = express(); // 서버 사이드..