🧭 프론트엔드 개발이란?

사용자가 실제로 마주하게 되는 웹 사이트의 UI/UX를 개발하는 분야
→ HTML, CSS, JavaScript를 사용해 직접 상호작용하는 화면을 구성

---

⚙️ 클라이언트 사이드 프레임워크

대표 프레임워크	공식 사이트
React	https://reactjs.org
Angular	https://angular.io
Vue	https://vuejs.org

이런 프레임워크들은 복잡하고 동적인 웹 애플리케이션을 쉽게 구축하기 위해 등장함.

---

📌 왜 클라이언트 사이드 프레임워크가 필요할까?

📌 1. 복잡한 UI 상태 관리

• 실시간 채팅, 피드, 알림 등 동적인 화면 갱신 필요
• 데이터가 바뀌면 화면(UI)도 즉시 업데이트되어야 함

📌 2. 수많은 DOM 요소 조작

• 친구 이름이 바뀌면 타임라인, 스토리, 알림창 등 모든 UI가 함께 바뀌어야 함
• Vanilla JS로 일일이 DOM 조작하면 버그 발생 + 유지보수 어려움

---

💡 SPA (Single Page Application)이란?

• 한 번 로딩된 후, 페이지 이동 시 전체 갱신이 아니라 일부만 동적으로 업데이트
• 사용자 경험 향상 (새로고침 없이 부드러운 화면 전환)
• 예: Instagram, Gmail, Google Maps 등

[초기 HTML 로드]
    ↓
[클릭 이벤트 발생]
    ↓
[필요한 데이터만 서버 요청 → 화면 일부만 갱신]

---

🎨 CSR (Client Side Rendering)

• HTML/CSS는 최소한만 로드

• 나머지 렌더링은 브라우저가 JS로 동작하며 직접 그림

• Ajax 요청을 통해 데이터 받아와서 동적으로 화면 그리기

[초기 요청] → index.html + JS 다운로드
             ↓
     JS 실행 → DOM 조작 → 화면 렌더링

---

✅ CSR의 장점

• 빠른 화면 전환

• 서버 부하 분산

• 프론트/백 명확한 분리 → 유지보수 편리

• 네이티브 앱과 유사한 UX

❌ CSR의 단점

• JS 다운로드 전까지 초기 로딩 느림

• SEO(검색 최적화)에 불리

---

🧬 Vue.js 핵심 개념 정리

💡 Vue란?

• Evan You가 만든 UI 중심의 JavaScript 프레임워크

• 학습 곡선이 낮고 문법이 직관적

• 반응형(Reactive) 시스템 내장

• 컴포넌트 기반 구조 → 유지보수 & 재사용성 ↑

---

✨ Vue 핵심 기능 요약

기능	설명
선언적 렌더링	템플릿 내에서 데이터 바인딩 가능 ({{ message }})
반응형 상태 관리	ref()를 사용해 변화 추적 가능
컴포넌트 구조	UI를 작은 단위로 나누어 설계 가능
이벤트 처리	v-on, @click 등으로 사용자 입력 감지

---

🔧 첫 번째 Vue 앱 구조

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="count++">Count is: {{ count }}</button>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const message = ref("Hello Vue!");
    const count = ref(0);

    return { message, count };
  }
});

app.mount('#app');
</script>

---

🧪 ref()의 역할

• ref()는 Vue에서 반응형 데이터(reactive data)를 만들기 위한 함수

• 내부 값 접근 시 .value 사용

• 템플릿에서는 자동 언래핑

const msg = ref('Hello');
console.log(msg.value); // Hello

---

⚠️ 템플릿에서 ref 사용할 때 주의점

위치	언래핑 여부
최상위 템플릿 변수	✅ 자동 언래핑
객체 내부 (ex: object.id)	❌ 직접 .value 사용 필요

---

🧷 이벤트 처리 in Vue

<button @click="increment">Click me</button>

setup() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };

  return { count, increment };
}

---

🔍 Vue의 선언적 렌더링

<h1>{{ message.split('').reverse().join('') }}</h1>

• 템플릿에서 JavaScript 표현식을 직접 사용할 수 있음

---

✅ 최종 요약

• 프론트엔드는 UI와 사용자 경험 중심의 웹 화면을 만드는 영역
• 복잡한 인터랙션을 처리하기 위해 SPA, CSR 구조가 필수
• Vue.js는 직관적이고 반응형 상태 관리가 강력한 JS 프레임워크
• ref()로 선언된 데이터는 자동 반응형이며, 템플릿에서 바인딩 가능
• @click, v-on 등 이벤트 처리도 선언적으로 지원됨