프레임워크 및 상태관리, 빌드 도구 등

기회가 닿아 공부하면서 정리도 할 겸 쓰는 글

1. 프레임워크 삼대장 비교 (Angular vs Vue vs React)

사실 리액트는 프레임워크로 분류하지 않지만 같이 껴넣어봤다.

공통점

우선 세가지 모두 공통적으로 자바스크립트로 작성 되었고 웹 애플리케이션 개발을 위한 라이브러리/프레임워크이다. 세가지의 차이점과 특징을 비교해보려한다.

Angular (앵귤러)

• 구글에서 만든 프론트엔드 프레임워크이다.
• Angular의 가장 큰 특징은 모든 것이 공식 지원 범위 안에서 통합되어 있다는 점이다. 라우팅, 폼 처리, HTTP 통신, 테스트, 국제화, 빌드 설정까지 모두 Angular 생태계 안에서 제공하고 있어 유지보수, 테스트가 용이하다고 한다.
• 양방향 데이터 바인딩 지원

  양방향 바인딩: React는 기본적으로 단방향 데이터 흐름(부모 → 자식)을 따르지만, Angular는 양방향 바인딩을 지원하여 데이터가 변경되면 UI가 자동으로 업데이트되고, 반대로 UI 변경도 데이터에 즉시 반영된다.

  • 데이터가 변경되면 UI가 자동으로 업데이트되고, UI 요소에서 변경이 발생하면 데이터도 자동으로 업데이트

• 의존성 주입(Dependency Injection) 시스템이 제공되어 애플리케이션을 쉽게 설정할 수 있다.

  의존성 주입(Dependency Injection) : 외부에서 의존 객체를 생성하여 넘겨주는 것 일반적인 객체 생성의 경우에는 클래스 안에서 사용할 객체를 생성하지만, 의존성 주입의 경우 외부에서 생성된 객체를 주입 받는 방식이다. 의존성 주입을 사용한다면 클래스 간의 결합도를 낮춤으로 재사용성과 테스트하기 용이하게 된다.

• 러닝커브가 높은 편이라 금융권, 공공기관, 대기업 SI 프로젝트에서 많이 사용되고, 규모가 크고 역할이 분리된 팀에서 빛을 발하는 프레임워크라고함

Vue (뷰)

• 점진적 프레임워크 가 캐치프라이즈다. 이는 쉽게 말해서 필요할 때 필요한 것만 사용 가능하다는 것으로 기존 웹 페이지에 점진적으로 통합하거나, 전체 애플리케이션을 Vue.js로 구축할 수 있다.
• 앵귤러의 특징인 양방향 데이터 바인딩을 채택하여 데이터 공유의 유동성을 높이고, 리엑트의 가상돔을 채택하여 렌더링 성능을 높였다고 한다.
• 러닝커브가 낮고 문법이 단순함
• 컴포넌트 기반 아키텍처로 웹 페이지를 독립적인 재사용 가능한 컴포넌트 단위로 개발하여 유지보수 및 개발 속도를 향상시킨다.

React (리액트)

리액트는 사용자 인터페이스 구축에 용이한 자바스크립트 라이브러리이다. 재사용 가능한 코드 개발과 반응형 웹 구축에 많이 사용

라이브러리와 프레임워크 차이
가장 큰 차이점은 제어흐름의 권한이 어디있는지 라이브러리는 개발하는 우리가 직접 애플리케이션 코드의 흐름을 제어해야하는 반면, 프레임워크는 우리가 프레임워크가 정해둔 틀에 맞춰서 애플리케이션 코드를 짜고 그 틀 안에서 이 코드들이 실행된다.

• 라이브러리는 개발자가 필요할 때 직접 가져다 쓰는 도구, 프레임워크는 전체 흐름과 구조를 프레임워크가 정해줌
• React는 왜 라이브러리라고 할까?
  React는 UI를 그리는 "View만 담당하는 라이브러리".
  라우팅, 상태관리, 빌드 등은 직접 선택하고 조립해야 하기 때문에 그래서 프레임워크가 아니라 라이브러리라고 불린다.

• JSX 문법 사용 (JavaScript 안에 HTML처럼 보이는 코드를 작성하는 방식)
• Hook 사용
• Virual DOM(가상 돔)을 이용하여 렌더링 성능을 최적화
• Real DOM(실제 돔)에 비해 변경사항을 빠르게 적용해 주어서 사용자에게 더 나은 인터렉션 경험 제공

2. 상태관리 패턴 비교

상태관리(state management)는 컴포넌트 간에 공유되는 데이터(상태)를 어떻게 저장하고, 전달하고, 갱신할지를 관리하는 방식이다. 다양한 패턴이 있는데 대표적인 몇가지만 비교해보려 한다.

Flux 패턴

• Facebook이 제안한 단방향 데이터 흐름 구조

• Action → Dispatcher → Store → View 구조로, 상태 변경이 예측 가능하게 만들어짐

