프론트엔드 프레임워크란?
웹사이트나 애플리케이션의 사용자 인터페이스를 쉽게 디자인, 구축하도록 돕는 소프트웨어 도구 모음
1️⃣ 프론트엔드 프레임워크가 제공하는 요소들
- UI 컴포넌트 → 재사용 가능한 UI 컴포넌트(버튼, 폼, 카드 등)를 제공 → 일일이 다시 개발할 필요 X
- 상태 관리 → 사용자와 상호작용하는 동안 다루는 상태를 효과적으로 관리하기 위한 방법이 포함 가능
- 라우팅 → 싱글 페이지 애플리케이션(SPA)에서는 클라이언트 측 라우팅 관리를 위한 라이브러리나 모듈을 제공
- 데이터 바인딩 → UI는 애플리케이션의 상태가 변경될 때 자동으로 업데이트 및 관리
- 생명주기 메서드 → 컴포넌트ㆍ페이지가 생성, 업데이트, 소멸하는 과정에서 특정 로직을 실행 가능하도록 제공
- 유틸리티와 헬퍼 → DOM 조작, Ajax 요청, 데이터 처리 등의 복잡한 작업을 쉽게 처리할 수 있도록 제공
2️⃣ 프론트엔드 프레임워크 사용 순위 (2022 기준)
→ 2022년 기준으로 실제 사용하는 상위 3개의 프론트엔드 프레임워크는 React, Angular, Vue.js
→ 이외에도 라이징 프레임워크인 Next.js 존재
3️⃣ 프레임워크 비교
→ CSR(Client-side Rendering) : SPA(Single Page Application) 기법을 사용하여 페이지를 렌더링
- 화면을 그리는 렌더링이 클라이언트에게서 발생 (클라이언트의 브라우저에서 페이지 발생)
- 페이지 간 전환이 부드러워지는 장점
- HTML과 JS를 다운로드 받는동안 클라이언트는 렌더링이 불가능, 즉 첫 페이지의 로딩이 느리다는 단점
→ SSR(Server Side Rendering)
- 서버 측에서 즉시 렌더링 가능하게끔 가공한 html 파일을 만들어 브라우저에게 보내고, 브라우저는 이를 다운하여 즉각 화면에 렌더링할 수 있는 방식
- 초기 로드 시 필요한 최소한의 코드만 다운로드하여 실행 → 앱의 초기 로딩 속도를 개선함
[출처]
- 2024에 가장 핫한 프론트엔드 프레임워크 순위는? | 작성자 코드잇
- https://velog.io/@dev_harrison/프론트엔드-프레임워크Front-End-Frameworks
- https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/
- https://megastudyitacademy.tistory.com/64
- https://haesoo9410.tistory.com/329
- https://blog.naver.com/hello-assemble/223406523154
- https://yeongjaekong.tistory.com/32#google_vignette
