프론트엔드 프레임워크란,
사용자 인터페이스 등의 개발을 용이하게 하기 위해 사전에 정의된 코드를 통해 재사용 가능한 형태로 구조화하여 설계 및 구현을 하는 것입니다.

3대 프론트엔드 프레임워크 - REACT, ANGULAR 그리고 VUE

REACT

메타에서 개발한 JS 라이브러리입니다. JSX라는 문법을 통해 HTML과 비슷한 형태로 컴포넌트 기반의 개발이 가능합니다.
풍부한 확장 라이브러리 및 커뮤니티가 존재하기 때문에, 3개 기술 중 가장 높은 점유율을 유지하고 있습니다.
규모가 큰 프로젝트 작업 시 큰 효율을 발휘할 수 있습니다.

ANGULAR

구글에서 개발한 JS 프레임워크입니다. 초기 진입장벽이 높아서 직원들이 학습해서 바로 기업, 팀 프로젝트에 투입되기 어렵고,
TS 기반이나 기존 JS 코드 등과의 호환성이 떨어진다는 이유로 RECAT나 VUE에 비해 점유율이 현저히 낮아 거의 사용하지 않고 있습니다.
하지만 2023년 stackoverflow.com 에서 조사한 결과는 아직도 많은 개발자가 ANGULAR를 사용하고 있으며(19.9%로 4위),
유지관리가 편하고 개발에 필요한 모든 기능 구현이 가능한 프레임워크라고 할 수 있습니다.

VUE

2014년 2월 Evan You와 대규모 커뮤니티 및 개발자들과 협업해서 개발한 JS 프레임워크입니다.
단일 페이지 앱(SPA)에 필요한 다양한 기능을 담고 있으며, REACT보다 초기 진입장벽이 낮고 좀 더 가볍게 사용할 수 있다는 장점이 있습니다.
따라서 REACT와 대등하게 높은 점유율을 유지하며 다양한 규모의 프로젝트 작업에 사용되고 있습니다.

2023년 개발 프레임워크 트렌드가 있다?

2023년 개발 트렌드를 키워드로 요약했습니다.

SPA(Single Page Application)

단일 페이지로 구성된 웹 애플리케이션을 의미합니다. 화면에 변경이 발생할 때마다 전체 DOM을 업데이트 할 필요 없이 필요한 화면 일부만을 동적으로 바꿀 수 있어
부드럽고 빠른 사용자 경험을 구현합니다.

Virtual DOM 조작

기존의 방식대로 실제 DOM을 조작하는 것은 렌더링을 위한 연산에 많은 자원이 투입됩니다. 따라서 화면에서 수정이 필요한 경우,
가상(Virtual) DOM에 적용하고 실제 DOM과 비교해서 적용해야 하는 부분만 실제 DOM에 반영하는 방식으로 자원 사용을 최적화합니다.

컴포넌트 기반

재사용성, 유지보수, 코드 가독성 측면에서 유리하게 하기 위해, 각 코드를 목적에 따라 분리하고 모듈화하는 방식입니다.

정적 타입 체크

JS의 ‘느슨한 결합’에서 발생할 수 있는 타입 관련 오류 및 side effect를 방지하기 위해, 변수의 데이터 타입을 사전에 확인해주는 기능으로, 가장 대표적인 도구로 TypeScript가 있습니다. 덕분에 개발자는 코드 진행과정 및 결과를 예측하고 관리하기 용이합니다.

CSR(Client Side Rendering)

서버에서 화면 구성에 필요한 데이터를 보내주면 클라이언트 단에서 컨텐츠를 동적으로 렌더링하여, 화면을 구성하는 방식입니다.
초기 로딩 속도는 빠르나 SEO에 불리하고 클라이언트가 동적으로 화면을 구성하기 때문에, 초기 로딩 후 빈 화면이 나타날 수 있습니다.

SSR(Server Side Rendering)

서버에서 완성된 초기 HTML 파일을 클라이언트에게 보내줍니다. 따라서 SEO(Search Engine Optimization)에 유리하고, 사용자는 다른 파일 및 스크립트가 로딩되는 동안 기본적으로 완성된 페이지를 볼 수 있기 때문에 사용자 경험 측면에서도 유리합니다. 단, 초기 로딩 속도는 상대적으로 느릴 수 있습니다.

SSG(Static Site Generator)

정적인 사이트의 경우, 빌드 시점에서 페이지 컨텐츠를 미리 렌더링하여 HTML 파일로 저장시킵니다. 그리고 CDN(Content Delivery Network) 서버 및 캐싱을 이용해서 빠르게 정적 데이터를 로딩할 수 있기 때문에, 빠른 로딩 속도와 SEO의 장점을 동시에 가지고 있습니다.