카카오 클라우드 스쿨 12월 9일 (데이터불변성), React Routing
불변성
- React 에서는 props와 useState로 만든 데이터는 원본을 수정할 수 없습니다.
Routing
- 요청 URL에 따라 분기를 해서 출력을 하는 것
SPA(Single Page Application)
1)Server Rendering
- 웹 브라우저가 서버에게 요청을 전송하면 서버가 HTML을 전송해서 전체를 다시 출력하는 방식
- 사용자와 인터럭션이 많은 웹 애플리케이션에서는 속도 측면에서 문제가 발생할 수 있음
2)SPA
- 첫번째 요청을 전송했을 때 만 HTML이 전송되고 그 이후부터는 요청을 하면 서버가 JSON(XML 도 가능)형태의 데이터를 전송하고 브라우저가 이 데이터를 파싱해서 랜더링 하는 구조
- 단점 : 앱의 규모가 커지면 자바스크립트 파일의 사이즈가 너무 커지게 되서 트래픽과 로딩속도에 문제가 발생할 수 있는데 이 문제를 해결하기 위해서는 Code Spiltting을 이용해서 해결
- 브라우저에서 자바스크립트 코드를 관리하는 경우 크롤러가 페이지의 정보를 제대로 받아가지 못하는 현상이 발생해서 검색엔진에서 페이지의 정보를 검색 결과에 포함하지 못하는 경우가 발생
- 처음 자바스크립트가 실행될 때 까지 페이지가 비어있기 때문에 빈 페이지가 잠시동안 보여질수 있음
이런경우를 방지하기 위해서는 첫번째 페이지는 서버에서 랜더링을 해서 보여지고 다음페이지 부터 클라이언트 랜더링을 하는것이 좋습니다.