230103 - SSR,CSR 비교 / AJAX / 프론트엔드 서버와 백엔드서버 / CORS

오늘 내가 배운 것

1. SSR, CSR 비교

2. AJAX

3. 프런트엔드 서버와 백엔드 서버로 분리하기

• cors 기본동작
• cors 에러해결방법

 

SSR, CSR 비교

예전에 HTTP를 배우면서 과거의 통신방식과 현재의 통신방식에 대해서 그림으로 표현한 적이 있다.

 

http://baekspace.tistory.com/88

221212 - HTTP 통신 방식, Node.js HTML파일 불러오기, path.join

 

 

과거방식

과거의 방식은 SSR(Server Side Rendering) 방식으로 전통적인 MPA(Multi Page Application)에서 `많이 쓰이는` 방식이고,

 

 

현재 방식

현재의 방식은 CSR(Client Side Rendering) 방식으로 최근에 대중적인 SPA(Single Page Application)에서 `많이 쓰이는` 방식이다.

SSR은 사용자에게 보여줄 레이아웃을 만드는 일을 ‘서버’측에서 하는 것이다. 사용자가 브라우저(Client)에 URL 주소를 입력하면, 그 주소에 대한 요청을 처리하는 서버(Server)에서 해당 요청에 대한 응답을 브라우저에게 전달하여 준다.

SSR 방식은 현재 보고 있는 페이지에서 일부 변경사항이 발생하게 되면 최소 한 번 이상의 재랜더를 해야 하지만 AJAX를 이용하면 현재 보고 있는 화면은 그대로 유지한 채 변경될 부분만 새로운 데이터로 보여줄 수 있다.
SSR 방식에서 AJAX를 통해 비동기로 DB에 접근하여 데이터를 받아온다 하지만, 중간 매개체인 서버 환경에 따라서 속도가 결정되는 상태이다. 그래서 그 페이지를 그려주는 역할을 서버가 아닌 클라이언트(브라우저)의 환경에서 담당할 수 있도록 한 것이 CSR 방식이다.

 

주의!! SPA가 CSR과 동일한 개념은 아니다!

CSR방식은 처음 실행 시에 템플릿을 구성하는 모든 파일들을 서버에서 브라우저로 가져오고, 이후에는 사용자 이벤트에 따라 화면이 바뀌게 되면, 변경되는 레이아웃을 브라우저 내부에 이미 저장되어있는 레이아웃을 가져와서 사용자에게 보여주는 것이다.

 

AJAX

- Asynchronous Javascript And Xml

비동기적 웹 서비스를 개발할 때 사용하는 기법
JavaScript를 사용한 비동기방식 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이다.

URL을 바꾸지 않고 페이지의 일부분만 요청을 보내서 화면을 그린다.
JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 페이지 전체를 다시 그리는 것보다 효율적이다.

 

프런트엔드 서버와 백엔드 서버로 분리하기

백엔드 서버와 프론트 엔드 서버가 서로 다른 도메인을 가지는 경우, 백엔드 서버에게 API 요청을 보내면 CORS 정책에 의해 요청이 무시된다. 이를 해결하기 위해 백엔드 서버 쪽에서 CORS를 허용하기 위한 별도의 설정을 해줘야 한다.

만약 CORS 정책을 위반하는 리소스 요청을 하더라도 해당 서버가 같은 출처에서 보낸 요청만 받겠다는 로직을 가지고 있는 경우가 아니라면 서버는 정상적으로 응답을 하고, 이후 브라우저가 이 응답을 분석해서 CORS 정책 위반이라고 판단되면 그 응답을 사용하지 않고 그냥 버린다. 이 처럼 브라우저에 의해 결정되기 때문에 서버에 구현된 스펙이 아니라 브라우저에 구현되어 있는 스펙이다.

 

CORS 기본동작

1. 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달한다.

2. 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다.

3. 클라이언트에서 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.

• 클라이언트는 자신이 보냈던 요청의 Origin과 서버의 응답의 Access-Control-Allow-Origin을 비교한다.
• 유효하지 않다면 그 응답을 사용하지 않고 버린다. (CORS 에러)

 

CORS 에러 해결 방법

서버에서 응답메세지를 보낼 때 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 응답한다.

res.setHeader('Access-Control-Allow-Origin', "*")
res.setHeader('Access-Control-Allow-Method', "POST, GET, OPTIONS, DELETE")
res.setHeader('Access-Control-Allow-Headers', 'Content-type')

 

 

---