6 min read

웹의 역사

HTML: CERN(그곳)에서 팀 버너스 리가 WWW를 만들면서 HTTP와 함께 제안한 개념. 태그 기반의 마크업 언어로 쓰였고 지금도 그럼. '웹 문서'와 '하이퍼링크' 라는 개념이 이 때부터 생김.

CSS: HTML의 태그에 원하는 스타일을 부여하기 위하여 HTML이 공개된 조금 후에 제안된 개념. 각 HTML 태그, 또는 특정 attribute를 가진 태그에 원하는 스타일을 부여할 수 있음.

JavaScript: 최초의 웹 브라우저인 Mosaic를 만든 닝겐들이 더 고급 기능이 있는 브라우저를 만들고 싶어했고 그 결과물이 Netscape임. 그 때는 LiveScript라고 불렸는데, 자바의 인기에 편승하기 위해 이름을 JavaScript라고 조금 후에 바꿔버림. 그런데 Netscape가 뜨는걸 보고 옆에서 윈도우 깎던 마이크로소프트가 떡밥을 물어버림.

Document Object Model(DOM): 마이크로소프트가 WWW 코인을 문 후 Internet Explorer를 만들어서 윈도우에 슬쩍 끼워넣게 됨. 윈도우를 쓰던 닝겐들은 그냥 깔려있으니깐 IE를 쓰게 되고, 그 순간부터 웹 생태계는 급격히 MS쪽으로 기울게 됨. 이 때 MS가 JScript라는 JavaScript와 비슷한 역할을 하는데 쌩판 다른 언어를 끼워넣었고, 두 브라우저 진영(IE, Netscape)은 서로 HTML 태그를 직접 조작할 수 있는 DOM이라는 기능을 경쟁적으로 추가하게 됨.

XMLHttpRequest(XHR): 웹 생태계가 MS쪽으로 완전히 기울어진 후 MS는 웹 브라우저 만드는게 돈이 안 된다고 판단했는지 IE6을 만들고 한동안 개발에 손을 떼게 됨. 근데 IE6은 버그가 상당히 많고, (그 때 당시의) 웹 표준도 잘 지키지 않아서 웹 개발자들은 IE6의 특성과 버그에 맞춰진 웹 개발을 하게 되었음. 그 때부터 웹의 암흑기가 시작이 됨. 웹으로 돈을 벌던 구글은 MS가 하는 꼬라지를 참다 못해 머리를 굴리다가, 자체 브라우저(Chrome)와 JavaScript 런타임을 만들기 시작함. 구글은 동시에 웹 브라우저에서 페이지를 새로고침하지 않고 정보를 가져오거나 수정할 수 있는 방법이 없나 짱구를 굴리기 시작했는데, XMLHttpRequest라는 MS가 만들고 버린 기술을 찾아 날름 주워먹고 자기네 홈페이지에 적용하게 됨.

AJAX(Async JavaScript And XML): 구글이 관짝에서 꺼내 쓴 XHR를 기반으로 한 '페이지의 새로고침 & 하이퍼링크 transition 없이 데이터를 조회 / 수정할 수 있는 개념 및 기술' 전반을 뜻하는 단어.

jQuery: 위에서 언급된 DOM 및 AJAX 등을 쉽게 사용해줄 수 있도록 여러 함수나 툴을 제공해주는 프로그래밍 라이브러리.

Angular.js: 구글은 'AJAX와 DOM을 조금 더 이용하면 웹 브라우저 상에서 실제 프로그램과 비슷한 기능을 만들 수 있지 않을까?' 라는 의구심을 품고, 웹 애플리케이션이라는 개념을 제정한 후 이것저것 만들기 시작함. 마침 이 때(2012년 즈음) Chrome 브라우저가 IE보다 훨씬 빠르다는 사실을 여기저기서 듣고 온 사람들이 슬슬 Chrome 브라우저를 사용하기 시작함. 사람들이 Chrome 브라우저의 빠른 속도와 폭넓은 기능과 눈 돌아가는 구글이 만든 웹 애플리케이션들에 꽂히게 되고, HTML5라는 이름 안에 웹에 이것저것 기능들을 넣기 시작함. 구글이 어느정도 자기들이 쓸 웹 페이지를 만든 후, 이 웹 페이지를 빠르게 만들 수 있는 프레임워크를 공개하였는데 이게 Angular.js임. MVC 패턴이 적용되어서 웹 서버 프로그래밍과 비슷한 관점으로 접근할 수 있고, 구글이 만들었다는 사실에 눈 돌아가서 인기가 생기기 시작함.

React: 비슷한 시기에 스마트폰이 생기면서 SNS라는 개념이 엄청 뜨게 되었고, 그 중심에는 Facebook이 있었음. Facebook은 그 때 당시 웹 좀 잘 안다는 개발자들을 싹 다 긁어가서 웹 페이지에 아주아주아주 많은 데이터를 쳐 넣어도 웹 페이지가 버벅거리지 않도록 많은 최적화를 해둔 라이브러리를 만들고, 이를 Facebook 사이트에 적용함. 그래서 Facebook의 뉴스피드는 아무리 내려도 느리거나 버벅거리지 않게 되었고 사람들은 Facebook의 웹 다루는 기술력을 은연중에 인정하게 됨. Facebook은 2015년에 이 라이브러리를 React라는 이름으로 공개하게 되고, 사람들은 또 눈이 돌아가서 React를 이용해서 이것저것 해보려고 달려들기 시작함.

Flux(=Redux): React는 데이터가 있으면 이 데이터를 어떻게 웹 페이지 및 DOM에 알맞는 방식으로, 효과적으로 뿌려줄 수 있을까? 만을 구현한 라이브러리이기 때문에, 웹에서 데이터를 다루는 자체에 대해서는 다른 방법이 필요했음(Angular.js와 다른 점). 그래서 Facebook이 제안한게 Flux 패턴이고, 이걸 누가 낼름 해서 라이브러리로 구현한게 Redux.

Vue: Angular.js와 비슷한 컨셉으로 중국이 쓰려고 만든 프레임워크. HTML/CSS/JS를 .vue 파일 하나에 몰아넣고 쓸 수 있다는 특징이 있음.

Angular: 구글이 Angular.js의 여러 단점을 보다 못해 'Angular' 라는 이름으로 거의 프레임워크를 다시 만들어서 배포함. 컨셉이나 철학은 Angular.js와 비슷. TypeScript 기반이지만 JavaScript로도 쓸 수 있음. semver 기반이라 지금은 버전 10이 넘는걸로 기억.