🖥️ Frontend Development

FE 개발이란?

웹사이트와 웹 애플리케이션의 사용자 인터페이스(UI), 사용자 경험(UX) 을 만들고 디자인하는 것

---

❓ Vanilla JS만으로 UI/UX를 만든다면?

Vanilla JS만으로 UI/UX를 구성하는 것은 마치 Spring 없이 Java만으로 서버 기능을 구현하는 것과 유사합니다.

복잡한 사용자 인터페이스와 상태 관리를 수동으로 다루어야 하기 때문에 생산성과 유지보수성이 떨어집니다.

👉 이때 등장하는 것이 바로 Frontend Framework / Library입니다.

---

🧩 대표적인 FE 프레임워크 & 라이브러리

1. React.js

• 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 라이브러리
• JS 라이브러리이기 때문에 모든 기능이 JS로 이루어져 있음

2. Vue.js

• 가장 대표적인 프레임워크
• 프레임워크인 만큼 독창적인 문법과 구조를 가짐

---

⚛️ React란?

"웹, 네이티브 UI를 위한 JavaScript 라이브러리"

React는 사용자와 웹 사이트의 상호작용을 돕는 인터페이스 구성 도구이며, SPA(Single Page Application) 기반입니다.

---

✅ SPA란?

• 하나의 HTML 페이지 (index.html)만 존재
• 데이터 변경이나 URL 이동 시 화면 전체를 새로 고침하지 않고, 동적으로 필요한 부분만 갱신
• 따라서 화면 깜빡임이 없고, 더 부드러운 사용자 경험 제공

---

✅ React의 장점

1. 🧠 Virtual DOM

• 실제 DOM을 직접 조작하면 느리고 비효율적
• React는 가상의 DOM을 사용해 바뀐 부분만 반영

plain
변화 발생
→ Virtual DOM으로 변경
→ 두 개의 Virtual DOM 비교
→ 변경된 부분만 실제 DOM에 적용

➡️ 성능 개선에 큰 도움

---

2. 🧱 컴포넌트 기반 구조

• 모든 UI는 컴포넌트 단위로 구성됨
• 각 컴포넌트는 재사용 가능한 코드 블럭

---

3. 🌍 방대한 생태계

• 강력한 커뮤니티와 오픈소스
• 수많은 라이브러리와 확장 도구들로 개발 생산성 ↑

---

4. 📱 모바일 네이티브 개발 지원

• React Native를 통해 iOS, Android 앱 개발 가능

---

❌ React의 단점

1. 📚 높은 러닝 커브

• 프레임워크가 아니라 라이브러리이기 때문에 사용자가 설계해야 할 부분이 많음

---

2. ⚠️ 상태 관리 복잡

• 잘못된 상태 관리로 인한 불필요한 리렌더링 발생 가능
• 상태 관리는 성능 최적화의 핵심 포인트

상태 관리 도구

🔹 Context API

🔹 Redux Toolkit (대규모 앱에 적합)

🔹 Recoil (React 19 이상에서는 사용 불가)

🔹 Zustand (간단한 앱에 적합, 러닝 커브 낮음)

---

✅ 정리 요약