Front-End 란?

베하~~~안녕하세요 이번주도 돌아온 BETTER MONDAY 팀입니다.

가을이 와서 날씨가 아주 좋습니다!! 맨날 시원한 가을이였으면 좋겠네요 ㅎㅎ

저번주에는 자바스크립트를 간단하게 만들어보았는데요! 이번주는 이 자바스크립트로 할 수 있는 프론트엔드에 대해 알아보도록 하겠습니다. 시작해볼까요? 그럼 슈우우우웃~~~!

---

Front-end

• 웹 사이트에서 사용자가 직접 상호작용하는 부분
• 사용자가 볼 수 있는 화면
• 사용자 인터페이스 User Interface

---

 

---

Front-end 프레임워크

• 웹 응용 프로그램에서 사용자 인증, 렌더링 페이지, 데이터베이스 연결, 프로필, 양식화된 정보 피드 등 중복된 기능들의 논리를 작성한 도구
• 애플리케이션의 구조를 달성하는 데 도움을 주어 구성 세부 사항보다 기능에 집중할 수 있도록 도와준다.
• 개발자가 코드를 작성하는 방법을 표준화하는 규칙이 있다.

---

프론트엔드 프레임워크 왜 사용해?

프레임워크 장점

• 신뢰성 표준화된 사전 패키지 프론트 엔드 기반은 널리 사용되며 자주 업데이되는 codebase를 제공한다. → 버그가 없고 브라우저/장치 전반에서 광범위하게 지원된다는 확신을 가질 수 있다.
• 빠른 개발/프로토타입 표준화되고 더 효율적이며 안정적인 솔루션과 함께 작성해야하는코드의 양을 줄이고 많은 작업을 수행하며 한 가지 문제를해결하기 위해 작성된 코드보다 더 유연하다.
• 일관된 접근 방식 프로젝트에 대한 표준 접근 방식을 권장하므로, 협업자가 사용자 정의 코드 해석에 대해 덜 걱정할 수 있다.
• 더 빠르고 즐거운 사용자 경험 클라이언트 측 라우팅과 같은 기능을 구현하여 웹 앱이 모바일 어플리케이션처럼 작동하도록 도울 수 있다. → 사용자 상호작용에서 결과까지의 시간 감소, 페이지 새로고침 제거 또는 감소, 페이지 변경 간의 부드러운 애니메이션/전환 가능성 허용
  광범위한 커뮤니티로 인해 자주 업데이트 및 개선 → 성능이 뛰어나고 안정적이며 간결한 코드 생성 가능

프레임워크 단점

• 간단한 프로젝트에서는 투 머치 프레임워크에서 제공하는 이점을 얻지 못하는 간단한 랜딩 페이지 또는 마이크로사이트 프로젝트에 불필요한 팽창 추가 가능성
• 많이 맞춤화된 레거지 프론트 엔드에 통합하기 어려움 고도로 전문화되있거나 구식인 사용자 정의된 코드로 구축된 프로젝트의 경우 통합하는데 골치아플 수 있다
• 버그를 유발하는 업데이트 사용자 정의된 코드들이 업데이트 방향에 따라 버그를 유발할 수 있다.
• 교육 특정 프레임워크를 도입하기로 결정하려면 특정 기술들을 유지하고 성장시키는데 전념해야 한다. 조직의 경우 직원이 적절한 교육을 받았는지 확인하고 채용 과정을 업데이트해야 한다.

---

프론트엔트 프레임워크 vs 프론트엔트 라이브러리

프론트엔드 프레임워크를 찾아보던 중 '프론트엔드 라이브러리'를 발견했다..
라이브러리와 프레임워크는 종종 같은 의미로 사용되지만 비슷하지만서도 다른 개념이다.

유사점

• 패턴을 표준화하고 일반적인 문제에 대한 솔루션을 제공하여 작업량을 줄이는 미리 작성된 코드들의 모음
• 웹 앱의 프론트 엔드를 위해 작성해야하는 사용자 정의 코드의 양을 줄이고 단순화 시키는 것이 목적

