목차
인터넷
•
International Network 의 줄임말 입니다.
•
정보의 바다
•
컴퓨터가 서버와 클라이언트로 연결되어 TCP/IP 를 이용해 정보를 주고 받습니다.
인터넷은 어떻게 연결되는 걸까? 
•
특정 웹페이지에 검색어 입력시
내 컴퓨터 > (무선 공유기) > 통신사 모뎀 > 가까운 기지국 > 중앙 기지국 > 해저터널 > 해당 국가 중앙 기지국 > 가까운 기지국 > 특정 웹서버
인터넷은 여러 형태의 자료를 요청하고 응답한다.
•
HTTP (HyperText Transfer Protocol)
◦
HyperText(Html) 를 전송하는 프로토콜 입니다.
◦
HTTP 메세지
◦
80 번 포트를 사용합니다.
•
FTP (File Transfer Protocol)
◦
서버로 파일을 전송할 때 사용하는 프로토콜 입니다.
◦
20 번 포트를 사용합니다.
•
SMTP (Simple Mail Transfer Protocol)
◦
메일을 전송할 때 사용하는 프로토콜 입니다.
◦
25 번 포트를 사용합니다.
•
SSH (Secure SHell)
◦
서버에 접속할 때 사용하는 프로토콜 입니다.
◦
22 번 포트를 사용합니다.
Web
인터넷 상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할 수 있게 해주는 정보검색 시스템 입니다. 하이퍼 텍스트 형식으로 표현된 인터넷 상의 다양한 정보를 효과적으로 검색하는 시스템으로, 전 세계적으로 가장 널리 보급되어 있습니다.
•
클라이언트는 서버의 HTML 을 열어보는 것이라 할 수 있습니다.
◦
이후에는 여러 Content Type 을 사용합니다.
▪
html, text, json, xml, multi media …
•
서버는 80 포트에서 동작중인 웹 서버를 통해 위의 내용을 제공 합니다.
정적웹과 동적웹
정적웹은 미리 정의된 페이지를 제공하는 반면, 동적웹은 사용자의 상황과 입력에 따라 실시간으로 페이지 내용을 생성하거나 변경하여 제공합니다.
정적웹 (Static Web)
•
정적웹 페이지는 서버에 미리 저장된 파일로서, 모든 사용자에게 동일한 내용을 제공합니다. 이러한 페이지는 서버에서 변경되지 않고 그대로 제공됩니다.
•
HTML, CSS, JavaScript와 같은 클라이언트 측 언어를 사용하여 제작됩니다.
•
예 회사 소개 페이지, 블로그의 포스트 페이지, 문서 페이지 …
•
장점
◦
로딩시간이 빠릅니다.
◦
서버 부하가 감소합니다.
◦
호스팅이 비교적 간단하고 저렴합니다.
•
단점
◦
내용을 변경 하려면 웹 페이지 자체를 편집하고 다시 업로드 해야 합니다.
◦
사용자마다 다른 컨텐츠를 제공하기 어렵습니다.
동적웹 (Dynamic Web)
•
동적웹 페이지는 사용자의 요청에 따라 실시간으로 내용이 생성되거나 변경되는 페이지입니다. 이러한 페이지는 데이터베이스, 사용자 입력 또는 서버 측 스크립트를 기반으로 내용을 생성합니다.
•
서버 측 프로그래밍 언어
◦
PHP, Python, Java, Ruby, Node.js…
데이터베이스 시스템
◦
MySQL, PostgreSQL, MongoDB …
•
예 소셜 미디어 피드, 온라인 쇼핑몰, 사용자 계정 관련 페이지 …
•
장점
◦
사용자마다 개인화된 컨텐츠 제공이 가능합니다.
◦
실시간 정보 업데이트 및 대규모 데이터 처리가 가능합니다.
•
단점
◦
일반적으로 정적 페이지보다 로딩 시간이 더 오래 걸릴 수 있습니다.
◦
서버 부하 및 복잡도가 증가할 수 있습니다.
SSR 과 CSR
SSR (Server-Side Rendering)
•
웹 페이지의 렌더링이 서버 측에서 발생합니다. 사용자의 요청에 응답하여 서버는 이미 렌더링된 페이지의 HTML을 클라이언트에게 전송합니다.
•
장점
◦
초기 페이지 로딩 시간이 빠르며, 사용자에게 콘텐츠가 더 빨리 표시됩니다.
◦
SEO 최적화에 유리하며, 크롤러가 페이지의 완전한 HTML 콘텐츠를 쉽게 수집할 수 있습니다.
•
단점
◦
사용자와의 상호작용 시마다 서버에 요청을 해야 할 수 있으므로, 상호작용의 반응 속도가 CSR 에 비해 느려질 수 있습니다.
◦
서버 부하가 증가할 수 있습니다.
CSR (Client-Side Rendering)
•
웹 페이지의 렌더링이 클라이언트 측, 주로 웹 브라우저에서 발생합니다. 서버는 초기 요청에 필요한 JavaScript, CSS 및 HTML 스켈레톤만 전송하며, JavaScript가 웹 페이지의 내용을 동적으로 렌더링합니다.
•
장점
◦
사용자와의 상호작용이 빠르고 부드럽습니다.
▪
예 SPA - Single Page Application
◦
클라이언트가 렌더링 작업을 수행하기 때문에 서버 부하가 감소합니다.
•
단점
◦
초기 로딩 시간이 길 수 있습니다. 필요한 스크립트를 모두 로드하고 실행한 후에만 전체 페이지가 표시됩니다.
◦
SEO 최적화에 어려움이 있을 수 있습니다. 웹 크롤러가 JavaScript를 실행하지 않는 경우 페이지의 실제 내용을 크롤링하지 못할 수 있습니다.
SPA (Single Page Application)
SPA는 웹 애플리케이션 또는 웹사이트에서 사용자와의 상호작용을 페이지 새로고침 없이 동적으로 재렌더링함으로써 제공하는 웹 애플리케이션 개발 방식을 의미합니다. SPA를 지원하는 프레임워크나 라이브러리로는 React (React Router와 함께 사용), Angular, Vue.js (Vue Router와 함께 사용) 등이 있습니다.
특징
•
전통적인 웹 페이지에서는 새로운 페이지 또는 콘텐츠를 보려면 페이지를 새로고침해야 했습니다. 그러나 SPA에서는 사용자의 상호작용에 따라 필요한 콘텐츠만 동적으로 변경되며, 전체 페이지 새로고침은 발생하지 않습니다.
•
모든 리소스가 초기 로딩 시에 한 번만 불러와지므로, 페이지 간의 전환과 상호작용이 빠르게 이루어집니다.
•
SPA에서는 브라우저의 히스토리 API를 활용하여 브라우저의 주소창을 업데이트 하면서도 페이지 새로고침을 피합니다. 이를 통해 사용자는 브라우저의 뒤로 가기, 앞으로 가기 버튼을 정상적으로 사용할 수 있습니다.
•
SPA는 AJAX, Fetch API, WebSocket 등의 기술을 활용하여 필요한 데이터만 서버로부터 동적으로 불러와 콘텐츠를 업데이트합니다.
장점
•
빠른 페이지 전환과 반응성.
•
한 번의 초기 페이지 로딩 후 추가 데이터만 불러오기 때문에 서버 부하가 감소합니다.
•
부드러운 페이지 전환과 빠른 상호작용을 제공하여 사용자 경험을 향상합니다.
단점
•
애플리케이션의 모든 리소스를 처음에 불러와야 하기 때문에 초기 로딩 시간이 깁니다.
•
전통적인 크롤러가 JavaScript를 실행하지 않을 경우, SPA의 동적 콘텐츠를 제대로 크롤링하기 어려울 수 있음. 즉, SEO 최적화의 어려움이 존재합니다.
•
브라우저의 히스토리 관리나 라우팅에 관한 복잡성 증가.