Todo
📌 리덕스 미들웨어 독학 카테고리에 정리 ✔
📌 리액트 프로젝트에서 타입스크립트 독학 카테고리에 정리
💻 이웅재 강사 자바스크립트 강의 끝까지 ✔
💻 Typescript Essentials 강의 : ch1 ~ ch7까지
💻 React로 쇼핑몰 만들기 강의 : ch9 ~ ch11까지 ✔
💡 프론트엔드 면접 준비 - google에서 면접 질문 A4 출력
Error & Solution
What I learned
- HTML Entities
https://dev.w3.org/html5/html-author/charref - SPA(Single Page Application) 프로젝트 배포 이해하기
단일 페이지로 구성된 웹 애플리케이션을 말한다. 처음 한번의 액세스로 우선 웹 페이지 전체를 취득하는데, 이후의 웹 페이지 갱신은 기본적으로 JavaScript로 실시한다.
$ npm run build
: production 모드로 빌드되어, 'build' 폴더에 파일 생성.
이렇게 만들어진 파일들을 웹서버를 통해 사용자가 접근할 수 있도록 처리
build/static 폴더 안에 JS,CSS 파일들이 생성.
파일 이름에 hash 값이 붙는다. ex) main.eb74f3d0.chunk.css
SPA Deploy 특징
1. 모든 요청을 서버에 하고 받아오는 형태가 아님
2. 라우팅 경로에 상관없이 리액트 앱을 받아 실행
3. 라우팅은 받아온 리액트 앱을 실행 후 적용
4. static 파일을 제외한 모든 요청을 index.html로 응답해주도록 작업
배포방법: server -s build, AWS S3, node.js express, NginX- serve 패키지로 React Web App 배포하기
$ npm install serve -g
$ serve -s build
-s : 어떤 라우팅으로 요청해도 index.html을 응답하도록 한다.- node.js express로 배포하기
$ npm i express
src/server.js 파일 생성
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
// 404가 걸려도 index.html로 이동
app.get('*',(req,res)=>{
res.sendFile(path.join(__dirname,'build','index.html'));
});
app.listen(9000);
$ node server.js- 서버사이드렌더링 이해하기
1. 서버에서 응답을 가져올 때, 기존처럼 static file만을 가져오는 것이 아니고,
먼저 서버에서 응답 값을 만들어서 내려주고 그 후에 static file을 내려준다.
2. static file을 다 내려받고, 리액트 앱을 브라우저에서 실행한 뒤에는 SPA처럼 동작.- React Server Side Rendering
1. React component를 브라우저가 아니라 Node.js에서 사용
2. ReactDOMServer.renderToString(<App />);
결과가 문자열, 이것을 응답으로 내려준다.
3. 라우팅, 리덕스와 같은 처리를 서버에서 진행하고 내려준다. 복잡하고 어렵.
4. JSX가 포함된 리액트 코드를 서버에서 읽을 수 있도록 babel 설정을 해야 한다.