전체 글

[프로젝트] 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(); // 서버 사이드..

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

3. 서버 사이드 렌더링 구현하기 3.4 서버 코드 작성하기 이번에는 서버 사이드 렌더링을 처리할 서버를 구성 하겠습니다. Express -> Node.js 웹 프레임워크를 사용하여 웹 서버를 만들겠습니다. 웹 서버는 Koa, Hapi, connect 라이브러리를 사용하여 구현도 가능합니다. 다만 이 글에서는 가장 사용율이 높고 정적 파일 호스팅이 구현하기 쉬운 Express를 사용할 에정입니다. 먼저 다음 명령어로 Express를 설치해 주세요. yarn add express 다음으로 이전 글에 작성했던 index.server.js 파일 코드를 다음과 같이 수정합니다. - index.server.js import React from "react"; import ReactDOMServer from "re..

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

3. 서버 사이드 렌더링 구현하기 서바 시이드 렌더링을 구현하려면 웹팩 설정을 커스타마이징 해주어야 합니다. CRA(Create-React-App)로 만든 프로젝트에서는 웹팩 관련 설정을 숨겨 두여서 yarn eject 명령어를 실행하여 보이도록 해주어야 합니다. git add git commit -m 'Commit before eject' yarn eject 3.1 서버 사이드 렌더링용 엔트리 만들기  엔트리(entry)는 웹팩에서 프로젝트를 불러올 때 가장 먼저 불러오는 파일입니다. 예시로 현재 작성 중인 리액트 프로젝트에서는 index.js 파일을 엔트리 파일로 사용하고 있습니다. 이 파일부터 시작하여 내부에 필요한 다른 컴포넌트와 모듈을 불러오고 있습니다. 서버 사이드 렌더링을 할 때는 서버를 ..