webServer

인터넷에서 정보를 교환할때는 일반적으로 정보를 제공하는 서버와 정보를 이용하는 클라이언트가 존재한다.
웹의 경우 웹서버와 클라이언트인 웹브라우저간에 정보를 교환한다.
Apache나 IIS, nginix 등의 웹서버 소프트웨어는 웹 브라우저에서 요청할 때 필요한 정보를 제공하며, 동적인 웹페이지에서는 데이터베이스의 데이터를 이용한다.

1. 웹 서버

웹서버는 웹 브라우저 같은 클라이언트 소프트웨어의 요청에따라 정보나 서비스르 제공하는 컴퓨터를 말한다.
요청에 따라 프로그램을 실행하거나 DB와 연동 할 수 있다.

2. 웹 페이지 렌더링 방식

1. 정적인 페이지

웹서버는 HTTP(Hyper Text Transfer Protocol) 통신 방식(프로토콜)에 의해 웹 브라우저와 통신한다.
웹서버는 웹 브라우저로부터 요청을 받고 준비된 HTTP파일을 반환한다. 웹 브라우저는 이를 해석해서 웹페이지에 표시한다.

이처럼 정해진 내용만 반환하는 페이지를 정적인 웹페이지라고 한다.

2. 동적인 페이지

웹서버는 서버에 있는 파일 내용을 그대로 전송하는 것 뿐아니라 클라이언트(웹브라우저)의 요청에따라 프로그램을 실행하고 그 결과를 전송하기도 한다.
게시판 같은 웹 브라우저에서의 입력에따라 표시되는 내용이 변경되는 페이지를 동적인 페이지라 한다.

웹브라우저의 요청에따라 웹서버상의 프로그램을 실행시키는 기술을 CG(Common Gateway Interface)라고 한다.
CGI 프로그램은 펄(Perl)이나 그밖의 다른 프로그래밍 언어를 이용해 만든다.

3. 클라이언트 사이드 스크립트(Client-Side Script)

클라이언트(웹브라우저)에서 실행되는 스크립트를 의미한다.

주요 기술: JavaScript, HTML, CSS

• 예시:
  • 버튼 클릭 시 색상 변경 (JavaScript 이벤트 핸들링)
  • AJAX 요청을 통해 데이터를 가져와 화면에 표시
  • DOM 조작 (예: document.getElementById(“demo”).innerText = “Hello!”)
    ➡️ 클라이언트 사이드 스크립트는 클라이언트에서 실행되는 모든 코드를 의미하며, 꼭 랜더링 방식에 국한되지 않는다.

4. 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)

CSR은 웹 페이지의 HTML을 초기에 최소한으로 로드하고, 이후 JavaScript가 동작하면서 데이터를 가져와 동적으로 페이지를 완성하는 방식이다.

주요 기술: React, Vue, Angular (SPA 프레임워크)

• 작동 방식:
  • 브라우저가 서버에서 최소한의 HTML 파일을 받음.
  • JavaScript가 실행되면서 API 요청 등을 통해 필요한 데이터를 가져옴.
  • 데이터를 기반으로 화면을 동적으로 생성 (DOM 조작).
  • 이후 사용자의 페이지 이동도 JavaScript가 처리하면서 페이지 전체를 다시 불러오지 않음.
    ➡️ 클라이언트 사이드 랜더링은 클라이언트 사이드 스크립트를 활용하는 랜더링 기법 중 하나이다

🔥 정리
클라이언트 사이드 스크립트: 브라우저에서 실행되는 모든 JavaScript 코드
클라이언트 사이드 랜더링 (CSR): JavaScript를 사용해 화면을 동적으로 구성하는 랜더링 방식
즉, CSR은 클라이언트 사이드 스크립트를 사용한 특정한 랜더링 기법 중 하나이다.

5. 서버 사이드 스크립트 (Server-Side Script)

웹서버에서 처리되는 스크립트이다.
웹서버상의 HTML 파일안에 간단한 프로그램(스크립트)를 포함시켜두고 실행 결과를 HTML의 일부로서 웹브라우저에 반환한다.
이는 웹 서버상의 HTML 내에서 실행되기때문에 CGI에 비해 서버에 부하가 적다.

주요 기술: PHP, Node.js (Express), Python (Django, Flask) 등이 있다.

SSR 작동 방식

1. 사용자가 웹 페이지에 접속하면 브라우저가 서버에 요청을 보냄.
2. 서버가 데이터베이스에서 필요한 데이터를 가져와 HTML을 완성함.
3. 완성된 HTML 파일을 브라우저로 전달.
4. 브라우저는 받은 HTML을 바로 렌더링하여 화면에 표시.
5. 이후 추가적인 동적 기능이 필요하면 JavaScript가 실행됨.

6. 서버 사이드 렌더링(Server-Side Rendering, SSR)

SSR은 서버에서 HTML을 완성한 후 클라이언트에 전달하는 방식이다.
서버에서 HTML을 미리 렌더링한 후, 클라이언트(브라우저)로 완성된 페이지를 보낸다.
이를 통해 검색 엔진 최적화(SEO)에 유리하며, 초기 로딩 속도가 빠르다.
하지만 모든 요청에서 서버가 HTML을 생성해야 하므로 서버 부하가 발생할 수 있다.

주요 SSR 프레임워크: React 기반의 Next.js, Vue 기반의 Nuxt.js가 있다.