차이점

• 사용자 정의 코드 작성이 가능하면 프레임워크
• 사용자 정의 코드 작성이 불가능하면 라이브러리

---

Front-end 프레임워크 종류

1. Jquery
2. EmberJs
3. BackbonJs
4. Foundation
5. React
6. Semantic-UI
7. VueJs
8. Angular
9. Svelte

---

Angular

• 몇 안되는 TypeScript 기반 프레임 워크
  • TypeScript: Microsoft에서 개발된 자바스크립트 기반의 언어
    • 동적 타입 언어인 JavaSctipt를 정적 타입 언어처럼 사용하게 해줌왜 동적 언어를 정적 언어처럼 사용하려는 거지?
      • 자바스크립트는 자유도가 매우 높은 언어로 타입의 선언이 없더라도 값에 따라 타입이 지정됨
        → 에러 발생에 취약함, 특히 에러를 발경하는 시점이 개발 이후 런타임에서야 발생함
      • 타임스크립는 인터프리터(코드를 바로 실행하는 언어)가 아닌 컴파일 언어
        → 컴파일러가 존재하고, 에러를 런타임이 아닌 컴파일 시점에 미리 확인하고 수정할 수 있음
• 양방향 데이터 바인딩 기능이 있다는 점에서 React와 다르다.
  • 모델과 뷰가 실시간으로 동기화됨 → 모델의 변경 사항이 뷰에 즉시 반영되고 그 반대의 경우도 동일함
  • 데이터 바인딩
    • 제공자와 소비자로부터 데이터 원본을 결합시켜 이것들을 동기화하는 기법
    • UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해 주는 프로세스
    • 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것
• 스마트폰 또는 웹 애플리케이션 개발이 포함된 프로젝트에서 작업하는 경우 Angular가 적합함 + 다중 페이지 및 Progressive Web App 구축 가능
• Angular는 React보다 이해하기 어렵다 사용할 수 있는 문서가 풍부함에도 불구하고 너무 추상적이거나 읽기가 불편함

Angular 장점

• 양방향 데이터 바인딩과 같은 가장 중요한 기능은 기본적으로 사용 가능하므로 코드의 양이 줄어듬
• 뷰에 대한 모델 변경 사항을 업데이트하거나 그 반대로 업데이트하는 기능 제공
• injection dependency를 통해 컴포넌트 재사용 및 관리 가능
• 거대한 학습 지원 및 커뮤니티
• 구성 요소들이 외부 요소로 식별되어 의존성에서 벗어남

Angular 단점

• Angular는 작업을 실행하는 여러 가지 방법이 있는 전체 동작 솔루션이기 때문에 심화될 수록 학습하기 힘듬
• 복잡한 구조와 크기 때문에 동적 앱이 제대로 작동하지 않는 경우가 있음

Angular 사용 추천

콘텐츠를 즉시 동적으로 업데이트하여 브라우저 기반 애플리케이션 성능을 높임
→ 엔터프라이즈 기반 소프트웨어 및 동적 웹 앱을 위한 완벽한 옵션

• 엔터프라이즈 소프트웨어: 데이터 분석, 영업 및 마케팅 관리, 고객 서비스 등과 같은 여러 요구 사항이 있는 대기업을 지원하는 것을 목표로 하는 컴퓨터 응용 프로그램

Angular 사용 비추천

범위가 작은 응용 프로그램을 만드는 소규모 팀의 경우 React나 Vue같은 쉬운 구문으로 피할 수 있음

Made with Angular

• BMW
• Xbox
• Forbes
• Blender

---

React

