프론트엔드의 프레임워크

framework란:

개요:

프레임워크는 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것이다.

라이브러리와의 차이점:

라이브러리와 프레임워크를 헷갈리는 경우도 있는데, 보통 프레임워크라고 하면 클래스와 라이브러리가 합쳐진 형태라고 볼 수 있다.

메소드 및 클래스화, 즉 모듈화를 하는 이유 중 하나가 재사용성인데, 프레임워크는 이 재사용성을 큰 그룹 단위로 묶어주었다고 보면 된다. 재사용 가능한 수많은 클래스들과 라이브러리들을 융합한 채로 처음부터 제공해 주기 때문에, 여러 개의 표준을 만들지 않아도 돼서 개발자의 피곤함을 덜어준다.

 

front-end framework:

1.React.js

React.js 란:

React.js는 동적 사용자 인터페이스를 만들기 위해 Facebook에서 2011 년에 만든 오픈 소스 JavaScript 라이브러리입니다. React는 Front-End 개발을 위한 HTML 요소의 생성을 허용하는 JavaScript 및 JSX를 기반으로 합니다. 정기적으로 데이터가 변경될 수 있는 큰 웹어플리케이션 구축에 적합합니다.

 

장점:

1)배우기 쉽다. React는 구문이 간편하여 배우기 훨씬 쉽다. 엔지니어들은 HTML작성 기술만 기억하면 된다. Angular처럼 TypeScript를 깊게 공부할 필요가 없다.

 

2)높은 수준의 유연성과 최대의 응답성

 

3)HTML, XHTML 또는 XML 형식의 문서를 웹 응용 프로그램의 여러 요소를 구문 분석하는 동안 웹 브라우저에서 더 잘 받아 들일 수있는 트리로 배열 할 수있게 해주는 가상 DOM (문서 객체 모델)입니다.

 

4)ReactJS는 ES6 / 7과 결합되어 고부하 작업을 손쉽게 처리 할 수 ​​있습니다.

 

5)하위 데이터 바인딩 - 이러한 종류의 데이터 흐름을 사용하면 하위 요소가 상위 데이터에 영향을 미치지 않습니다.

 

6)전 세계의 개발자들의 공헌에 따라 일상적인 업데이트 및 개선 사항을 많이받는 100 % 오픈 소스 자바 스크립트 라이브러리입니다.

 

7)사용자 측면에서 수행하는 데이터를 서버 측에서 동시에 쉽게 표현할 수 있기 때문에 절대적으로 가볍습니다.

 

8)버전 간 마이그레이션은 일반적으로 페이스 북이 프로세스의 대부분을 자동화하는 "codemods"를 제공하여 매우 쉽습니다.

 

단점:

1)공식 문서가 부족합니다 - ReactJS의 초고속 개발은 적절한 문서화를 위한 자리를 남기지 않았고 많은 개발자들이 체계적 접근없이 개별적으로 기여하기 때문에 다소 혼란스럽습니다.

 

2)React는 지침이 없기때문에 개발자가 때로는 선택의 폭이 너무 넓습니다.

ReactJS는 MVC 프레임 워크에 사용자 인터페이스를 통합하는 방법에 대한 깊은 지식이 필요합니다.

 

3)React JS를 사용하는 회사 : Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft 등

 

 

 

 

2.Vue.js

Vue.js는 2013년에 출시된 JavaScript 프레임워크로 적응력이 뛰어난 사용자 인터페이스 및 정교한 단일 페이지 응용 프로그램을 만드는 데 적합합니다.

장점:

1)권한이 부여 된 HTML. 즉, Vue.js에는 Angular와 유사한 특성이 많이 있으며 이는 다양한 구성 요소를 사용하여 HTML 블록 처리를 최적화하는 데 도움이 될 수 있습니다.

 

2)자세한 문서. Vue.js는 개발자를위한 학습 곡선을 고정시키고 HTML 및 JavaScript에 대한 기본 지식만을 사용하여 앱을 개발하는 데 많은 시간을 절약 할 수있는 매우 정확적인 문서를 제공합니다.

 

3)적응성. 디자인과 아키텍처면에서 Angular and React와 유사하기 때문에 다른 프레임 워크에서 Vue.js 로의 신속한 전환 기간을 제공합니다.

 

