DEV/FE

[네이버 부스트캠프] 프론트엔드 프레임워크 비교하기(feat. typescript)

krokerdile 2024. 9. 24. 15:05

728x90

들어가며

최근 네부캠에서 후반부 학습 스프린트를 진행하면서 프레임워크를 직접 구축해보는 경험을 하고 있습니다. 이 과정에서 각 프레임워크의 등장 배경, 그들이 해결하고자 했던 핵심 문제들, 그리고 그 해결 방식을 이해하는 것이 매우 중요하다는 것을 깨달았습니다.

그룹 활동 중에 리액트가 주로 논의되었지만, 다양한 프레임워크를 폭넓게 이해하는 것이 장기적으로 더 큰 도움이 될 것이라 생각합니다. 따라서 이번 기회에 주요 프론트엔드 프레임워크들의 역사와 특징을 정리해보고자 합니다.

참고해주셨으면 하는 부분은 jQuery와 React가 엄밀히 말해 프레임워크는 아니라는 것입니다. jQuery는 라이브러리이고, React는 라이브러리 혹은 UI 개발을 위한 JavaScript 도구로 분류됩니다. 그러나 이들을 이 글에 포함시킨 이유는 이들의 사용 방식과 영향력이 프레임워크와 유사하기 때문입니다. jQuery는 오랫동안 웹 개발의 표준처럼 사용되었으며, React는 컴포넌트 기반 아키텍처를 통해 프론트엔드 개발 방식을 크게 변화시켰습니다. 따라서 이들의 역사와 특징을 이해하는 것이 현대 프론트엔드 개발의 흐름을 파악하는 데 중요하다고 판단해서 포함해봤습니다. 다른 프레임워크 들도 큰 영향을 발휘했던 녀석들이지만 특히나 jQuery와 리액트의 경우에는 그 영향력이나 파급력이 남달랐다고 생각을 합니다.

프론트엔드 프레임워크의 역사와 발전

1. jQuery (2006)

등장 배경

2006년 John Resig이 크로스 브라우저 호환성 문제를 해결하기 위해 jQuery를 개발했습니다. 당시 웹 개발자들은 각기 다른 브라우저에서 일관된 동작을 구현하는 데 많은 어려움을 겪고 있었습니다.

중점적으로 해결하려던 문제

브라우저 간 비일관성
복잡한 DOM 조작과 이벤트 핸들링
AJAX 요청의 복잡성

문제 해결 방식

크로스 브라우저 호환성을 위한 추상화 레이어 제공
체이닝을 통한 간결한 DOM 조작 API 제공
AJAX 요청을 위한 간단한 인터페이스 구현

주요 특징

DOM 조작 간소화
크로스 브라우저 호환성
AJAX 요청 단순화

성능과 한계

현대적인 프레임워크에 비해 상대적으로 느림
큰 파일 크기로 초기 로딩 시간 증가
대규모 애플리케이션에 부적합
성능 최적화의 한계

Hello World 예제

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('body').append('<h1>Hello, World!</h1>');
        });
    </script>
</head>
<body>
</body>
</html>

2. Angular (2010)

등장 배경

2010년 Google이 웹 애플리케이션 개발을 단순화하고 표준화하기 위해 Angular를 개발했습니다. 웹 애플리케이션의 복잡성이 증가함에 따라 더 체계적인 접근 방식이 필요했습니다.

중점적으로 해결하려던 문제

대규모 엔터프라이즈 애플리케이션 개발의 복잡성
테스트 용이성과 유지보수성 향상
일관된 코드 구조와 개발 방식의 필요성

문제 해결 방식

종합적인 프레임워크 제공으로 개발 표준화
의존성 주입을 통한 모듈화와 테스트 용이성 향상
TypeScript 사용으로 타입 안정성 제공
양방향 데이터 바인딩으로 데이터와 뷰의 동기화 자동화

주요 특징

TypeScript 기반
양방향 데이터 바인딩
의존성 주입 시스템

성능

Ivy 렌더러를 통한 성능 최적화
대규모 애플리케이션에서 안정적인 성능

