웹 생태계의 변화

황승현·2023년 12월 18일
Springweb
0

스프링 강의 정리

목록 보기
1/8
post-thumbnail

개요

1960년 인터넷이 등장한지 30년 후인 1990년, 웹(web)의 개념이 처음 등장

지금까지 웹은 많은 변화를 거쳐왔다.

1세대 웹

  • 서버를 통해 완성된 HTML/CSS를 로드

    • HTML : 웹에 화면을 구성하는 마크업 언어 (문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함)

    • CSS : HTML을 통해 구성된 화면을 꾸며주는 Style sheet 언어

  • 페이지별로 완성된 화면 자체를 서버에서 불러오기 때문에, 페이지 이동시 화면이 깜빡임

  • SSR (Server Side Rendering) : HTML 내용을 모두 채워서 Client에 전송해 주는 방식

    • 완성된 HTML 파일을 가져오기 때문에 첫 페이지의 로딩 시간이 빠르다.

    • 처음부터 HTML을 만들어야하기 때문에 변경사항 혹은 나머지 페이지를 불러오는 시간이 느리다.

    • 검색 엔진으로 검색했을 때 검색이 잘 된다. SEO(Search Engine Optimization)가 가능하다.

    • 서버에 부담을 많이 준다.

2세대 웹

  • 1세대의 기능(페이지별로 완성된 화면을 불러오는 것)이 불편함

  • 깜빡이지 않는 동적인 웹사이트를 구현하기 위해 Ajax라는 개발기법이 등장

  • 서버에서 HTML/CSS를 가져오고, 거기에 필요한 데이터만을 서버에 재요청하여 변경하는 것이 가능해짐

    • 1세대와는 달리 클라이언트(브라우저)의 요청에 따라 데이터도 리턴 가능

  • SSR (Server Side Rendering) : HTML 내용을 모두 채워서 Client에 전송해 주는 방식

    • 완성된 HTML 파일을 가져오기 때문에 첫 페이지의 로딩 시간이 빠르다.

    • 처음부터 HTML을 만들어야하기 때문에 변경사항 혹은 나머지 페이지를 불러오는 시간이 느리다.

    • 검색 엔진으로 검색했을 때 검색이 잘 된다. SEO(Search Engine Optimization)가 가능하다.

    • 서버에 부담을 많이 준다.

3세대 웹

  • 2세대에서 발전한 모습

  • React, Angular, Vue 등의 라이브러리 및 프레임워크가 등장

  • Javascript를 통해서 HTML/CSS 자체를 동적으로 만드는 SPA(Single Page Application)이 주가 됨

  • CSR(Client Side Rendering) : 클라이언트(브라우저)에서 Javascript를 읽어 페이지를 렌더링(생성)하는 방식

    • Jascript를 통해 페이지를 불러오기 때문에, 첫 페이지의 로딩 시간이 느리다.

    • 동적으로 HTML의 내용을 채우기 때문에 검색 엔진으로 검색했을 때 제작한 웹사이트가 검색이 잘 안 되는 경우가 발생할 수 있다. ※ SEO(Search Engine Optimization)가 잘 안 된다

      • 검색엔진: 구글, 네이버 같은 애들 (검색어를 쳤을 때 HTML에 해당하는 단어가 있는지 찾아서 결과 반환)

    • 서버에 부담이 덜하다.

  • Frontend와 Backend의 역할 구분이 명확해짐

    • 2세대까지는 하나의 Server를 사용했지만 3세대부터 Frontend Server와 Backend Server로 나뉘기 시작함

    • Frontend Server에서 HTML/ CSS / JS를 가져옴

    • Backend Server에서 Data를 가져옴

4세대 웹

  • 1, 2세대의 SSR 방식과 3세대의 CSR 방식의 장점을 합치고자 하는 시도가 생김

  • SSR과 CSR의 장점을 모두 사용할 수 있는 형태의 여러 Framework가 나옴 (예를들어 Next.js)

SSRCSR
장점완성된 HTML 파일을 가져오기 때문에 첫 페이지의 로딩 시간이 빠르다
검색 엔진으로 검색했을 때 검색이 잘 된다.		필요한 부분만 동적으로 가져오기 때문에, 변경사항 혹은 나머지 페이지를 불러오는 시간이 빠르다.
서버에 부담이 덜하다.
단점처음부터 HTML을 만들어야하기 때문에 변경사항 혹은 나머지 페이지를 불러오는 시간이 느리다.
서버에 부담이 심하다.		Jascript를 통해 페이지를 불러오기 때문에, 첫 페이지의 로딩 시간이 느리다.
동적으로 HTML의 내용을 채우기 때문에, 검색 엔진으로 검색했을 때 웹사이트가 검색이 잘 안 될 수 있다. ※ SEO(Search Engine Optimization)가 잘 안 됨

  1. 클라이언트(브라우저)에서 Frontend server에 요청 보냄

  2. 아래 선택지 중 선택

    2-1. SEO가 필요없으면 Backend Server에서 미리 가져오지 않음

    2-2. SEO가 필요하면 Frontend Server는 필요한 데이터를 Backend Server에서 미리 가져옴

  3. Frontend Server에서 클라이언트(브라우저)로 HTML / CSS / JS를 보냄

profile
황승현

0개의 댓글