CSR,SSR,Https

CSR vs SSR

CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)은 웹 애플리케이션을 렌더링하는 두 가지 기본적인 방법입니다. 각각의 접근 방식은 사용자에게 웹 페이지를 제공하는 방식이 매우 다르며, 그에 따라 성능, SEO(검색 엔진 최적화), 개발 복잡성 등 여러 측면에서 장단점이 있습니다.

Client-Side Rendering (CSR):

CSR은 웹 페이지의 내용이 사용자의 브라우저에서 JavaScript를 통해 동적으로 생성되고 렌더링되는 방식입니다. 이 방식은 초기에 서버로부터 빈 HTML 파일과 JavaScript 코드를 다운로드 받고, JavaScript가 실행되면서 웹 페이지의 내용을 구성합니다.

• 장점
  • 사용자 인터페이스 반응성 : 페이지의 일부분만 갱신할 수 있어 사용자 경험이 향상됩니다.
  • 서버 부하 감소 : 모든 렌더링이 클라이언트 측에서 처리되므로 서버의 부하가 줄어듭니다.
  • 개발 유연성 : 프론트엔드 프레임워크(예: React, Angular, Vue)를 사용하여 풍부한 사용자 경험과 동적인 인터랙션을 쉽게 구현할 수 있습니다.
• 단점
  • 초기 로딩 시간 : 모든 스크립트를 다운로드하고 실행해야 하므로 첫 페이지 로딩이 느릴 수 있습니다.
  • SEO 문제 : 초기 HTML이 거의 비어있어 검색 엔진이 콘텐츠를 즉시 인덱싱하기 어려울 수 있습니다.

Server-Side Rendering (SSR):

SSR은 서버에서 모든 웹 페이지의 내용을 렌더링하여 완성된 HTML을 사용자의 브라우저로 전송하는 방식입니다. 사용자는 서버로부터 이미 완성된 페이지를 받아 보게 됩니다.

• 장점
  • SEO 최적화 : 완성된 HTML이 제공되므로 검색 엔진이 페이지 내용을 더 쉽게 분석하고 인덱싱할 수 있습니다.
  • 빠른 초기 로딩 : 사용자는 서버로부터 완성된 페이지를 받기 때문에 초기 콘텐츠가 더 빨리 보여집니다.
• 단점
  • 서버 부하 증가 : 모든 페이지 요청이 서버에서 렌더링되므로 트래픽이 많을 때 서버에 높은 부하가 발생할 수 있습니다.
  • 유저 인터랙션 지연 : 페이지의 모든 부분이 서버에서 렌더링되므로, 동적인 인터랙션이 필요할 때마다 새로운 페이지 로드가 필요할 수 있습니다.

각각의 렌더링 방식은 특정한 사용 사례와 요구 사항에 따라 선택됩니다. 최근에는 CSR과 SSR의 장점을 결합한 하이브리드 접근 방식인 Universal Rendering 또는 Isomorphic Rendering이 인기를 얻고 있습니다. 이 방식은 초기 페이지 로드는 서버에서 처리하고, 이후의 동적인 인터랙션은 클라이언트 측에서 처리하여 두 가지 방식의 이점을 모두 활용할 수 있습니다.

---

HTTP/HTTPS 프로토콜

HTTP란 ?

HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받는 프로토콜입니다. 클라이언트(보통 웹 브라우저)와 서버 간의 요청과 응답을 교환하기 위해 사용됩니다.

• 주요 HTTP 메서드
  • GET : 데이터를 조회할 때 사용합니다. URL에 표시되므로 민감한 데이터를 전송할 때는 사용하지 않는 것이 좋습니다.
  • POST : 서버에 데이터를 생성할 때 사용합니다. 데이터가 요청 본문(body)에 포함되어 전송됩니다.
  • PUT : 서버의 데이터를 업데이트할 때 사용합니다. 주로 전체 데이터를 교체할 때 사용합니다.
  • DELETE : 서버의 데이터를 삭제할 때 사용합니다.
  • PATCH : 서버의 데이터 중 일부를 수정할 때 사용합니다.
• 상태 코드 예시
  • 200 OK : 요청이 성공적으로 처리됐음을 의미합니다.
  • 404 Not Found : 요청한 리소스를 찾을 수 없을 때 반환됩니다.
  • 500 Internal Server Error : 서버 내부 오류가 발생했을 때 반환됩니다.
• 세션과 쿠키
  • 쿠키 : 클라이언트의 브라우저에 저장되는 작은 데이터 조각으로, 사용자의 세션 정보를 저장하는 데 사용됩니다.
  • 세션 : 서버에서 클라이언트의 상태 정보를 유지하기 위해 사용합니다. 세션 ID를 통해 클라이언트를 식별하고, 쿠키에 저장된 세션 ID를 통해 사용자의 상태를 유지 관리합니다.

HTTPS란 ?

HTTPS(HyperText Transfer Protocol Secure)는 HTTP의 안전한 버전으로, 클라이언트와 서버 간의 통신을 암호화하는 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용합니다. 이는 데이터의 무결성을 보장하고, 중간자 공격(man-in-the-middle attacks)으로부터 보호하여 데이터를 안전하게 전송할 수 있도록 돕습니다.

