React
forwardRef
- useRef 사용
function App(){
const myInputRef = useRef();
const click = () => {
console.log(myInputRef.current.value);
};
return (
<div>
<MyInput ref={myInputRef}/>
<button onClick={click}>send</button>
</div>
);
}- forwardRef
: 상위로 참조 전달하기!
import React from 'react';
export default React.forwardRef(function MyInput(props, ref){
return (
<div>
<p>MyInput</p>
<input ref={ref} />
</div>
)
});Deploy React App
SPA 프로젝트 배포 이해하기
-
create react app 을 사용해 만든 프로젝트는
npm run build를 통해 빌드 할 수 있다. -
build/static 폴더 안에 JS,CSS 파일들이 생성, 파일 이름에 hash 값이 붙는다.
-
❗️ 모든 요청을 서버에 하고 받아오는 형태가 아님
-
라우팅 경로에 상관없이 리액트 앱을 받아 실행
-
라우팅은 받아온 리액트 앱을 실행 후 , 적용
-
static 파일을 제외한 모든 요청을 index.html 로 응답해 주도록 작업
serve 패키지로 React Wep App 배포하기
npm install serve -g
serve -s build
-
serve 라는 패키지를 전역으로 설치합니다.
-
serve 명령어를 -s 옵션으로 build 폴더를 지정하여 실행합니다.
(-s 옵션은 어떤 라우팅으로 요청해도 index.html 을 응답하도록 한다. )
AWS S3 에 React Wep App 배포하기
-
버킷 생성
-
버킷에 업로드 ( build 파일 안에 있는 모든 파일, 폴더 )
-
속성 -> 정적 웹 사이트 호스팅 -> 편집 -> 활성화 -> 인덱스문서 : index.html -> 오류문서 : index.html
-
업로드한 파일들 퍼블릭으로 넘겨주기
-
권한 -> 퍼블릭 엑세스 차단 -> 편집 -> 모든 차단 해제 -> 확인
-
권한 -> 버킷 정책 -> 버킷 정책 생성기 사용 -> 버킷 정책 편집 -> 저장
-
속성 아래 주소로 접속이 가능하다.
-
cloudfront cdn 을 달면 https 로 사용할 수 있다.
NginX 로 React Wep App 배포하기
-
AWS EC2 대시보드 -> 인스턴스 시작 -> 우분투 -> prettier -> 보안그룹구성( http 추가 ) : 보안그룹이름은 버킷 명으로 설정 -> 키페어 새롭게 만들고 다운로드 -> 인스턴스 시작
-
다운받은 키페어가 있는 폴더에서
ssh ubuntu@0.00.아이피.주소 -i 파일명.pem -
chmod 400 파일명.pem권한 조정
-ssh ubuntu@0.00.아이피.주소 -i 파일명.pem
-
우분투 실행됨.
-
우분투에 깃 클론을 통해 프로젝트를 내려받고
-
우분투에 노드 설치
-
설치 코드 넣고
-
export 코드를 우분투 홈 경로의 .profile 에 넣어준다.
-
우분투 서버를 껏다가(exit) 다시 실행해서 nvm install 노드 사용가능
-
npm ci
-
npm run build
-
sudo apt-get update
-
sudo apt-get upgrade
-
sudo apt-key add nginx_signing.key
-
sudo rm -rf nginx_signing.key
-
sudo nano /etc/apt/sources.list 아래 코드 2줄 추가
-
deb http://nginx.org/packages/mainline/ubuntu/ trusty nginx
-
deb-src http://nginx.org/packages/mainline/ubuntu/ trusty nginx
-
ctrl+x y
-
sudo apt-key add nginx_signing.key
-
sudo apt-get update
-
sudo apt-get upgrade
-
sudo apt-get install nginx
-
nginx -v
-
sudo rm -rf /etc/nginx/sites-available/default
-
sudo nano -rf /etc/nginx/sites-available/default
default 에 내용 추가
sever {
listen 80;
sever_name localhost;
root /home/ubuntu/파일명/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}-
sudo service nginx restart
-
로컬 호스트 주소로 서비스 된다.
node.js express 로 React Wep App 배포하기
- 프로젝트 폴더에서
npm i express
server.js 를 만들고
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.listen(9000);node server.js
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req,res)=>{
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);서버사이드 렌더링 이해하기
-
서버에서 응답을 가져올때, static file 만을 가져오는 것이 아니고, 먼저 서버에서 응답 값을 만들어서 내려족, 그 후 static file을 내려준다.
-
static file 을 다 내려받고, 리액트 앱을 브라우저에서 실행한 뒤에는 SPA 처럼 동작하게 된다.
-
React Component 를 브라우저가 아니라 Node.js 에서 사용한다.
-
ReactDOMServer.renderToString(<App/>);
( 결과가 문자열: 브라우져에 표기되는 html, 이것을 응답으로 내려준다. ) -
라우팅, 리덕스 와 같은 처리를 서버에서 진행하고 내려준다.
( 복잡하고 어렵다. ) -
JSX 가 포함된 리액트 코드를 서버에서 읽을 수 있도록 babel 설정을 해야한다.
const express = require('express');
const path = require('path');
const ReactDOMServer = require('react-dom/server');
const React = require('react');
// <div data-reactroot=''>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', ()=>{
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>`)
res.send(indexHtml);
})
app.listen(9000);