AJAX: SSR과 CSR

📖AJAX(Asynchronous Javascript and XML)

• AJAX는 언어나 프레임워크가 아닌 구현하는 방식을 의미
• AJAX는 웹(Web)에서 화면을 갱신하지 않고, 데이터를 서버로부터 가져와 처리하는 방법을 의미
• JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회한다.
• 화면갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡하다.

 

❗일반 요청에 대한 응답

• data를 입력 후 event 발생
• Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리
• logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면 전환이 일어남)

 

❗Ajax 요청에 대한 응답

• data를 입력 후 event 발생
• Ajax를 적용하면 event 발생시 서버에서 요청을 처리한 후 Text, XML 또는 JSON으로 응답
• client(Browser)에서는 이 응답 data를 이용하여 화면 전환없이 현재 페이지에서 동적으로 화면을 구성한다. (화면 전환 X)

 

🔎SSR과 CSR

웹 화면을 구성하는 방식은 서버 중심의 상호작용 방식(SSR)과 클라이언트 중심의 상호작용 방식(CSR) 방식으로 구분된다.

1) SSR(Server-Side Rendering)

• 클라이언트(브라우저)가 요청할 때마다 서버에 데이터를 요청하여 처리하여 서버에서 처리하는 방식
• 서버가 클라이언트의 요청마다 새로운 화면(html)을 제공
• 서버가 화면을 그리는 주체가 됨
• MPA(Multiple Page Application)에서 사용하는 방식

2) CSR(Server-Side Rendering)

• 클라이언트(브라우저)가 요청에 따라 필요한 부분만 응답을 받아 렌더링하는 방식
• 클라이언트의 요청시 모든 data(JSON, XML)을 제공
• 클라이언트(브라우저)가 화면을 그리는 주체가 됨
• SPA(Single Page Application)에서 사용하는 방식

 

https://jaeone94.github.io/posts/Web-SSR%28%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%29%EC%9D%B4-%EB%8C%80%EC%B2%B4-%EB%AD%90%EC%95%BC/

 

 

🔎AJAX 사용방식

1. fetch

2. 외부라이브러리 이용방식-jQuery, axios

 

❗fetch

브라우저에서 fetch() 함수를 지원하기 이전에는 XMLHttpRequest를 이용하여 직접 HTTP 요청하고 응답을 직접 구현했다. 하지만 복잡한 구현 때문에 jQuery나 axios와 같은 외부 라이브러리를 사용했는데, 브라우저가 fetch() 함수를 지원하면서 위와 같은 라이브러리를 사용하지 않아도 간단히 구현 가능이 가능해졌다.

• fetch()함수는 첫번째 인자로 URL, 두번째 인자로 options 객체를 받는다.
• options에 아무것도 넘기지 않으면 요청은 GET 방식으로 진행되며 url로부터 content가 다운로드 된다.
• 실행결과 Promise 타입의 객체를 반환한다.
• 반환된 Promise 객체는 API 호출이 성공했을 경우 응답객체(response)를 resolve하고, 실패했을 경우 예외(error) 객체를 reject한다.

*응답 본문(data)를 받는 방법

• response.text(): 응답을 읽고 text 반환
• response.json(): 응답을 JSON형식으로 반환
• response.formData(): 응답을 formData 객체 형태로 반환
• response.blob(): 응답을 Blob 형태로 반환동

 

🔎데이터 전송 형식

1. CSV

• 각 항목을 쉼표(,) 형태로 구분해 데이터를 표현하는 방법
• 다른 두 형식에 비해 굉장히 짧다. 즉, 많은 양의 데이터 전송시에 유리하다.
• 하지만 각각의 데이터가 어떤 내용인지 파악하기 힘들다. (서버와 클라이언트가 완벽히 데이터 구조를 공유할 경우 가능)

 

2. XML

• xml은 tag 형태로 data를 표현한다.
• tag를 보면 각 data가 무엇을 의미하는지 파악할 수 있다.
• tag에 사용자 정의 속성을 넣을 수 있으므로 복잡한 data를 전달할 수 있다.

 

3. JSON

• CSV와 XML의 단점을 극복한 형식으로 JavaScript에서 사용하는 객체의 형식으로 data를 표현한다.
• AJAX 사용시 거의 표준으로 사용되는 data 표현 방식이다.
• key-value 쌍으로 되어 있다.

 

 

🔎동기식 처리와 비동기식 처리

1. 동기식 처리(Synchronous)

• 코드가 순차적으로 실행되는 방식
• 각각의 작업은 이전 작업이 완료될 때까지 기다리며, 한 번에 하나의 작업만을 수행한다.
• 코드의 흐름이 위에서 아래로 이어지며, 각 문장은 이전 문장의 실행이 완료된 후에 실행된다.

 

2. 비동기식 처리(Asynchronous)

• 코드의 일부가 완료되기를 기다리지 않고, 다음 작업을 수행하는 방식
• 특별한 이벤트 루프, 콜백 함수를 통해 백그라운드에서 처리됨, 작업이 완료되면 결과가 메인 프로그램으로 전달된다.
• 비동기식 처리는 주로 네트워크 요청, 파일 읽기/쓰기, 타이머 등의 작업에서 사용된다.