프론트엔드 생태계
프론트엔드에서 사용되어지는 많은 도구와 프레임워크 등을 구분하고 이해하며, 각각의 용도가 무엇인지 가볍게 이해하기 위해서 이글을 작성합니다.
1. 프레임워크 & 라이브러리
프레임워크란?
어떤 작업이나 프로젝트를 구조화하고 효율적으로 진행하기 위한 뼈대,틀, 또는 규칙 모음을 말합니다. 특정 분야에서 반복적으로 사용되는 공통 기능들을 모아 표준화하고, 개발자가 더 쉽게 작업을 할 수 있도록 도와줍니다.
종류
| 이름 | 설명 | 특징 | 비교 |
|---|---|---|---|
| React | UI를 구성하는 컴포넌트를 만드는 라이브러리 | 페이스북이 개발, JSX 사용, 유연함 | 다른 도구와 조합해서 사용 |
| Vue.js | 사용자 친화적인 프레임워크 | 템플릿 문법, 쉽고 빠름 | 진입장벽 낮고 직관적 |
| Angular | 대규모 앱을 위한 프레임워크 | 구조화 강함, 복잡함 | 기업용에 적합 |
| Svelte | 빌드 타임에 컴파일하는 프레임워크 | 빠름, 런타임 없음 | 새로운 패러다임 |
| Next.js | React 기반의 SSR/SSG 프레임워크 | 페이지 기반 라우팅, 서버 기능도 포함 | React 위에 구축 |
| Nuxt.js | Vue 기반의 SSR/SSG 프레임워크 | SEO 친화적, 구조화된 개발 | Vue 버전의 Next.js |
| Solid.js | 성능 지향의 React-like 프레임워크 | 반응성 최적화 | 최신이지만 진입장벽 있음 |
2. 언어 & 문법
사용 언어의 종류
| 이름 | 설명 | 역할 |
|---|---|---|
| JavaScript (JS) | 브라우저에서 실행되는 기본 언어 | 프론트엔드의 핵심 |
| TypeScript (TS) | JavaScript + 정적 타입 언어 | 코드 안정성, 유지보수 용이 |
| JSX / TSX | JS/TS로 HTML-like UI 작성 방식 | React에서 사용 |
3. 스타일링 도구
역할
화면의 구정을 디자인하고, 꾸미며, 애니메이션 효과 등을 작업하는 도구
종류
| 이름 | 설명 | 특징 |
|---|---|---|
| CSS | 스타일의 기본 언어 | 모든 스타일의 기반 |
| Sass / SCSS | CSS 전처리기 | 변수, 중첩 등 고급 기능 지원 |
| Tailwind CSS | 유틸리티 기반 CSS 프레임워크 | 빠른 개발, 클래스 이름으로 스타일 |
| Styled Components | JS 안에서 스타일을 정의 (React) | 컴포넌트 스타일 통합 |
| Emotion | Styled Components와 비슷 | 더 빠르고 유연함 |
4. 환경 구성 도구
역할
개발환경을 만들고, 코드를 번들링하고, 최적화를 하는 도구들입니다. 개발을 하면서 코드를 감시하고, 빌드, 서버의 실행까지도 자동으로 도와줍니다.
종류
| 이름 | 설명 | 특징 |
|---|---|---|
| Vite | 빠르고 간편한 최신 개발 도구 | 빠른 HMR, 최신 JS 지원 |
| Webpack | 전통적인 번들러 | 복잡한 설정 가능, 느림 |
| Parcel | 설정 거의 없는 번들러 | 자동 구성, 소규모 프로젝트에 유리 |
| Rollup | 라이브러리 번들링에 적합 | 모듈화 최적화 |
| Babel | JS 트랜스파일러 | 최신 JS 문법을 구형 브라우저 호환으로 변환 |
| ESBuild | 매우 빠른 빌더 | Vite 내부에서 사용됨 |
5. 패키지 매이저
역할
외부 라이브러리 관련 도구입니다. 필요한 도구들을 설치하고 관리하는 관리자의 역할입니다.
종류
| 이름 | 설명 | 특징 |
|---|---|---|
| npm | Node.js 공식 패키지 매니저 | 가장 보편적 |
| yarn | 빠른 속도와 캐시 기능 | npm보다 속도 빠름 |
| pnpm | 디스크 공간 절약형 패키지 매니저 | 중복 설치 없음 |
6. 상태 관리 도구
역할
컴포넌트끼리의 데이터를 공유하고 관리할 수 있도록 도와줍니다.
종류
| 이름 | 설명 | 특징 |
|---|---|---|
| Redux | 글로벌 상태 관리 | 엄격한 구조, 학습 필요 |
| Zustand | 간단한 React 상태 관리 | Redux보다 훨씬 가볍고 간단 |
| Pinia | Vue용 최신 상태 관리 | Vue 3의 Composition API 기반 |
| Recoil / Jotai | React의 상태 관리 대안 | 직관적이고 모듈화 가능 |
7. 라우팅(페이지 전환 제어)
역할
SPA에서 페이지처럼 보이게 처리를 도와줍니다.
종류
| 이름 | 설명 | 프레임워크 |
|---|---|---|
| React Router | React용 라우터 | React |
| Vue Router | Vue용 라우터 | Vue |
| Next.js 라우팅 | 폴더 기반 자동 라우팅 | React 기반 |
| Nuxt.js 라우팅 | 파일 기반 라우팅 | Vue 기반 |
8. API 통신 도구
역할
백엔드와 통신을 하는 방법에 따라 나뉩니다.
종류
| 이름 | 설명 | 특징 |
|---|---|---|
| fetch | 브라우저 기본 API | 표준 방식 |
| Axios | Promise 기반 HTTP 클라이언트 | 더 많은 기능, 에러 처리 용이 |
| React Query / TanStack Query | 서버 상태 관리 + 캐싱 | 자동 캐싱, 로딩 처리 |
| SWR | React 기반, 데이터 패칭 최적화 | 캐싱, 갱신 등 자동 처리 |
인생의 모든날을 사랑하고 즐기자