• HTTPS의 주요 특징

  • 데이터 암호화 : HTTPS는 데이터를 암호화하여 전송합니다. 이로 인해 데이터를 도청하더라도, 내용을 해석하는 것이 불가능합니다.
  • 데이터 무결성 : 데이터가 전송 중에 변경되거나 손상되는 것을 방지합니다. 이는 데이터가 출발지에서 목적지까지 안전하게 도달했음을 보장합니다.
  • 인증 : HTTPS는 서버와 클라이언트가 서로의 정체성을 인증할 수 있게 합니다. 주로 서버는 자신이 신뢰할 수 있는 기관에 의해 발행된 인증서를 통해 클라이언트에 자신의 신뢰성을 증명합니다.

• HTTPS의 작동 방식

  • TCP 연결 수립 : 먼저 클라이언트와 서버 간의 TCP 연결이 설정됩니다.
  • TLS 핸드셰이크 : 클라이언트와 서버는 TLS 핸드셰이크를 수행하여 서로를 인증하고, 암호화 키를 교환합니다. 이 과정에서 서버는 자신의 인증서를 클라이언트에게 제공합니다.
  • 데이터 전송과 암호화 : 핸드셰이크가 완료되면, 세션 키를 사용하여 전송되는 데이터를 암호화합니다. 클라이언트와 서버는 이 세션 키를 사용하여 세션 동안 교환되는 모든 데이터를 암호화하고 복호화합니다.
  • 연결 종료 : 데이터 전송이 완료되면, 연결이 안전하게 종료됩니다.

• HTTPS의 중요성
  HTTPS는 특히 개인 정보, 로그인 자격 증명, 결제 정보 등 민감한 데이터를 다루는 웹사이트에서 필수적입니다. 구글과 같은 주요 기술 기업들은 웹사이트의 검색 엔진 순위를 결정할 때 HTTPS를 사용하는지 여부를 중요한 요소로 고려하고 있습니다. 이는 웹 보안 표준으로서의 HTTPS의 중요성을 강조합니다.

HTTP 메소드는 HTTPS 프로토콜에서도 동일하게 작동합니다. HTTPS는 HTTP의 안전한 버전이며, 기본적인 작동 방식은 HTTP와 같지만 통신 내용이 암호화된다는 점이 다릅니다. 이는 클라이언트와 서버 간의 데이터 전송이 보호되어, 데이터가 외부에서 도청되거나 변조되는 것을 방지합니다. HTTP 메소드의 정의와 사용 방법은 HTTPS에서도 그대로 유지됩니다. 다음은 HTTPS에서 사용되는 주요 HTTP 메소드들의 개요입니다

주요 HTTP 메소드

• GET

  • 데이터를 조회할 때 사용합니다.
  • URL에 데이터가 노출되므로, 민감한 정보를 전송할 때는 사용하지 않는 것이 좋습니다.
  • HTTPS에서는 이 정보가 URL에 포함되어 전송되지만, SSL/TLS를 통해 암호화되므로 중간에 이 정보를 쉽게 읽을 수 없습니다.

• POST

  • 서버에 데이터를 생성할 때 사용합니다.
  • 데이터가 HTTP 요청의 본문(body)에 포함되어 전송됩니다.
  • HTTPS에서는 전송 중인 데이터가 암호화되므로, 민감한 정보를 보다 안전하게 전송할 수 있습니다.

• PUT

  • 서버의 데이터를 업데이트할 때 사용합니다.
  • 주로 전체 데이터를 교체할 때 사용됩니다.
  • HTTPS에서도 마찬가지로 데이터 전체가 암호화되어 전송됩니다.

• DELETE

  • 서버의 데이터를 삭제할 때 사용합니다.
  • HTTPS에서는 이 요청 또한 암호화되어 전송되므로, 삭제 요청이 보호받습니다.

• PATCH

  • 서버의 데이터 중 일부를 수정할 때 사용합니다.
  • PUT과 유사하지만, 일부 데이터만 업데이트하는 데 적합합니다.
  • HTTPS에서 PATCH 요청 역시 암호화되어 안전하게 처리됩니다.

암호화의 역할

HTTPS에서의 암호화는 데이터의 무결성과 기밀성을 보장하는 중요한 역할을 합니다. 이는 데이터가 서버와 클라이언트 사이를 이동할 때 외부로부터의 간섭이나 도청으로부터 안전하다는 것을 의미합니다. 모든 HTTP 메소드에 대한 요청과 응답은 SSL/TLS를 통해 암호화되므로, 정보가 중간에 노출되더라도 원본 데이터를 해독하기 어렵습니다.

이처럼 HTTPS는 HTTP 메소드의 기본적인 기능을 그대로 유지하면서 통신의 보안을 강화한 프로토콜입니다.

웹 아키텍처

• 클라이언트-서버 모델
  클라이언트-서버 모델은 웹의 기본 아키텍처로, 사용자의 요청을 처리하고 응답을 제공하는 서버와, 요청을 보내고 응답을 받아 사용자에게 제공하는 클라이언트로 구성됩니다.

• 프론트엔드와 백엔드의 상호작용

  • 프론트엔드: 사용자가 직접 상호작용하는 웹 페이지를 구현합니다. HTML, CSS, JavaScript를 사용해 구성됩니다.
  • 백엔드: 서버, 애플리케이션, 데이터베이스로 구성되며, 사용자의 요청을 실제로 처리하는 로직을 포함합니다. 백엔드 언어로는 Node.js, Python, Ruby, Java 등이 있습니다.

• 데이터베이스와의 상호작용
  백엔드 서버는 데이터를 저장하고 처리하기 위해 데이터베이스와 상호작용합니다. 사용자의 요청에 따라 데이터베이스에서 데이터를 조회하거나 수정한 후, 그 결과를 다시 클라이언트에게 전송합니다.