40일차

🦝

40일차

 

Part 10. React 로 쇼핑몰 만들기 (React 기본)

Ch 10. Deploy React App

Ch 11. React 로 만드는 쇼핑몰 프로젝트

 

---

 

 

Ch 10. Deploy React App

 

 

 🔗 SPA 프로젝트 배포 이해하기 

 

• 모든 요청을 서버에 하고 받아오는 형태가 아님
• 라우팅 경로에 상관없이 리액트 앱을 받아 실행
• 라우팅은 받아온 리액트 앱을 실행 후, 적용
• static 파일을 제외한 모든 요청을 index.html 로 응답해 주도록 작업

 

$ nvm install 10.16.3
$ npm ci

$ npm run build

npm run build

 

 

 🔗 serve 패키지로 React Web App 배포하기 

 

$ npm install serve -g
$ serve -s build # -s 옵션은 어떤 라우팅으로 요청해도 index.html 을 응답하도록 한다.

 

 

 🔗 AWS S3 에 React Web App 배포하기 

 

https://s3.console.aws.amazon.com/s3/buckets?region=us-east-1 

https://s3.console.aws.amazon.com/s3/buckets?region=us-east-1

 

• 버킷 정책 편집

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": [
			    "s3:GetObject"
			],
			"Resource": [
			    "arn:aws:s3:::react-web-app-test2/*"
			]
		}
	]
}

 

 

 🔗 NginX 로 React Web App 배포하기 

 

https://us-east-1.console.aws.amazon.com/ec2/v2/home?region=us-east-1#Home: 

https://us-east-1.console.aws.amazon.com/ec2/v2/home?region=us-east-1#Home:

 

https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

 

 

 🔗 node.js express 로 React Web App 배포하기 

 

$ npm i express

$ node server.js

 

// server.js

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

// 404
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

 

 

 🔗 서버사이드 렌더링 이해하기 

 

• Server Side Rendering
  • 서버에서 응답을 가져올 때, 기존처럼 static file 만을 가져오는 것이 아니고, 먼저 서버에서 응답 값을 만들어서 내려주고, 그 후에 static 파일을 내려준다.
  • static file 을 다 내려받고, 리액트 앱을 브라우저에서 실행한 뒤에는 SPA 처럼 동작하게 된다.
• React Server Side Rendering
  • React Component 를 브라우저가 아니라 Node.js 에서 사용
  • ReactDOMServer.renderToString(<App />);
    • 결과가 문자열
    • 이것을 응답으로 내려준다.
  • 라우팅, 리덕스 와 같은 처리를 서버에서 진행하고 내려준다.
    • 복잡, 어렵
  • JSX 가 포함된 리액트 코드를 서버에서 읽을 수 있도록 babel 설정을 해야 한다.

 

https://ko.reactjs.org/docs/react-dom-server.html

ReactDOMServer – React

 

// ./server.js

const express = require('express');
const path = require('path');
const ReactDOMServer = require('react-dom/server');
const React = require('react');
const fs = require('fs');

// <div>hello</div>
console.log(
  ReactDOMServer.renderToString(React.createElement('div', null, 'hello')),
);

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('./test', (req, res) => {
  const ssr = ReactDOMServer.renderToString(
    React.createElement('div', null, 'hello'),
  );
  const indexHtml = fs
    .readFileSync(path.join(__dirname, 'build', 'index.html'))
    .toString.replace('<div id="root"></div>', `<div id="root">${ssr}</div>`);

  console.log(indexHtml);

  res.send(indexHtml);
});

// 404
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

 

 

---

 

 

Ch 11. React 로 만드는 쇼핑몰 프로젝트

 

 

⭐ context API 와 Hooks 를 이용한 전역 상태 관리