F/E Frameworks

Framework란?

소프트웨어에서는...?

• 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용 가능하게끔 일련의 협업화된 형태로 클래스를 제공하는 것
• 제어역전이 있는 대규모의 라이브러리
  • 제어역전(IoC Inversion of Control)이란 ? ➡️ 원래 개발자가 제어해야하는 코드들을 프레임워크가 제어하는 것
• 확장 가능한 설계의 기반이 되는 부분을 기술한 코드를 가지는 것

➡️ 더 쉽게 예를 들어보겠습니다
🚘 자동차를 만들 때 자동차의 뼈대가 Framework, 자동차의 바퀴, 엔진, 서스펜션 등 부품들은 Library!

Framework의 종류

우리가 들어봤고 회사에서 쓰고 있는 프레임워크들!
🍃JAVA - Spring (Spring boot)
💅CSS - Bootstrap
🖥PHP - Laravel

Front-end Frameworks

• React (React.js)
• Vue.js
• Angular
• Preact
• Ember
• Svelte 등...

너무 많기 때문에 stateofjs의 2019년 설문 결과 가장 사용률과 인지율이 높은 세 가지만 살펴보겠습니다. ⤵️

Front-end Frameworks

특징

1. React (사실 프레임워크가 아니고 라이브러리지만요 🤫)

   A JavaScript library for building user interfaces

📍페이스북에서 개발하고 페이스북, 인스타그램 등에서 사용 중
📍단방향 바인딩 (Model이 변동되면 View도 변동되나, View가 변동되면 Model은 변동되지 않는다)
📍JS와 XML을 합한 JSX 사용
📍Virtual DOM 사용
📍컴포넌트 기반

2. Vue.js

   The Progressive JavaScript Framework

📍구글 엔지니어 Evan You가 개발하고 알리바바, 깃랩 등에서 사용 중
📍Angluar에서 핵심적인 요소들이 가진 장점을 기반으로 가볍게 제작되었다
📍MVVM 패턴 사용 (ViewModel에 해당된다)
📍양방향 바인딩
📍Virtual DOM 사용
📍HTML 마크업 사용

3. Angluar

   One framework. Mobile & desktop.

📍구글에서 개발하고 구글, 유튜브 등에서 사용 중
📍TypeScript를 주 언어로 사용하길 권고
📍MVC 패턴 사용
📍템플릿과 프로퍼티, 어플리케이션 로직을 합한 컴포넌트 기반
📍양방향 바인딩

장단점

코드를 봅시다!

1. React의 기본 생김새
   
2. Vue.js의 기본 생김새
   
3. Angular의 기본 생김새
   

 

ToDo List가 있고 아이템을 추가하고 싶다고 해봅시다
1. React

2. Vue.js

3. Angular

저는요... 🤔

세 가지 모두 각자의 장단점과 특징이 있어 기능을 충분히 익히고 사용하면 프론트 화면을 구성하고 API response 데이터에 따라 뷰를 변경시키는 시간이 단축되며 성능이 좋아질 수도 있을 것 같습니다. 하지만 현재 개발일정이 빡빡하고 처음부터 견고하게 컴포넌트를 설계하고 분리해 작업하기보단 아웃풋이 먼저 나와야하며 SPA로 설계하지 않는 저희 프로젝트의 특성상 새롭게 프레임워크 사용법을 익히고 어떤 라이브러리와 조합하며 어떤 형태로 통일시켜 작성할지에 대해 결정하고 사용에 돌입하는데까지는 시간적 무리가 조금 있다고 생각됩니다.

---

참고
https://devtimothy.tistory.com/93
https://www.samsungsds.com/global/ko/support/insights/frameworks.html
https://wickies.tistory.com/120