• 지속적인 새로운 앱 기능의 출현으로 인해 발생하는 코드 유지 관리 문제를 해결하기 위해 Facebook에서 만든 프레임워크
• 뛰어난 기능인 Virtual DOM(Document Object Model)을 제공한다. 많은 트래픽을 예상하고 이를 관리할 견고한 플랫폼이 필요한 사람들에게 좋은 구조
  • DOM
    • 웹페이지에 대한 인터페이스 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다.
    • HTML 문서의 객체 기반 표현 방식
  • Virual DOM(가상돔)
    • 실제 DOM 내용에 기반하여 만들어짐
    • 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 떄문.
    • 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기위해 가상 DOM사용
• 단일 페이지 웹 애플리케이션 및 PWA(Progressive Web Application)생성과 관련된 프로젝트에 권장

React 장점

• Class 없이 Components를 작성할 수 있으며 Reacting hook에서 React작성법을 쉽게 배울 수 있다.
• 아이템 재사용성은 다른 app에서의 협업과 재사용을 가능하게 한다.
• React dev는 유용하다.
• 디지털 DOM은 일관되고 원활한 결과를 얻게해준다.

React 단점

• 지속적인 업데이트로 인해서 적절한 문서 생성이 어렵고 초보자의 학습에 어려움을 준다.
• 오직 최신의 solution만 제공한다.
• JSX를 시작할 때 개발자는 프레임워크의 복잡성을 파악하기가 어렵다.

React 사용 추천

• 단일페이지 애플리케이션을 개발할 때 구성 요소를 재사용할 수 있으므로 비교적 짧은 시간에 대화형 인터페이스를 생성할 수 있는 가장 안정적인 프론트엔드 아키텍처
  • 대화형 인터페이스: 사용자가 시스템과 대화하듯이 시스템 기능에 쉽게 액세스하고 사용할 수 있도록 도와주는 인터페이스.

React 사용 비추천

JavaScript 사전경험이 없는 경우

Made with React

• facebook
• instargram
• Netflix
• DropBox
• Pinterest

---

VueJs

• 오늘 날 가장 보편적인 프론트엔드 시스템
• 비교적 크기가 작고, visual DOM과 component기반, 양방향 바인딩이 가능하다.
  • Visual DOM
• 웹 어플리케이션, 모바일 앱, PWA 등 기본 프로세스와 복작한 프로세스 모두 쉽게 관리할 수 있다.

Vue 장점

• 광법위하고 포괄적인 문서
• 간단한 구문
• 앱 레이아웃 디자인의 유연성

Vue 단점

• components의 불일치
• 플러그인과 components에 언어 장벽이 존재한다.
  • 플러그인:
• 작은 커뮤니티
• 대부분의 플러그인이 중국어로 작성되어있다.

Vue 사용 추천

• 유연한 구조의 경우
• 모든것을 처음부터 설계할 수 있고 대규모 프로젝트를 성공적으로 개발할 수도 있다.

Vue 사용 비추천

• 프레임워크의 component 안정성 이슈로 인해 안정적인 component가 필요한 애플리케이션은 VueJS로 설계하는 것을 피해야 한다.
  • Vue component stability issues:

Made witgh Vue

• 알리바바
• 9GAG
• 샤오미
• 로이터

---

개인으로 프로젝트의 규모가 크로 타입스크립트를 좋아한다면 Angular
거대한 생태계와 유연성을 원한다면 React
쉽고 가벼운 프레임워크를 원한다면 Vue.js
정도로 정리되는 듯 싶습니다!

 

---

Front-end 프레임워크 종류 별 인기도

 

 

2015년만해도 선호도 6번쨰에 불과했던 vue가 1등을 차지했네요! 아마 

VueJS의 접근성, 다재다능, 성능에 따른 결과로 보이네요 ㅎㅎ 

 

1등상!!

---

오늘은 Front-end에 대해 간단하게 알아보았습니다.

다음번에 기회가 된다면  VueJS를 다뤄보겠습니다.

그럼 여러분 다음포스팅에서 만나요~~~~~~~~~~~베바~~~~~~~~!