시대가 지나면서 사용자들이 원하는 기능이 많아지고 웹이 발전함에 따라 프론트엔드 기술에도 변화가 일어났다.
| 1세대 | 2세대 | 3세대 |
| HTML / CSS / JavaScript | jQuery | Angular, Vue, React |
| 기본적인 HTML, CSS, JavaScript로 DOM을 조작하고 이벤트를 발생시킨다. | JavaScript에서 빈번히 사용되는 기능들을 모아 사용이 가능하지만 결국 DOM을 조작한다는 행위에서 벗어나지 못해 한계에 도달한다. | jQuery 한계 이후 패러다임을 완전히 바꾼 새로운 프레임워크 |
이 중 Angular, Vue, React 각각의 의미와 차이에 대해 살펴보겠다.
1. Angular
: 2010년 Google에서 개발한 프레임워크
: TypeScript 기반으로 매우 안정적이고 잘 설계된 구조 내에서 개발이 가능하다.
: 다양한 기능이 내장되어 있지만 무겁고 배우기 어렵다.
: 양방향 바인딩으로 Model과 View가 연결되어있어 데이터 값이 한쪽에서 변화하면 다른 쪽에서도 바로 업데이트가 진행된다.
2. Vue
: 2014년 Evan You라는 개인에 의해 만들어진 프레임워크
: Angular와 마찬가지로 Vue만의 문법과 규칙이 있다.
: Angular, React가 개발된 후 장점을 가지고 만들었기 때문에 문법과 규칙을 쉽게 만들어 비교적 러닝 커브가 낮다.
: 프레임워크로써 다양한 기능이 내장되어 있다.
: 단방향 / 양방향 바인딩
3. React
: 2013년 Facebook에서 개발한 라이브러리
: 프레임워크인 Angular, Vue와 달리 React는 라이브러리다.
: view만을 담당하는 라이브러리로 내장되어있는 기능이 부족해 third-party 라이브러리(react-router-dom, redux)를 함께 사용한다.
: 단방향 데이터 바인딩으로 데이터 변화에 따른 성능 저하 없이 DOM 객체의 갱신이 가능하며 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다.
*프레임워크, 라이브러리*
프레임워크
: 애플리케이션 개발 시 필수적인 기능들을 위한 뼈대를 제공한다.
: 모든 환경과 도구를 제공해주지만 프레임워크가 지원해 주는 기능을 따라 작업해야 하므로 기술 활용을 위한 러닝커브가 높다.
: ex) Java개발 => Spring 프레임워크, Python개발 => Django, Android앱개발 => Android
라이브러리
: 개발에 필요한 것들을 미리 구현해놓은 도구로 재사용이 가능한 기능을 미리 구현해 놓고 필요한 곳에서 호출하여 사용 가능하도록 만들어진 집합
: 목적을 위한 하나의 도구를 제공받는 것으로 원하는 기능을 선택할 수 있지만 다른 도구들을 기본적으로 제공하고 있지 않아 스스로 선택해서 조합해야 한다.
참고
[1] 프레임워크(Framework)와 라이브러리(Library)의 차이 : https://code-lab1.tistory.com/284
[2] React와 Vue, Angular의 차이점 : https://daojiong.tistory.com/66
[3] React란 무엇인가? : https://hymndev.tistory.com/45