(읽기 쉽고, 쉽게 표현하기 위해 경어를 사용한 점 양해부탁드립니다.)

Gatsby 블로그 준비 - 1 웹사이트의 발전과정

Gatsby를 알기전에 먼저 현재 이용하고 있는 웹사이트가 어떤 발전과정을 겪었는지 알아보자.

1세대 웹사이트(동적)

정적인 언어의 등장

초기 웹서버는 HTML(Hyper Text Mark-up Language)라는 마크업 언어를 사용한 문서를 아무런 꾸밈없이 클라이언트(유저)에게 전달해줌으로써 간단하고, 단순한 정보를 제공하기 위한 것이였다고 한다.(자세한 내용은 위 링크를 참고바람)

단순한 화면에 CSS(Cascading Style Sheet)라는 온갖 레이아웃과 디자인 정보를 HTML에 욱여넣다보니 디자인을 위한 문서로 전락했다고 합니다.(자세한 내용이 궁금하시다면 CSS링크를 확인부탁드림)

2세대 웹사이트(동적+정적)

동적인 언어의 등장으로 정적+동적인 사이트를 2세대 웹사이트라고 한다.

동적인 언어의 등장

CSS 이후 동적으로 컨텐츠를 바꾸고, 멀티미디어와 움직이는 이미지 등을 가능하게 하는 JavaScript와 PHP,C,Python 등의 프로그래밍 언어가 등장하면서 웹은 빠른속도로 발전하게 되었다. “동적”이란 서버와 클라이언트에게 서로 각기 다른 상황에서 적절한 정보가 보이고, 컨텐츠를 웹페이지나 앱상에 계속적으로 노출시키는 역할을 한다.(자바스크립트 언어를 배우기 위해 MDN에서 많이 검색했었고, 자바스크립트를 배우고자 한다면 꼭 참고해야 하는 사이트인 듯 하다.)

프론트엔드와 백엔드의 구별

자바스크립트가 주가 되어 HTML 생성부터 클라이언트가 보는 모든 부분을 구현해 웹사이트들이 전체적으로 동적으로 변화되었다.

그러면서 프론트엔드는 페이지 렌터링에 필요한 HTML,CSS,JavaScript파일을 전송하는 역할을 맡고, 백엔드는 필요한 데이터생성 및 전송을 담당하면서 역할이 분담되었다.

3세대 웹사이트(정적인 웹사이트)

3세대로 넘어오면서 벡앤드는 클라이언트(유저)와 지속적인 데이트를 전송하는 반면, 프론트엔드는 HTML과 CSS, JavaScript를 한번만 보내주는 형식으로 바뀌었고, 동적과 정적인 웹사이트에서 정적인 웹사이트로 발전하고 있다.동적 웹사이트도 분명 장점은 있지만, 정적 웹사이트의 장점을 꼽자면, i)동적인 웹사이트보다 더 빠르고, ii)비용이 적게 든다고 한다.

기본적인 웹사이트의 발전과정을 알아보았고, 다음은 3세대(?)언어인 리액트를 이용한 GatsbyJS를 직접 작성 및 관리하기 위해 필수로 알아야할 언어인 마크다운 언어에 대해 포스팅해보겠다.