• 사용자 입력을 기반으로 Action을 생성 하고 그것을 Dispatch에 전달하여 데이터가 모여있는 Store의 데이터를 변경하게 된다. 그 후 실제 렌더링 = View 에 반영됨

• 데이터 흐름 추적 용이

  대표 라이브러리

  • Redux: 가장 널리 쓰이는 Flux 패턴 상태관리 도구 (Flux에서 파생된 구조)

Atom 패턴

상태를 아주 작고 독립적인 단위로 나눠서 관리하는 구조. 각각의 atom은 독립적으로 존재하고, 컴포넌트는 필요한 atom만 구독함.

• 상태 갱신을 부작용 없이 관리하기 위한 패턴
• 데이터 흐름이 없으며, 상태는 불변하고 필요 시 새로 생성됨

  대표 라이브러리

  • Recoil Facebook에서 만든 React 전용 atom 기반 상태관리. atom/selector 단위로 상태 조절.

• Jotai Recoil보다 더 간단한 구조. Hook만으로 상태를 제어함.

Proxy 패턴

JavaScript의 Proxy 객체를 활용하여 객체의 속성에 대한 접근, 할당, 삭제 등을 가로채고 추가적인 로직을 수행하는 방식
프록시(Proxy)의 사전적인 의미는 '대리인'이라는 뜻이다. 즉, 누군가에게 어떤 일을 대신 시키는 것을 의미하는데, 이를 객체 지향 프로그래밍에 접목해보면 클라이언트가 대상 객체를 직접 쓰는게 아니라 중간에 프록시(대리인)을 거쳐서 쓰는 코드 패턴이라고 보면 된다

• 양방향 데이터흐름
• 상태 변경 시 자동 감지 및 반응

  대표 라이브러리

  • Valtio : 상태 사용 추적 기법 기반으로 렌더링 최적화를 하는 라이브러리

3. 빌드 도구와 프레임워크

3.1 빌드도구

개발 코드를 브라우저에서 동작 가능한 상태로 변환해주는 도구
프론트엔드 코드를 빌드하고 번들링하며, 최적화하고, 테스트하고, 배포하는 데 사용된다.

번들링 : 여러 JS 파일을 하나로 합침 번들러는 프로젝트에 포함된 파일(모듈)들을 연결하고 묶어서 브라우저가 실행할 수 있는 파일로 만들어준다. 이를 번들링한다고 한다.

Webpack

• 가장 널리 쓰이는 전통적인 번들러
• 여러 JavaScript 파일을 하나로 번들링함으로써 HTTP 요청 수를 줄이고, 로딩 성능 개선
• JavaScript 외에도 CSS, 이미지, 폰트 등 다양한 파일 형식을 사용하는데 로더를 통해 이러한 다양한 파일들을 모두 하나의 번들 파일로 묶어준다
• 생태계 크고 커스터마이징 강력
• 개발 중 변경 사항이 있을 때마다 전체 번들을 재생성해야 하므로, 변경 반영 속도가 느려질 수 있다. HMR(Hot Module Replacement) 어려움

HMR(Hot Module Replacement) : 개발 중인 애플리케이션의 특정 모듈을 새로 고침하지 않고도(브라우저를 새로 고침 하지 않고도) 교체할 수 있게 하는 기능

Vite

이전엔 주로 Webpack을 썼는데, 느리고 설정이 복잡하다보니 그걸 더 빠르고 가볍게 만든 대체 도구가 Vite 라고한다.

• Vite는 ES 모듈을 기본으로 사용
• 자바스크립트 파일을 각각의 모듈로 취급하여 필요한 모듈만 개별적으로 로드함 코드 전체를 다시 번들링하지 않고, 수정된 파일만 빠르게 다시 로드하므로 HMR 성능이 매우 뛰어나고, 브라우저에서 즉시 결과를 확인할 수 있다
• 번들링 최적화: 개발 환경에서는 번들링 없이 ES 모듈을 사용하고, 배포 시에는 최적화된 번들로 빌드를 진행 (Rollup 사용)
• 로컬 개발 시에는 번들링을 하지 않고 프로덕션 빌드 시에만 번들링을 하는데, 각 모듈을 브라우저가 직접 요청하도록 하여 HMR 성능을 극대화

3.2. 프레임워크 비교

SPA, SSR, SSG 등 웹 애플리케이션 구조를 설계하고 제어하는 큰 틀
참고 : 서버사이드렌더링과 클라이언트사이드렌더링

Next.js

• React 기반의 풀스택 프레임워크
• React로 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅, 이미지 최적화까지 가능
• SEO에 강함 (SSR)
• 백엔드 없이 풀스택 개발 가능 (API routes)
• Vercel이 만들어서 호환 좋음

Nuxt.js

• Vue 기반 SSR 프레임워크
• 파일 기반 라우팅
• SSR, SSG, CSR 모두 지원
• API 서버 내장 (Nuxt 3부터)
• Vite 지원 (Nuxt 3 이상)

SvelteKit

• svelte 기반의 프레임워크
• 가볍고 빠름
• SSR/SSG/CSR 모두 지원
• Svelte 자체 학습 필요