1 라이브러리 정의
→ 개발자가 쉽게 구현할 수 있도록 이미 만들어진 코드의 집합
→ 반복적인 작업이나 복잡한 기능을 쉽게 처리할 수 있도록 돕는 도구 모음
2 라이브러리 주요 특징
| 재사용성 | → 이미 검증된 코드를 재사용하여 시간과 오류 감소 |
| 추상화 | → 복잡한 작업을 단순화하여 제공 → 내부 구현을 신경 쓰지 않고 기능 사용 가능 |
| 효율성 | → 성능 최적화된 라이브러리는 개발 속도 |
| 표준화 | → 표준화된 방식으로 개발되어 여러 프로젝트에서 일관성 있게 사용 가능 |
3 프론트엔드 라이브러리 정의
→ 웹 애플리케이션의 UI와 UX를 개발하는 데 도움을 주는 도구 모음
→ 주로 JavaScript, HTML, CSS와 함께 사용
4 프론트엔드 라이브러리 주요 특징
| 재사용 가능한 UI 구성 요소 제공 | → 특정 UI 요소나 기능을 여러 곳에서 반복적으로 사용 가능 |
| 브라우저에서 동작 | → 클라이언트 측에서 실행 → DOM 조작, 이벤트 처리 등을 쉽게 구현 |
| 복잡한 UI 상태 관리 | → 실시간으로 동적인 웹 페이지를 구현 |
| 반응형 디자인 및 크로스 브라우저 지원 | → 다양한 화면 크기와 브라우저에서 일관되게 동작 |
| 데이터 시각화 및 사용자 인터랙션 처리 | → 복잡한 데이터를 그래프나 차트로 시각화 → 사용자 상호작용을 처리 |
| HTTP 통신 처리 | → Axios나 Fetch API로 서버와의 비동기 통신을 쉽게 처리 |
| 성능 최적화 | → 대규모 애플리케이션에서도 빠르고 부드러운 사용자 경험을 제공 |
5 프론트엔드 라이브러리 장점
1) 개발 속도 향상
→ 재사용 가능한 컴포넌트와 기능 제공
2) 유지보수 용이
→ 컴포넌트 기반 개발로 코드 유지보수 용이
3) 유연성
→ 다양한 기능을 자유롭게 결합하여 필요한 기능을 쉽게 추가 가능
6 주요 프론트엔드 라이브러리
1) React
→ 사용자 인터페이스 구축을 위한 UI 라이브러리
→ 컴포넌트 기반
→ 가상 DOM 사용
→ 단방향 데이터 흐름
▼ React 관련 추가 링크
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
2) Vue.js
→ 경량화된 UI 라이브러리
→ 컴포넌트 기반
→ 양방향 데이터 바인딩
→ 점진적 확장 가능
▼ Vue.js 관련 추가 링크
시작하기 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
v2.ko.vuejs.org
3) Axios
→ HTTP 요청을 간단하게 처리할 수 있는 Promise 기반 라이브러리
▼ Axios 관련 추가 링크
시작하기 | Axios Docs
시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코
axios-http.com
4) D3.js
→ 데이터 시각화에 특화된 JavaScript 라이브러리
▼ D3.js 관련 추가 링크
D3 by Observable | The JavaScript library for bespoke data visualization
D3 by Observable | The JavaScript library for bespoke data visualization
D3 The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
d3js.org
5) jQuery
→ HTML, CSS, JavaScript 간 상호작용을 단순화하는 라이브러리
▼ jQuery 관련 추가 링크
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
6) Bootstrap
→ 반응형 웹 디자인을 쉽게 구현할 수 있도록 돕는 CSS 프레임워크
▼ Bootstrap 관련 추가 링크
Bootstrap · The most popular HTML, CSS, and JS library in the world.
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
좀 더 상세한 내용을 원하는 분들은 아래 링크로 접속
https://m.blog.naver.com/math717/223624359079
프론트엔드 라이브러리
오늘 날, 우리가 코딩으로 개발을 하게 되면 프레임워크랑 라이브러리를 사용하게 된다. 하지만 우리는 프...
blog.naver.com
'공통' 카테고리의 다른 글
| 백엔드 개발을 위한 프레임워크와 주요 특징 정리 (1) | 2025.03.26 |
|---|---|
| 백엔드 개발의 개념과 발전 과정 : 핵심 역할과 목표 (0) | 2025.03.24 |
| 주요 프론트엔드 프레임워크 비교 및 특징 (3) | 2025.03.18 |
| 프론트엔드란 무엇인가? 주요 구성 요소와 발전 (1) | 2025.03.17 |
| VSCode 설치 및 설정 가이드 (0) | 2025.03.16 |