반응형 프론트엔드/뷰12 [Vue] 6장: 리스트 렌더링 - 동적인 목록 만들기 6장: 리스트 렌더링 - 동적인 목록 만들기배열 데이터를 UI에 동적으로 렌더링하는 방법을 배웁니다. Vue가 리스트의 변경 사항을 효율적으로 추적하고 업데이트하는 데 필요한 key 속성의 중요성을 이해합니다.1. 핵심 개념v-for 디렉티브: 배열이나 객체를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링하는 데 사용됩니다.문법: item in items 형식. items는 원본 데이터 배열이고 item은 배열에서 반복되고 있는 현재 요소의 별칭입니다.v-for는 (item, index) in items 형태로 두 번째 인자인 index도 받을 수 있습니다.key: v-for를 사용할 때 반드시 제공해야 하는 특별한 속성입니다.왜 필요한가?: Vue는 key를 사용하여 각 노드의 ID를 추적하고,.. 2025. 9. 23. [Vue] 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기 5장: 조건부 렌더링 - 상황에 맞는 UI 보여주기조건부 렌더링은 특정 조건에 따라 다른 엘리먼트나 컴포넌트를 렌더링하는 기법입니다. Vue에서는 v-if, v-else-if, v-else, v-show 디렉티브를 사용하여 이를 구현합니다.1. 핵심 개념 및 기법v-if, v-else-if, v-else:v-if는 디렉티브의 표현식이 true일 때만 블록을 렌더링합니다.v-else-if는 이전 v-if 또는 v-else-if 블록이 false일 때 자신의 조건을 검사합니다.v-else는 앞선 모든 v-if, v-else-if 조건이 false일 때 렌더링됩니다.이 디렉티브들은 "실제" 조건부 렌더링입니다. 조건이 false이면 해당 엘리먼트와 그 안의 자식 컴포넌트들은 DOM에서 완전히 제거되고 파괴됩니.. 2025. 9. 23. [Vue] 4장: 이벤트 핸들링 - 사용자와의 상호작용 4장: 이벤트 핸들링 - 사용자와의 상호작용사용자의 클릭, 입력, 마우스 움직임 등 다양한 행동에 반응하는 방법을 배웁니다. Vue의 v-on 디렉티브를 사용하여 DOM 이벤트를 수신하고 JavaScript 코드를 실행할 수 있습니다.1. 핵심 개념v-on 디렉티브: DOM 이벤트를 수신하고 특정 JavaScript 코드를 실행하는 데 사용됩니다. 단축 문법으로 @를 사용합니다. (예: v-on:click -> @click)메서드 핸들러: 이벤트가 발생했을 때 실행할 로직이 복잡할 경우, {{ message }} 클릭하세요 이곳에 마우스를 올려보세요. 폼 제출 예제 2: 이벤트 핸들러에 인자 전달하기map 안에서 특정 항목에 .. 2025. 9. 23. [Vue] 3장: 반응성과 생명주기 - 살아 움직이는 컴포넌트 3장: 반응성과 생명주기 - 살아 움직이는 컴포넌트반응성(Reactivity)은 Vue의 가장 핵심적인 특징입니다. 데이터가 변경되면 화면이 자동으로 업데이트되는 원리를 이해하고, 컴포넌트의 '생명'과도 같은 생명주기 훅을 다루는 방법을 배웁니다.1. 핵심 개념반응형 상태(Reactive State): Vue는 JavaScript 객체를 프록시(Proxy)하여, 객체의 속성이 변경되는 것을 감지하고 관련 UI를 자동으로 업데이트합니다.ref: 원시 값(primitive value, 예: String, Number, Boolean)을 반응형으로 만들기 위해 사용합니다. ref는 .value 속성을 가진 객체를 반환하며, 스크립트 내에서는 항상 .value로 값에 접근해야 합니다. (템플릿에서는 자동으로 ... 2025. 9. 23. [Vue] 2장: Props - 컴포넌트에 생명 불어넣기 2장: Props - 컴포넌트에 생명 불어넣기Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 통로입니다. Props를 통해 재사용 가능한 동적인 컴포넌트를 만드는 방법을 배웁니다.1. 핵심 개념Props (Properties): 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터 묶음입니다. 자식 컴포넌트는 defineProps 매크로를 사용하여 수신할 props를 명시적으로 선언해야 합니다.단방향 데이터 흐름 (One-Way Data Flow): 모든 props는 부모와 자식 사이에 하향식 바인딩을 형성합니다. 부모 속성이 업데이트되면 자식으로 전달되지만, 자식 컴포넌트 내에서 props를 직접 변경해서는 안 됩니다. 이는 데이터 흐름을 예측 가능하게 만듭니다.Props 선언: .. 2025. 9. 23. [Vue] 1장: 템플릿과 컴포넌트 - Vue.js의 첫인상 1장: 템플릿과 컴포넌트 - Vue.js의 첫인상Vue 개발의 가장 기본이 되는 두 가지 개념, 템플릿 문법과 컴포넌트에 대해 배웁니다. UI를 레고 블록처럼 조립 가능한 부품으로 만드는 방법을 이해합니다.1. 핵심 개념컴포넌트(Component): Vue는 UI를 "싱글 파일 컴포넌트(Single File Component, SFC)"라는 독립적이고 재사용 가능한 .vue 파일 단위로 나누어 관리합니다. 각 컴포넌트는 자신만의 구조(HTML), 로직(JavaScript), 스타일(CSS)을 하나의 파일 안에 가집니다.템플릿 문법 (Template Syntax): Vue는 렌더링될 DOM을 선언적으로 설명하기 위해 HTML 기반의 템플릿 문법을 사용합니다. 데이터 바인딩, 디렉티브 등 강력한 기능을 제공.. 2025. 9. 23. 이전 1 2 다음 반응형