- 어제는 react router로 클라이언트 사이드 셋업을 완성했었다.
- 오늘은 서버 사이드 셋업을 하는 방법에 대해서 알아보았다.
- 기본적인 프로젝트 셋업을 완료하고 페이지를 설계하고 포트폴리오 만들기를 시작했다.
- 어느 정도 틀이 있던 이전 스프린트들과 다르게 시작부터 모든 걸 해야 해서 더 막막했던 거 같다.
- 모달창 컴포넌트를 어떻게 만들어야 할지 도저히 아이디어가 떠오르지 않아서 완성하지 못했다.
- 남는 시간에 방법을 찾아보고, 마무리하지 못한 포트폴리오를 완성시켜야겠다.
클라이언트 사이드 렌더링과 서버 사이드 렌더링
클라이언트 사이드 렌더링: 해당 부분의 컴포넌트만 수정하게 된다(주소창 부분만). 히스토리 객체의 속성을 이용해서 만들어진다. 즉 url을 복붙 해도 그 컴포넌트가 그대로 나타나지 않는다.
서버 사이드 렌더링: 메서드와 url을 사용해서 실질적인 http 요청이 들어와서 바뀌게 된다.
빌드란? 빌드를 해야 하는 이유
- React로 작성한 jsx를 브라우저가 인식할 수 있는 자바스크립트로 바꾸어 주어야 한다. ⇒ 그 과정을 build 로 해준다
- create react app이 실제 환경에서 사용되는 앱을 만들기 위해서 이미 가지고 있는 index.html 파일에서 불필요하게 용량을 차지하는 정보를 제거한 것이 build에 보인다.
- 실제로 서비스할 때는 build 안에 있는 파일들을 사용하면 된다.
서버사이드 렌더링을 하는 방법
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join('public')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.listen(9000);