Front-end Framework

※ Front-end : 사용자의 화면에 나타나는 웹 화면, 사용자와 직접 접촉하며 상호작용이 이뤄지는 영역

 

※ Framework

• 프로그램의 기초를 구축할 수 있는 코드의 집합, 프레임 워크가 제공하는 여러 기능들을 사용해서 빠르고 효율적으로 프로그램 구축 가능 
• 소프트 웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것 - '랄프 존슨'

 

웹 프레임 워크 등장 배경

1. HTML, CSS

2. JavaScript + JSP (java server pages) 언어를 이용해 동적인 웹 페이지를 만듦

3. Ajax를 이용한 single page application이 대두됨

4. 이후 1세대 AngularJs, Backbone.js → 2세대 React → 3세대 vue.js 등 여러 가지 웹 프레임워크가 등장

 

 

프레임워크의 장점

• 효율적
• Quality 향상
• 유지 보수성
• 보안

 

프레임워크의 단점

• 학습시간이 길다
• 제약 사항
• 기본 제공되는 기능만큼 프로젝트의 용량이 증가

 

 

프레임워크의 특징 (SPA vs MPA)

• SPA (Single Page Application)
  • 모든 정적 리소스를 최초 한 번에 다운로드
  • 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달받아서 페이지 갱신
  • = CSR (Client Side Rendering)
  • Angular, React, Vue
• MPA (Multiple Page Application)
  • 새로운 페이지를 요청할 때마다 정적 리소스(html, css, javascript)가 다운로드 = 매번 전체 페이지가 다시 렌더링
  • = SSR (Server Side Rendering)
  • 전통적인 웹 애플리케이션 개발 방식

* SEO (search engine optimization)

 

 

프레임 워크의 종류

• Angular (2010 - Google)
  • 1세대 프레임워크, SPA, 타입스크립트
  • 완전한 프레임워크, 철저한 MVC (...? 완전한데 다들 왜 안 써...? → syntax 복잡(모듈을 통한 임포트), 커뮤니티, 더 확실한 규칙)
  • 대규모 애플리케이션 개발에 보다 효과적
  • Angular CLI
  • Router, Forms, HTTP, Angular Animations 등 다양한 모듈 지원
  •  컴포넌트 기반 개발 중심
  • 양방향 데이터 바인딩 - 자체 실행 코드 내에 데이터 변화가 생기면 DOM 객체 전체를 렌더링 하거나, 데이터를 바꿔줌 (코드량은 적으나 성능이 감소되는 경우가 있음)
    • 데이터 바인딩 : 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법 = 화면에 보이는 데이터(View)와 브라우저 메모리의 데이터(Model)를 일치시키는 기법
• React (2013 - Facebook)
  • 2세대, SPA를 위한 JavaScript library
  • Third party 라이브러리
  • 컴포넌트 기반 개발 중심
  • Virtual DOM 이용
    • 기존의 MVC 프레임워크는 DOM 객체 자체에서 데이터 변화를 감지하고 DOM 객체를 수정하여 업데이트하기 때문에 성능 저하가 일어남. 따라서 가상의 DOM을 생성해 변경에 관련된 DOM 객체만 바꿔주는 알고리즘을 사용해 효율적으로 DOM을 갱신
  • JSX (JavaScript as XML)
  • 선언형 프로그래밍
  • 단방향 데이터 바인딩 - 데이터에 변화가 있으면 특정 함수를 실행해 DOM 객체를 갱신 ( 데이터 변화에 따른 성능 저하 없음, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉬움, 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 함)
• Vue.js (2014 - Google 직원 Evan You)
  • 3세대, 점진적 프레임워크
  • 컴포넌트 기반 개발 중심
  • Virtual DOM 이용
  • 단방향 데이터 바인딩 + 양방향 데이터 바인딩
  • 빠른 렌더링
  • UI 화면단 라이브러리
  • 낮은 러닝커브
• SVELTE(2019 - svelte)
• Flutter (2018 - Google)
  • 크로스 플랫폼 모바일 앱 개발 프레임워크
  • 신속한 개발