Hello World 예제

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1>
  `
})
export class AppComponent {
  title = 'Hello Angular!';
}

3. React (2013)

등장 배경

Facebook은 2011년 뉴스피드의 동적 콘텐츠 관리와 성능 문제에 직면했습니다. 기존의 MVC 모델로는 복잡한 UI 상태 관리가 어려웠고, 이를 해결하기 위해 2013년 React를 공개했습니다.

중점적으로 해결하려던 문제

대규모 애플리케이션에서의 성능 저하
복잡한 UI 상태 관리의 어려움
코드 재사용성과 유지보수의 문제

문제 해결 방식

Virtual DOM 도입으로 렌더링 최적화
컴포넌트 기반 아키텍처로 재사용성 향상
단방향 데이터 흐름으로 상태 관리 단순화
JSX를 통한 선언적 UI 프로그래밍

주요 특징

Virtual DOM 사용으로 효율적인 렌더링
컴포넌트 기반 아키텍처
JSX를 통한 선언적 UI 개발
큰 생태계와 커뮤니티 지원

성능

Virtual DOM을 통한 최적화된 렌더링
큰 애플리케이션에서도 안정적인 성능

Hello World 예제

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="World" />,
  document.getElementById('root')
);

4. Vue (2014)

등장 배경

2014년 Evan You가 Angular에서 영감을 받아 더 가볍고 유연한 프레임워크를 만들고자 Vue를 개발했습니다. 그는 Angular의 장점을 취하면서도 더 간단하고 쉽게 사용할 수 있는 프레임워크를 만들고자 했습니다.

중점적으로 해결하려던 문제

기존 프레임워크의 복잡성과 학습 곡선
점진적 도입의 어려움
성능과 유연성 사이의 균형

문제 해결 방식

템플릿 기반의 직관적인 문법 채택
반응형 데이터 바인딩으로 상태 관리 간소화
코어 라이브러리를 작게 유지하면서 필요에 따라 기능 확장 가능

주요 특징

템플릿 기반 문법
반응형 데이터 바인딩
컴포넌트 기반 아키텍처

성능

효율적인 Virtual DOM 구현
작은 크기로 빠른 초기 로딩

Hello World 예제

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello Vue!'
    }
  }
}
</script>

5. Svelte (2016)

등장 배경

2016년 Rich Harris가 기존 프레임워크의 복잡성과 성능 문제를 해결하고자 Svelte를 개발했습니다. 그는 런타임에 작동하는 기존 프레임워크와는 달리, 컴파일 시점에 최적화된 코드를 생성하는 새로운 접근 방식을 택했습니다.

중점적으로 해결하려던 문제

프레임워크의 런타임 오버헤드
복잡한 상태 관리 시스템
큰 번들 사이즈로 인한 초기 로딩 시간

문제 해결 방식

컴파일 시점에 최적화된 바닐라 JS로 변환
반응성을 언어 자체에 내장하여 간단한 상태 관리 구현
최소한의 런타임으로 작은 번들 사이즈 실현

주요 특징

빌드 시점 컴파일로 런타임 오버헤드 최소화
간결한 문법과 직관적인 반응성
작은 번들 크기

성능

매우 빠른 초기 로딩 및 렌더링 속도
효율적인 메모리 사용

Hello World 예제

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

결론

각 프레임워크와 라이브러리는 웹 개발의 특정 문제들을 해결하기 위해 등장했으며, 시간이 지남에 따라 진화하고 새로운 해결책을 각자의 견해에 맞게 제시해왔다고 생각합니다.

Claude에게 최근의 각 프레임워크 별 인식에 대해서 물어봤을 때

각 프레임워크 별로 어떤 특징을 가지고 있는 지 마지막으로 Claude에게 물어봤는데요, 다음과 같이 정리를 해줘서 덧붙이며 마무리 합니다.

jQuery는 브라우저 호환성 문제를 해결하고 DOM 조작을 간소화했지만, 현대적인 웹 개발 요구사항에는 부족합니다.
Angular는 대규모 애플리케이션 개발을 위한 완전한 프레임워크를 제공하지만, 학습 곡선이 가파릅니다.
React는 컴포넌트 기반 아키텍처와 Virtual DOM으로 성능과 재사용성을 높였으며, 큰 생태계를 가지고 있습니다.
Vue는 간단한 문법과 점진적 도입 가능성으로 인기를 얻었으며, React와 Angular의 장점을 결합했습니다.
Svelte는 컴파일 시점 최적화로 런타임 성능을 극대화하고 번들 크기를 최소화했습니다.

더해서 타입스크립트와 프레임워크 별 관계까지

내용을 찾아보면서 앵귤러가 타입스크립트를 도입해서 안정성을 추구하였다는 이야기가 많아서 관련해서 내용을 찾아봤습니다. 저도 지난 상반기에 ICT 학점연계 인턴십에서나 그 이전에 진행했던 프로젝트에서 타입스크립트를 사용했었기 때문에 장점에 대해서는 이해를 하고 있으나 항상 사용하고 있던 리액트에서의 타입스크립트만 접해봤었기 때문에 그런 부분을 위의 내용을 적고나서 더 찾아보면 좋을 것 같아서 같이 정리해봤습니다.

우선 타입스크립트는 2012년 마이크로소프트에 의해 개발된 자바스크립트의 상위집합 언어로, 정적 타입 검사와 객체 지향 프로그래밍 기능을 제공합니다. 시간이 지남에 따라 여러 프론트엔드 프레임워크에서 타입스크립트를 채택하거나 지원하게 되었다고 합니다.

Angular

Angular 2 (2016년 출시)부터 타입스크립트를 기본 언어로 채택했습니다.
대규모 엔터프라이즈 애플리케이션 개발에서 타입 안정성과 객체 지향 프로그래밍의 이점을 활용하고자 했습니다.
의존성 주입, 데코레이터 등 Angular의 핵심 기능들이 타입스크립트의 기능을 적극 활용합니다.

React

React는 처음에는 타입스크립트를 기본으로 사용하지 않았지만, 커뮤니티의 요구와 노력으로 지원이 강화되었습니다.
2018년부터 공식적으로 타입스크립트 정의 파일(@types/react)을 제공하기 시작했습니다.
Create React App에서 타입스크립트 템플릿을 제공하여 쉽게 타입스크립트 프로젝트를 시작할 수 있게 되었습니다.
React 18부터는 타입스크립트로 작성된 내부 타입 정의를 제공하여 더욱 정확한 타입 추론이 가능해졌습니다.

Vue

Vue 2는 타입스크립트 지원이 제한적이었지만, 클래스 기반 컴포넌트와 같은 실험적 기능을 통해 타입스크립트 사용을 시도했습니다.
Vue 3 (2020년 출시)는 타입스크립트로 완전히 재작성되어 더 나은 타입스크립트 지원을 제공합니다.
Composition API는 타입스크립트와 함께 사용할 때 더욱 강력한 타입 추론을 제공합니다.

Svelte

Svelte는 3.0 버전 (2019년)부터 타입스크립트 지원을 시작했습니다.
Svelte의 컴파일러가 타입스크립트 코드를 처리할 수 있게 되어, .svelte 파일 내에서 직접 타입스크립트를 사용할 수 있습니다.
SvelteKit (Svelte의 풀스택 프레임워크)은 기본적으로 타입스크립트 설정을 포함하고 있어, 프로젝트 시작부터 타입스크립트를 쉽게 사용할 수 있습니다.

타입스크립트 채택의 이점

타입 안정성: 컴파일 시점에 오류를 잡아내어 런타임 에러를 줄입니다.
개발자 경험 향상: 코드 자동완성, 리팩토링 도구 지원이 개선됩니다.
문서화: 타입 정의가 곧 문서의 역할을 하여 코드의 이해도를 높입니다.
대규모 프로젝트 관리: 타입 시스템을 통해 복잡한 프로젝트의 구조를 더 잘 관리할 수 있습니다.

타입스크립트의 채택은 각 프레임워크의 생태계를 더욱 견고하게 만들었으며, 특히 대규모 애플리케이션 개발에서 그 가치를 인정받고 있습니다. 현재 대부분의 주요 프론트엔드 프레임워크가 타입스크립트를 적극적으로 지원하고 있어, 프론트엔드 개발에서 타입스크립트의 사용은 점점 더 보편화되고 있습니다.

참고자료

[1] https://f-lab.kr/insight/understanding-jsx-and-virtual-dom-in-react
[2] https://wookgu.tistory.com/11
[3] https://ianlog.me/blog/vanillajs-fc-react/vdom-to-dom
[4] https://young-taek.tistory.com/m/315
[5] https://f-lab.kr/insight/understanding-jsx-and-virtual-dom-in-react-20240708
[6] https://legacy.reactjs.org/docs/faq-internals.html
[7] https://velog.io/%40seeh_h/Virtual-DOM%EA%B3%BC-JSX
[8] https://d2.naver.com/helloworld/2690975

728x90

저작자표시