냥냠
JavaScript의 역사 (JS 프레임워크의 역사) 본문
리액트를 공부하면서 Vue, Svelte, JQuery 등등의 여러 프레임워크에 대해서도 자연스레 알게 되었다.
하지만 정작 리액트를 공부하면서도 리액트로 개발하는 그 과정에만 몰두하고 리액트가 왜 생겼는지, 리액트의 장단점, 동작원리 등에 대해서는 설명하지 못하는 것 또한 알게 되었다.
그래서 오늘은 웹 프론트엔드, JavaScript 의 프레임워크의 역사에 대해 전체적으로 알아보고자 한다.
0. 탄생 배경
1993년, (Marc Andreessen이 설립한) Netscape는 UI요소가 더해진 Mosaic Web Brower가 시장에 나온 후 조금 더 UI요소를 추가하여 Netscape Navigator(NN)을 출시한다. 당시에는 HTML과 CSS를 이용해서 간단한 웹사이트를 만들 수 있었고 정적인 웹브라우저인 NN이 성장할 수 있었다.
이후 기존의 정적인 웹사이트에서 동적인 웹사이트를 만들기 위해 스트립트 언어를 추가하고자 하였고 그것이
현재의 JavaScript이다.
이 스크립트 언어를 이용해서 웹사이트를 만들게 되면 NN 브라우저가 그 언어를 이해하고 언어가 실행하고자 하는 것에 알맞게 DOM요소들을 조작하게 한다. (NN브라우저엔 스크립트 언어를 해석할 수 있는 인터프리터 기능을 추가해서 출시되었다.)
1. 자바스크립트의 탄생
JavaScript
-> 1995년에 웹 페이지에 동적인 기능을 추가하기 위해 사용되는 스크립트 언어로 개발되었다. *처음 이름은 LiveScript
NN브라우저에도 JS, JS Interpreter이 포함되어 출시되었다.
같은 해, Microsoft는 NN브라우저를 reverse engineering하여
자신들만의 기능을 넣어 수정한 뒤 JScript와 Internet Explorer(IE)를 출시하였다.
브라우저가 많아지고 , 개발자들은 모두 호환되는 사이트를 만들어야 했다.
이후 firefox 브라우저도 출시되면서 표준안의 필요성이 더 커졌지만 어떤 언어로 할지, 점유율이 누가 더 높은가 등의 경쟁이 심해지면서
표준안의 진행은 더뎌졌다.
*ECMAScript란 브라우저에서 동작하는 언어를 만들 때 엔진이 이해할 수 있도록 변수를 만드는 방법이나 함수 정의하는 방법 등을 정리한 문서이다.
이런 다양한 브라우저의 등장하면서 개발자들은 다른 브라우저의 구현사항을 신경쓰지 않아도 되게끔 jQuery, dojo 등의 라이브러리를 사용하게 되었다.
비로소 2008년 구글에서 chrome브라우저가 출시되면서 위기감을 느낀 다른 브라우저들의 협업이 원만해지면서
표준안인 ECMAScript 5, 6이 완성되면서 JS도 어느정도 성숙한 언어로 성장하였다.
JS가 다른 라이브러리 도움 없이도 충분히 웹을 구현할 수 있게 되었지만 그래도 불편한 부분들이 많았을 것이다.
js 출시 초기부터 인정받지 못하였지만 웹 개발을 위해서는 js밖에 없었기 때문에 이를 써야 하고 하지만 웹 산업의 발전으로 웹 가치가 아주 상승하게 되면서 다양한 프레임워크와 라이브러리가 출시되었다.
앞서 말했던 jQuery도 js의 라이브러리 중 하나인 것처럼 말이다.
이제부터 설명할 것은 JavaScript 프레임워크들의 역사이다.
- Angularjs
- React
- Vue
- Svelte
이 외에도 더 많은 프레임워크가 있지만 3대장과 최근 알게 된 스벨트 중심으로 설명하고자 한다.
2. Angularjs
가장 먼저 주목을 받았던 프레임워크는 Angularjs이다. (2013 - google)
MVC, MVVM 구조 모두 제공
**앵귤러는 아예 MVW (Model-View-Whatever) 혹은 MV* 로 불러달라고 하였다. 뭐가 되었든 Model과 View 사이에서 무언가를 할테니까.
MVC, Model, View, Controller 영역으로 나눈 아키텍처
MVVM, Model-View-View-Model
컨트롤러의 기능이 선언적인 방식으로 View를 그리는 Model만 다루게 된 아키텍처
MVVM의 시초는 Knockoutjs 였고
구글에서 앵귤러를 출시하면서 MVC 패러다임에서 MVVM 패러다임으로 바뀌기 시작했다.
패러다임이 바뀌면서 웹 프론트엔드의 생산성이 아주 높아졌다.
*기존의 jQuery의 MVC 방식은 데이터를 찾아서 데이터를 바꾸고 데이터를 수정하고 이벤트를 연결하고 이벤트를 수정하는 등의 반복적인 패턴이 나타나며 전체 html를 갱신하면 번쩍이는 화면이 나오니 수정할 부분을 하나하나 찾아서 수정하는 등의 불편함을 갖고 있었다.
코드에서 DOM을 조작하는 것이 아니라 템플릿과 바인딩을 통한 선언적인 방식으로 변하여 개발자는 화면에 그려져야할 데이터만 만들어서 프레임워크에 전달해주면 된다. 이후 페이지단위가 아닌 페이지 안의 모듈 단위로 구성하여 더 작은 단위로 재사용을 가능하게 하는 컴포넌트 패턴으로 발전하면서 생산성이 훨신 극대화된 것이다.
Angularjs에는 module, http, router, formater 등 다양한 기능을 제공하고 그에 따라 많은 개념들이 있다.
주요한 특징으로는
- Js 작성 코드를 줄여준다.
- 양방향 데이터 바인딩이 가능하다.
- 개발 영역을 명확하게 분리해준다. ( html, css , 로직 )
- 개념 : model, view, controller, scope, template, directives, expression, filter, data binding, modules ...
*이후 Angular를 다시 출시한 것이 아마 현재 쓰이는 앵귤러이다. - ts 기반
3. React
: 사용자 인터페이스(UI)를 효율적으로 구축하기 위한 자바스크립트 라이브러리
->react라는 생태계 안에서 그에 따른 문법에 맞게 작성하고 틀 안에서 동작하는 것으로 본다면 프레임워크로도 볼 수 있다.
리액트의 탄생 배경?
: 웹페이지가 점점 더 커지고 동적으로 복잡해지면서 js 파일을 관리하기 힘들어졌고 많은 상태를 관리해야 하는 부담이 생기기 시작했다.
많은 페이지에서 서로 이동할 때마다 html, css, js 파일을 서버와 주고 받아야 하기에 속도가 느려지기도 했다.
이 때 나온 개념이 SPA이다.
Single Page Application , Html, css, js 파일을 최초 1회만 로드하고, 이후엔 js 파일을 통해 DOM, 필요한 HTML 파일을 조작하는 방식이다. 특정 영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념.
리액트의 주요 특징 및 개념
- Virtual DOM
- 컴포넌트 기반 아키텍쳐
- 단일 방향의 데이터 흐름
- 핵심 라이브러리만을 제공하고 Redux, Router 등은 선택적으로 통합할 수 있는 유연성
- jsx : js에서 html을 만들어야 하는 jsx 문법
리액트는 초반에 클래스 컴포넌트 기반으로 불편함이 있었지만 이후 hooks의 도입으로 함수형 컴포넌트 기반으로
상태, 라이프 사이클 등을 쉽게 관리할 수 있게 되었다.
Node.js가 주류 백엔드언어가 되면서 js로 백&프론트를 하나의 언어로 개발할 수 있게 되었다. react는 Node.js와 잘 통합될 수 있었고
SSR이 Node.js환경에서 효과적으로 구현되기도 하여 SEO(검색엔진최적화) 문제를 해결하는 방법이 될 수 있었다.
(react는 CSR 기반으로 만들어졌다) -> ssr vs csr 도 정리해봐야겠다
이런 이유들로 웹 프론트엔드 분야에서 현재까지 선두에 서게 되었다.
4. Vue
앵귤러2가 나온다는 소식만 들리면서 Vue js가 등장했다.
Vue.js는 직관적인 문법과 가벼운 크기로 주목을 받았는데 이는 SPA 개발에 적합했다.
Angularjs 와 유사한 점이 많았고 단점을 개선해서 출시되었기 때문에 기존 앵귤러 사용자들은 vue를 많이 사용했다.
주요 특징
- angular 보다 가벼운 프레임워크
- virtual DOM을 사용하여 렌더링 성능을 향상시킴
- 양방향 데이터 바인딩
- 컴포넌트 기반 아키텍처
기존 html과 유사한 Template 문법을 사용하고 자체로 다양한 기능을 제공해준다.
이렇듯 angularjs와 react의 장점을 잘 가져와 혼합한 형태로 많은 사람들이 사용하였다.
이후 angular2 , polymer 등 많은 프레임워크가 등장하였지만 현재까지도 react와 vue 가 자리를 잡은 모습을 볼 수 있다.
5. Svelte
사실 스벨트에 대해 알고 싶어서 시작한 글인데 앞의 내용이 길어지다보니 다음 내용으로 넘기겠다 ..
'Web' 카테고리의 다른 글
| HTML & CSS 기초 - css (2) | 2024.10.11 |
|---|---|
| HTML & CSS 기초 - html (3) | 2024.10.10 |
