프론트엔드/React

[프론트엔드] 서버 사이드 랜더링[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 파일을 엔트리 파일로 사용하고 있습니다. 이 파일부터 시작하여 내부에 필요한 다른 컴포넌트와 모듈을 불러오고 있습니다. 서버 사이드 렌더링을 할 때는 서버를 ..

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

2. 프로젝트 준비 및 설정 서버 사이드 렌더링을 진행하기 전에 라우터를 사용하여 라우팅을 하는 프로젝트를 먼저 만들겠습니다. ssr-recipe 프로젝트 안에 react-router-dom을 설치합니다. yarn add react-router-dom@^5.3.1 주의사항!! 2022년 기준으로 현재 라우터를 설치하면 6.x.x 버전으로 설치됩니다. 6.x.x 버전부터는 Route 컴포넌트 사용법이 달라져서 필자는 5.x.x 버전을 사용했으니 참고 바랍니다. 라우터 6.x.x 버전을 사용하고 싶다면 아래 작성한 글을 참고하셔서 수정하여 사용하시면 됩니다. [프론트엔드] React Router v6 업데이트 React Router v6 정식 릴리즈 React Router v6가 정식으로 릴리즈 되었다. 공..