#1_프론트엔드 관련 책 리뷰에서 본 댓글

#1_프론트엔드 관련 책 리뷰에서 본 댓글

예전에는 웹은 자바스크립트만 잘해도 문제없는 시대였습니다. 시대가 발전함에 있어 개발 프레임워크도 발전을 했습니다.

단일 페이지 웹 애플리케이션(SPA), 웹을 네이티브 애플리케이션과 같이 만들어 주는 프로그레시브 웹 애플리케이션(PWA) 등이 나왔습니다.

단일 페이지 웹 애플리케이션(SPA)은 4가지 특징을 가집니다.

첫째 브라우저 및 브라우저 랜더링 엔진 내부에서 동작하는 웹 애플리케이션 입니다.

둘째 브라우저에서 최초 접근한 URL을 기점으로 하여 다양한 화면으로의 이동을 제공하지만 기본적으로 최초의 HTML 안에서 사용자 인터페이스를 완결됩니다.

셋째 페이지 내의 사용자 인터페이스 변화에 따라 URL이 순차적으로 변화하며, 브라우저 히스토리를 통해 앞의 페이지로 거슬러 올라갈 수 있습니다.

넷째 페이지에서 필요로 하는 데이터는 서버로부터 API 등의 형태로 필요할 때마다 단편적으로 제공됩니다.

Ajax를 이용한 구글 맵스가 SPA의 대표적인 예라고 할 수 있습니다.

책에서는 요즘 Hot한 4가지의 프론트엔트를 소개 하고 있습니다.

Rect - 기술을 기반으로 모바일용 네이티브 애플리케이션을 개발하는 프레임워크 입니다.

자바스크립트로 코드를 작성하여도 애플리케이션 자체는 네이티브 컴포넌트를 이용하게 되므로 성능을 향상시킬수 있습니다.

사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해주는 프론트엔드 라이브러리입니다.

현재는 페이스북과 인스타그램의 개발자들이 유지보수를 담당하고 있는 오픈소스 소프트웨어 입니다.

Angular - Rect 달리 풀스택 프레임워크로 알려져 있습니다. 프론트엔트 개발에 필요한 데이터 바인딩, 비동기 통신, 라우팅, 테스트 등의 기능을 모두 갖추고 있습니다.

라이브러리 간의 상성이나 버전 차이 등을 신경쓰는 일 없이 곧바로 개발을 시작할 수 있습니다.

하이브리드 앱, 네이티브 앱을 조합하여 개발가능한 애플리케이션, 데스크롭 애플리케이션 등 다양한 환경을 지원하도록 설계되어 있습니다.

Angular 초장기 시절인 AngularJS시절에는 성능 문제가 발생하였습니다. 하지만 지금은 성능 문제와 관련하여 내부적으로 많은 개선이 있습니다.

데이터 바인등 및 조건 분기, 반복 처리를 포함하는 간단하고도 강력한 템플릿 문법을 갖추고 있어서 UI화면을 빠르게 구현 할 수 있습니다.

Vue.js - 사용자 인터페이스 구축을 목적으로 하는 프로그레시브 프레임워크 입니다. 오픈소스로 개발되었습니다.

HTML을 기반으로 한 템플릿 언어를 사용하였습니다.이 언어의 새로은 DSL이나 전처리 도구 등을 따로 배울 필요가 없어 학습 부담이 적습니다.

그리고 HTML로 작성된 기존 웹 애플리케이션을 마이그레이션하기 유리하다는 장점을 가지고 있습니다.

뚜렷한 특징 중 하나는 반응형 시스템입니다. 어떤 데이터를 변경했을 때 그 변화가 데이터의 흐름을 따라 전파되면서 관련된 데이터의 출력 등이 바뀌는 것을 의미합니다.

컴포넌트는 재사용 가능한 코드를 캡슐화 되어 있습니다. 코드를 재사용 가능한 독립된 부품으로 구성하면 애플리케이션의 규모가 커질수록 개발이나 관리, 수정이 쉬워집니다.

React Native - Rect로 모바일 애플리케이션을 개발할 수 있게 해주는 프레임워크입니다. 하나의 소스코드로 iOS/안드로이드 애플리케이션을 모두 개발할 수 있습니다.

이런 장점 때문에 요즘 스타업들이 React Native로 개발하는 경우가 많습니다.

속도감 있게 개발이 가능하면 높은 성능으로 개발이 가능합니다. 하나의 소스코드로 iOS/안드로이드 애플리케이션을 모두 개발 가능함으로 서로 다른 동작이 필요한 경우만 간단하게 분기처리를 이용해서 개발하면 상당한 분량의 코드를 공통으로 사용할 수 있습니다.

버전업을 따라가야 하는 단점을 가지고 있지만 웹 기술을 이용하여 빠르게 개발을 진행 할 수 있다는 큰 장점을 가지고 있어서 큰 애플리케이션을 개발하는데 적합한 프레임워크 입니다.

Rect, Angular, Vue.js, React Native 정의 및 활용예제를 활용하면 실무에 많은 도움이 될 것 입니다.

from http://jamimoon.tistory.com/14 by ccl(A) rewrite - 2021-04-08 13:26:41