📁 Hosting (호스팅)

호스팅이란 정보들이 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든지 응답한다.

📁:: SPA

3세대 웹 서비스등장

SPA(Single Page Application) 는 말 그대로 한 개의 페이지로 이루어진 어플리케이션.
html,js,data파일은 처음 한 번만 송수신하고 그 뒤로는 실시간 데이터만 주고 받는다.
단 하나의 HTML 문서로만 돌아가는 웹페이지로 사용자의 요청에따라 내용이 동적으로 바뀐다!

동적이 사이트가 많이 쓰이면서 렌더링 방식에 따라 CSR과 SSR로 나뉜다

:: CSR (Client Side Rendering)

- CRA (Creact React App)

npm create-react-app my-app

위 명령어로 초기 설정 없이도 React기반의 spa사이트를 구현할 수 있다. 바벨과 웹팩과 같이 리액트 애플리케이션 실행에 필요한 다양한 패키지가 포함되어있으며, 필수 개발 환경을 구축해준다. 초기 폴더 구성은 다음과 같다

1)node.modules 2)package.json 3).gitignore

하지만 CRA 는 Only CSR 로 실행되기 때문에 검색엔진에 검색되지 않는다.

- CSR (Client Side Rendering)

웹 페이지의 렌더링이 클라이언트(브라우저) 측에서 일어나는 것을 의미한다.

최초로 불러온 html의 내용은 비어있고 html,body 태그만 존재하게 된다.

js 파일의 다운로드가 완료되면 해당 js파일이 dom을 빈 html 위에 그리기 시작한다.

라우팅을 하더라도 html 자체가 바뀌는 것이 아니라 JS 차원에서 새로운 화면을 그려낸다.

장점은?

서버와 클라이언트 간의 데이터 양의 트래픽이 현저히 감소하고 단 한번의 렌더링만 있으므로 페이지 이동이 빠르다.

단점은?

SEO 사용이 불가.
코드 spliting으로 초기 렌더링이 느리다

:: SSR(Server Side Rendering)

첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해주는 방식.

CSR과 차이점?

1 SEO측면에서 유리

• 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문에 CSR의 단점인 "첫 페이지 깡통" 상태를 극복할 수 있다

2 UX 측면에서 유리
CSR에 비해 페이지를 구성하는 속도는 늦어지지만, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다.

단점은?

페이지를 잘못 구성할 경우 CSR에 비해 서버 부하가 커지거나, 첫 로딩이 매우 느려질 수 있다.