자바스크립트 라이브러리와 프레임워크

자바스크립트 라이브러리와 프레임워크

자바스크립트 라이브러리와 프레임워크 필요성

• 웹 애플리케이션에서 유저 인터페이스 동적 처리 시 각 DOM 요소 작업 필요
• getElementById()로 찾아와서 이벤트 처리하고 코드 작성
• 프로젝트가 커지고 인터페이스 다양해짐
• 이러한 프로젝트를 관리하려면 많은 DOM 요소나 코드를 관리하고 정리하는 일이 어려워짐
• 그래서 사용자 인터페이스에만 집중할 수 있는 라이브러리 또는 프레임워크 필요
• 많은 라이브러리나 프레임워크 만들어지고 사용되면 생산성과 유지보수 많이 향상
• 대표적인 자바스크립트 라이브러리 / 프레임워크
  • Angular / React / Vue.js

프레임워크와 라이브러리 차이점

프레임워크

• 뼈대, 기반 구조를 의미. 제어의 역전
• 여러 클래스나 컴포넌트로 구성되어 있고 작업하는 방법이 정의되어 있음

라이브러리

• 활용 가능한 도구의 집합
• 사용자가 정의한 클래스에서 호출해서 사용

프레임워크 Vs. 라이브러리

• 제어권이 누구에게 있느냐
  • 라이브러리 : 사용자(개발자)가 주도적으로 호출해서 사용
  • 프레임워크 : 제어권이 프레임워크에 있어서, 정해진 틀 안에서 코드를 작성해야 함

Angular (앵귤러)

• SPA(Single Page Application) 개발을 위한 구글의 클라이언트 측 자바스크립트 프레임워크
• 많은 기능이 내장되어 있음
• 타입 스크립트 사용 기본
  • 자바스크립트 기반(자바스크립트의 상위 집합인 타입 스크립트를 기반으로 함)
• MVC 프레임워크를 이용해서 잘 설계되고 구조화된 웹 애플리케이션을 쉽게 구현할 수 있는 프레임워크

SPA(Single Page Application)

: 웹 서비스를 요청할 때마다 서버로부터 페이지 전체를 호출하는 방식이 아니라, 최초 한 번만 페이지 전체를 로딩하고 이후부터는 변경된 데이터만 호출하는 방식의 애플리케이션

Angular 버전

• AngularJS : Angular 1.x 버전
  • JavaScript 위주
• Angular : Angular 2.x 이상 버전 (현재 버전 : 12)
  • JS가 빠짐 : JavaScript에 국한되지 않는 새로운 프레임워크 제공

React

• UI를 집중적으로 잘 만들기 위해서 페이스북(Meta)에서 만든 자바스크립트 라이브러리
• 컴포넌트에 집중되어 있는 라이브러리
• Angular와 달리 뷰에만 집중하고 나머지는 써드파티 라이브러리 필요로 함
• 공식 라이브러리 개념이 없으며, 여러 가지 솔루션 사용
• 생태계가 넓고 활성화 되어있음
• React 사용 기업 많음

React 특징

• 제일 먼저 가상 돔을 성공적으로 사용
• 이후 많은 라이브러리에서 가상 돔 개념 채택
• 생태계 조성 (가치 사슬, 협력 관계)
  • 다양한 생태계를 가지고 있어서 좋은 라이브러리들이 많이 만들어지고 있음
• 전 세계적으로 많은 기업에서 사용
  • 한 번 사용하면 계속 사용함
• 사용 / 인기 / 선호도 조사 (2020년 jetBrains사)
  • React > Express > Vue.js > Angular ...

Virtual Dom (가상 돔)

: DOM 기반의 브라우저로 데이터가 변경될 때마다 페이지에서 새로운 뷰를 만들어 전체 DOM을 새로 넣기 때문에 성능상 문제가 생김

해결책 : 변화가 있을 때마다 실제 DOM에 변경된 내용을 넣는 것이 아니라, 자바스크립트로 만들어진 가상 돔에 한 번 렌더링하고 기존의 돔과 비교해서 변경된 것만 update

컴포넌트 (Component)

• 동작 가능한 하나의 부품 개념
• 역할
  • 애플리케이션의 화면을 구성하는 뷰(View)를 생성하고 관리
  • 여러 컴포넌트를 조립하여 하나의 완성된 애플리케이션 생성
• 잘게 나누어진 컴포넌트 모듈을 조합해서 애플리케이션을 개발하는 오늘날의 개발 접근 방법 (Web Modularity / 컴포넌트 기반 개발 ) - React가 보편화 시킴

Vue

• Angular와 React의 장점 포함
• CDN 방식으로 불러와서 사용
• 공식 라우터와 상태관리 라이브러리 존재
• Angular처럼 디렉티브 기능이 있으며, React처럼 가상 돔(Virtual DOM) 기반 컴포넌트가 있음
  • 디렉티브 : DOM을 통해 HTML의 태그에게 기능을 부여하거나 표현하는데 사용