2022. 7. 28. 21:00ㆍIT/Concept
개념을 파악할 때 역사적 맥락에서 이해하면 핵심을 놓치지 않으며, 디테일을 가져갈 수 있고, 기억에 또한 오래 남는다. 그런 의미에서 웹과 프론트엔드의 역사를 살펴보고 이를 통해 미래를 더듬어 보자.
1. 초기의 웹, Web 1.0
1990년, 최초의 웹은 정보 제공이 목적이었다.
가상 공간에서 문서를 쉽게 제작하고, 하이퍼텍스트를 통해 문서와 문서를 연결하여 많은 사람들에게 문서가 공유될 수 있도록 하는 역할을 수행했다.
이후 1990년대 중반, CGI(Common Gate Interface) 통신이 가능해졌다. 유저들은 정보를 서버로 보내고 서버에서는 동적으로 페이지를 생성할 수 있게 되었다. PHP를 비롯해 여러 서버 스크립트 언어들이 탄생했다. 이 무렵, 서버와 통신하기 위한 간단한 조작이 클라이언트 사이드에서도 필요해졌고, 이를 위해 브라우저에서 구동되는 자바스크립트가 탄생하게된다. 문서의 규모가 커지면서 컨텐츠와 서식을 분리하고자 하는 움직임도 이맘때쯤 탄생했으며, 이로 인해 CSS가 등장한다.
2. Web 2.0
2000년 초 닷컴버블 이후, 웹 생태계가 재편된다. 이때부터 웹은 정적인 정보 공유 수단을 넘어 유저들과 다양한 인터렉션을 할 수 있는 도구로 주목받는다. 화려한 이미지와 에니메이션, 사운드가 사용되었고 지금은 사라진 Flash가 당연하게 사용되었다. 그러나 2007년, 애플이 아이폰에서 Flash의 퇴출을 결정하고 Flash는 점차 웹에서 자취를 감추게 되며, Flash의 대안이 될만한 웹에서의 동적 스크립트로 자바스크립트가 주목받게 된다.
3. 자바스크립트의 부상
자바스크립트가 주목받기 시작한 배경에 구글 이야기를 빠뜨릴 수가 없겠다. 압도적인 컴퓨터 OS 점유율을 보유한 마이크로소프트는 윈도우 OS에 인터넷 익스플로러 브라우저를 탑재해 유저들에게 제공했다. 구글은 여기서 영리하게 도전장을 던진다. 이미 기존의 컴퓨터 OS 시장에서 피터지는 싸움을 하는 대신, 웹을 일종의 OS처럼 사용하도록 플랫폼을 구축했다. 이때 구글이 그들의 핵심 도구로 선택한 언어가 바로 자바스크립트다.
구글은 웹에서도 디바이스 어플리케이션과 같은 사용자경험을 제공할 수 있도록, 자체적으로 V8 자바스크립트 엔진을 만들고 비동기적으로 화면을 동적 구성하는 방법 등을 도입하는 등 투자를 진행했다. 그렇게 만들어진 Google Maps는 자바스크립트에 대한 개발자들의 주목을 이끌어내는데 성공했다.
4. Rich Client 시대, 그리고 웹 프레임워크의 부상
그러나 여전히 문제가 있었으니, 자바스크립트만으로 요구되는 코드를 작성하는 난이도가 상당히 높았던 것이다. 때문에 이러한 복잡한 개발 난이도를 획기적으로 낮춰주는 도구, jQuery가 등장했다.
이후 클라이언트의 컴퓨팅 파워가 날이 갈수록 발전하고, 데스크탑, 모바일 등 클라이언트 다양화로 인해 소위 Rich Client의 시대가 도래했다. 이때 등장한 기업이 바로 페이스북, 현재 메타다. 구글이 그러했듯이, 페이스북 또한 그들의 플랫폼이 일종의 OS 역할을 수행할 수 있기를 바랐다. 그리고 거대한 페이스북 생태계를 지속적으로 보다 편리하게 유지보수하기 위해서 자바스크립트의 개발경험을 바꾸게 된다. 바로 JSX 기반의 React다. 이때부터 웹개발은 프론트엔드와 백엔드의 구분이 점점 명확해지게 된다.
5. 웹, 그리고 프론트엔드의 미래
이렇게 복잡한 코드를 관리할 수 있는 정리 기술이 등장하면서, UI는 rich client가 알아서 그리고 서버는 데이터만 응답을 하는 식으로 서비스가 개발되었다. 그리고 웹, 그리고 프론트엔드의 발전은 여기서 멈추지 않는다.
현재 클라우드가 보편화되고 데이터의 중요성이 부각되면서 이에 따른 프론트엔드의 역할 또한 중요해지고 있다.
1. 데이터를 다루기 위한 도구로써의 웹의 가치가 높아짐에 따라 기존 백엔드의 로직을 다루는 영역으로 프론트엔드의 역할이 확대되고 있다. 이와 더불어 개발자를 위한 개발처럼 백오피스적 개념이 보편화되는 중이다.
2. 또한 웹 기반 어플리케이션이 디바이스 기반 앱처럼 강력한 퍼포먼스를 보이도록 개발하는 프론트엔드 기술이 중요해지고 있다.
이제 웹은 '문서'가 아닌 '데이터'를 다루는 도구다. IoT의 발전과 Web 3.0의 대두, VR/AR의 보편화라는 시대적 흐름에 탑승하여 프론트엔드의 역할 비중은 앞으로도 점점 중요해지고 확대될 가능성이 높다.
더 자세히 알아보기
https://github.com/ManzDev/frontend-evolution
https://www.youtube.com/watch?v=Kzeog8yTFaE&ab_channel=freeCodeCamp.org
-학습을 진행하며 남기는 지식 포스팅-
-부족한 설명이 있다면 부디 조언 부탁드립니다-
이 포스팅은 쿠팡 파트너스 활동의 일환으로,
이에 따른 일정액의 수수료를 제공받습니다
'IT > Concept' 카테고리의 다른 글
| 자바스크립트의 this (2) | 2022.08.04 |
|---|---|
| var, let, const, 그리고 Hoisting (0) | 2022.08.01 |
| Computing Systems, 그리고 추상화 (0) | 2022.06.14 |
| Microservices Architecture 란? (0) | 2022.06.01 |
| React의 Higher-order Component란? (0) | 2022.05.06 |