4)끝내주는 통합. Vue.js는 단일 페이지 응용 프로그램을 구축하고 응용 프로그램보다 어려운 웹 인터페이스를 구성하는 데 사용할 수 있습니다. 가장 중요한 것은 전체 시스템에 부정적인 영향을 미치지 않으면서 기존 인프라에 쉽게 통합 할 수있는 상호적인 부분이 작다는 것입니다. (객체지향적이라는 말이 아닐지.?)

 

5)대규모 확장. Vue.js의 단순한 구조는 추가적인 시간 투자 없이 만들 수있는 꽤 큰 재사용 가능한 템플릿을 개발하는 데 도움이 될 수 있습니다.

 

6)작은 크기. Vue.js는 속도와 유연성을 유지하면서 약 20KB의 무게를 가질 수 있으므로 다른 프레임 워크와 비교하여 훨씬 더 우수한 성능을 제공합니다.

 

단점:

1)자원 부족. Vue.js는 여전히 React 또는 Angular와 비교할 때 꽤 작은 시장 점유율을 가지고 있습니다. 즉, 이 프레임워크에서 지식 공유가 아직 시작 단계에 있음을 의미합니다.

 

2)과도한 유연성의 위험. 경우에 따라 Vue.js는 거대한 프로젝트에 통합하는 동안 문제가있을 수 있으며 가능한 솔루션에 대한 경험이 아직 없지만 곧 제공 될 것입니다.

 

3)중국어 기반입니다. Vue.js가 중국어 기반이기 때문에 많은 요소와 설명이 중국어로 계속 제공됩니다. 이것은 개발의 일부 단계에서 부분적인 복잡성을 초래하지만, 점점 더 많은 자료가 영어로 번역됩니다.

Vue.js를 사용하는 회사 : Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters.

 

 

 

 

3.React Native

장점:

1) ios,android 동시개발 가능

하나의 코드로 ios android가 만들어 집니다. 또한 view부분을 html,css로 변환 후 몇몇 로직들만 수정하면 web으로 그대로 가져올 수 있습니다.

2)개발 속도가 빠릅니다.

3)OTA(실시간 배포)가 가능합니다.

기능 추가, 버그 수정, 디자인이 바뀌어도 앱 배포를 위한 심사를 거치지 않습니다. 따라서 유저는 언제나 최신 상태의 앱을 경험할 수 있습니다.

 

단점:

1)성능이 부족합니다.

swift와 java등의 native를 따라갈 수 없습니다.

 

 

 

 

4.Angular.js

장점:

1)DOM 제어 기반 방식보다 적은 양의 코드로 개발 가능

 

2)구조화된 코드로 인해 향후 유지보수 비용 감소

 

3)코드(모듈) 간의 의존성이 적어 유연성과 재사용성이 증가

 

4)양방향 데이터 바인딩으로 인해 뷰의 갱신이 자동으로 이뤄지므로 뷰를 업데이트하는 등의 번거로운 작업이 감소하고 모델(데이터)에 더욱 집중 가능

 

단점:

1)양방향 데이터 바인딩에서의 성능 저하(dirty-checking) 문제

 

2)DOM 제어 방식이 아니므로, DOM의 세밀한 제어가 필요한 경우는 적합하지 앟음

 

3)간단한 기능 구현이 아니라면 어느정도의 학습 비용(또는 기존 개발 방식에서의 인식 전환)은 필요

 

4)불필요할 수도 있는 이벤트들의 자동 바인딩

 

*이제 개발과 관련된 공부를 시작하는 단계여서 책도 구입하지 못하여 여러 블로그와 나무위키 위키백과 등과 같은 것들을 이용하여 공부중입니다. 더 공부하고 나중에는 책도 직접 빌리거나 구매하여 책으로 공부한 내용도 정리하여 올릴 수 있도록 하겠습니다.

출처

https://graykim.tistory.com/205 [一以貫之]

 

https://brunch.co.kr/@hee072794/112

 

https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d

 

https://brunch.co.kr/@kmongdev/11

 

https://lemontia.tistory.com/394 [안녕하세요]

 

내일은 백엔드의 프레임 워크에 대하여 공부하고 올리겠습니다.