Today 공부
- AJAX
- CSR
- SSR
- SEO
- CORS
AJAX (Asynchronous JavaScript and XML)
- AJAX는 CSR(Client Side Rendering)을 위해 사용합니다.
- AJAX를 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고, 페이지의 일부만 동적으로 업데이트 할 수 있다.
- 비동기적인 웹앱 제작을 위한 웹 개발 기법이다.
- Fetch API를 통해 AJAX 요청을 보낼 수 있다.
CSR (Client Side Rendering)
클라이언트에서 모든것을 처리하는 방식
동적 상호작용이 많은 웹 애플리케이션에는 CSR이 적합합니다.
CSR에서 서버는 주로 API 응답을 담당합니다.
HTML은 비어져있기 때문에 처음에 접속하면 빈화면이 보이며,
링크된 자바스크립트를 서버로부터 다운로드 받는데
받아오는 JS파일은 사이즈가 크다 (프레임워크 + 라이브러리 등등..)
문제점
1. 사용자가 첫 화면을 보기까지 시간이 오래걸린다
2. 썩 좋지 않은 SEO
SSR (Server Side Rendering)
SEO가 가장 우선 순위인 경우, SSR을 사용합니다.
경로가 변경될 때마다 새로운 정적 파일을 요청합니다.
웹페이지를 서버에서 완전히 랜더링 후 HTML 전달
웹사이트에 접속하면
서버에서 필요한 데이터를 모두 가져와서
HTML을 만들고
이 파일을 동적으로 제어할수있는 소스코드와 함께
클라이언트에게 보내줍니다.
로그인이 필요없는페이지는 SEO때문에 SSR로
- 첫 페이지로딩이빠르다
- 모든컨텐츠가 HTML에 담겨져있어서
조금 더 효율적인 SEO를 할수가 있다.
문제점 : 깜빡임 이슈(Blinking issue)
사용자가 클릭을 하게되면
전체적인 웹사이트를 다시서버에서 받아오것과
동일하기때문에 썩 좋지않은 User experience를 겪을수 있다- 서버에 과부화가 걸리기 쉽다
사용자가 클릭을할때마다 서버에요청해서
서버에서 필요한 데이터를 가지고와서
HTML을 만들어야 해서 서버에 과부하가 걸리기쉽다- 동적으로 데이터를 처리하는자바스크립트를 다운로드를
받아오지 않아서 클릭 시 반응이 없는 경우가 발생할 수 있다
SEO (Search Engine Optimization)
검색엔진 최적화
CORS
- 클라이언트와 서버가 서로
다른 origin에 있는 경우가 있으므로 CORS 기술이 도입되었다.- 서버쪽에서 클라이언트를 대상으로 리소스의 허용 여부를 결정하는 방법이다.
- 같은 origin에서 fetch를 시도하면 CORS 문제가 발생하지 않는다.
- 클라이언트는 서버가 어떤 origin 요청을 허용하는지는 알수 없다.
- 클라이언트에서 요청을 보낸 후, 서버로부터 받은 Access-Control-Allow-Origin 헤더 속성을 통해서 접속 가능 여부를 확인합니다.
| - | 클라이언트 | 요청방향 | 서버 |
|---|---|---|---|
| OPTIONS | 바꿔줘 | ----------------> | |
| <---------------- | 알겠어 200 OK | ||
| POST | 바꾼거 허락 해줘 | ----------------> | |
| <---------------- | 알겠어 200 OK ! |
origin(출처) 가 다르다고 판단하는 경우
- 프로토콜
- 호스트
- 포트번호
ex)
https://urclass.codestates.com:3000/course/56/curriculum
1) http -> 프로토콜
2) urclass.codestates.com -> 호스트(도메인)
3) :3000 -> 포트 번호
위 URL에 구성 중 origin을 구분하는 기준은 "프로토콜", "호스트(도메인)", "포트 번호"입니다.
preflight request
- 실질적인 요청 전, OPTIONS 메서드를 통해 발생한다.
- 실제 요청이 안전한지 서버가 미리 파악할 수 있도록 하는 수단이다.
- 모든 cross origin 요청이 preflight request를 발생시키는 것은 아니다.
