Web Framework-2

Framework 종류와 특성

1. Angular

Frontend/Backend	Frontend
개발사	Google
발표 연도	2010
학습 난이도	높음
필요 환경	Node.js, npm
특성	- 컴포넌트 기반의 프레임워크 - SPA(Single Page Application)으로 데이터 전송량이 줄고 속도가 빨라짐 - 라우팅, HTTP 등 웹 개발에 필요한 대부분의 기능들이 내부적으로 포함되어 있다. 소소한 부분에서까지 제공하는 기능이 많기 때문에 그만큼 처음 접근 시 공부해야 할 양이 많다. - 빌드 후 결과물의 용량은 작으나, 처음 접근을 위해 필요한 모듈 등의 용량이 다른 프레임워크와 비교했을 때 큰 편이다. - 양방향 데이터 바인딩

 

* 컴포넌트 기반 : 컴포넌트 기반의 프레임워크는 레고 블록을 조립하듯이 각각의 컴포넌트로 나누어진 형식을 말한다. 컴포넌트 기반의 프레임워크를 사용함으로써 코드를 작은 단위로 쪼개어 관리하기 때문에 재사용성이 향상되고 유지 보수가 쉬워진다. 웹 페이지의 헤더, 사이드바, 버튼, 메뉴 등을 하나의 컴포넌트로 묶어서 관리할 수 있으며 특정 부분에 오류가 생겼을 때 해당 컴포넌트만 수정하여 사용할 수 있다.

 

* SPA(Single Page Application) : 페이지 리로드 시 서버로부터 완전한 새로운 페이지를 불러오는 것이 아니라 현재 페이지를 동적으로 다시 작성(변경된 부분만 렌더링) 함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다

 

* 데이터 바인딩 

양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것

단방향 데이터 바인딩 : 단방향 통신을 의미하며, 컴포넌트 간에 데이터를 전송할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로 전달하게끔 구조화되어있는 것

 

2. React

Frontend/Backend	Frontend
개발사	Facebook
발표 연도	2013
학습 난이도	낮음
필요 환경	Node.js, npm
특성	- 컴포넌트 기반의 프레임워크 - SPA(Single Page Application)으로 데이터 전송량이 줄고 속도가 빨라짐 - 개발에 필요한 모듈을 기본적으로 제공하지 않고, 라이브러리에 의존함 - 가상 DOM 이용. 변경사항을 추적하여 전체 트리의 다른 부분에 영향을 주지 않고, 매핑된 실제 DOM 상의 특정 요소만 업데이트할 수 있게 도와준다. - 메모리에 가상의 DOM을 저장하고, 데이터가 변경되면 전체 UI를 Virtual DOM에 그렸다가 이전의 Virtual DOM과 비교해 달라진 내용을 실제 DOM에 적용해 기존 DOM을 이용하는 방식보다 빠름 - 단방향 데이터 바인딩 - XML을 변형한 JSX 문법 권장 - Airbnb, Netfilx, Twitter, Evernote 등의 서비스들이 사용

 

* Virtual DOM : 페이지에 DOM을 많이 조작함으로써 나타나는 비효율을 줄이기 위해 나타난 개념이 Virtual DOM이다. 이는 가상에서 DOM의 복사본을 반들어 놓고 변화가 있을 시 해당 부분을 비교한 이후 수정된 내용만 실제 DOM에 반영하는 방식으로, 모든 DOM을 다시 계산하지 않으므로 렌더링 속도가 훨씬 빠르다. 일반적으로 Virtual DOM은 직접적으로 구현하기 어렵기 때문에 React나 Vue 등의 프론트엔드 프레임워크를 통해 페이지의 퍼포먼스를 높이는 데 도움을 받는다. 

 

3. Vue.js

Frontend/Backend	Frontend
개발사	Google 직원 Evan You
발표 연도	2014
학습 난이도	낮음
필요 환경	Node.js, npm
특성	- 컴포넌트 기반의 프레임워크 - SPA(Single Page Application)으로 데이터 전송량이 줄고 속도가 빨라짐 - 대기업이 아닌, 커뮤니티가 주도하는 프레임워크 - 라이브러리 크기가 작기 때문에 Angular, React에 비해서 사이즈가 제일 작음 - 개발환경 구성이 쉬움, CDN 링크 삽입만으로 이용할 수 있다. - Alibaba, GitLab 등의 서비스들이 사용

 

4. Spring

Frontend/Backend	Backend
개발사	Road Johnson
발표 연도	2004
학습 난이도	높음
필요 환경	JDK, Tomcat, MySQL
특성	- 우리나라의 전자정부 표준 프레임워크 기반 기술로 쓰임 - 경량 컨테이너로 Java 객체를 직접 관리한다. - AOP(Aspect Oriented Programming) 관점 지향 프로그래밍으로 관점에 따라 기능을 모듈화하여 코드 중복, 객체들 간의 복잡도 증가 문제를 해결하기 위한 개발 방안

 

5. Django

Frontend/Backend	Backend
개발사	Adrian Holovaty와 Simon Willison
발표 연도	2005
학습 난이도	낮음
필요 환경	Python
특성	- 개발자가 Concept에서 완성까지 빠르게 개발 가능하도록 간결하고 익히기 쉽다. - 보안성을 중요시하여 SQL injection, cross-site-scripting, clickjacking 등에서 개발자가 놓칠 수 있는 보안적 실수를 줄일 수 있도록 도와준다. - 빠르고 유연한 확장성

 

6. Express 

Frontend/Backend	Backend
개발사	TJ Holowaychuk
발표 연도	2010
학습 난이도	높음
필요 환경	Node.js, npm
특성	- Node.js 프레임워크 중 가장 일반적으로 사용 - 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크 - 이용자는 많지만, 속도가 느려 고성능을 요구하는 개발에 부적합 - 애플리케이션을 개발할 때 원하는 구성 요소를 추가하기 쉽도록 미들웨어 함수를 사용한다.

 

7. Flask

Frontend/Backend	Backend
개발사	Armin Ronacher
발표 연도	2010
학습 난이도	낮음
필요 환경	Python
특성	- 가볍고 단순하고 확장 가능한 프레임워크 - URL 라우팅, Template, Cookie, Debugger 및 개발서버 등의 기본 기능만 제공 - 기본 기능에 다양한 확장 모듈을 이용할 수 있는 구조 - Django에 비해 초보자에게 더 친숙한 프레임워크 이지만 대규모 프로젝트에는 적합하지 않음