ksundev 님의 블로그

개요Vue 3의 Single File Component(SFC)에서 부모-자식 컴포넌트 간의 데이터 통신은 props와 emit을 통해 이루어집니다. 이번 포스트에서는 실제 예제를 통해 이 두 개념을 자세히 살펴보겠습니다.Props: 부모에서 자식으로 데이터 전달Props란?Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 자식 컴포넌트는 props를 통해 받은 데이터를 읽기 전용으로 사용할 수 있습니다.예제 코드 분석부모 컴포넌트 (App.vue) 자식 컴포넌트 (AppHeader.vue) {{ appTitle }} 타이틀 변경Props 사용법부모에서 props 전달: :appTitle="message" 형태로 v-bind를 사용자식에서 props 정의: prop..

Vue.js 기초: 컴포넌트 구조와 VSCode Snippets 활용하기개요Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 JavaScript 프레임워크입니다. 이 글에서는 Vue 컴포넌트의 기본 구조와 VSCode에서 개발 효율성을 높이는 방법에 대해 알아보겠습니다.Vue 컴포넌트 기본 구조Vue 컴포넌트는 크게 세 부분으로 구성됩니다:1. Template (템플릿) {{ message }} hi??참고로 @는 v-on의 축약어입니다.2. Script (스크립트)3. Style (스타일)VSCode Snippets로 개발 효율성 높이기Vue VSCode Snippets 확장 설치Vue.js 개발을 더욱 효율적으로 하기 위해 Vue VSCode Snippets 확장을 설치하는 ..

Vue.js 싱글 파일 컴포넌트 (SFC) 구조 이해하기🧩 Vue 싱글 파일 컴포넌트 (SFC) 구조Vue.js의 가장 큰 특징 중 하나는 싱글 파일 컴포넌트(Single File Component, SFC)입니다. 하나의 .vue 파일 안에 HTML, JavaScript, CSS가 모두 포함되어 있습니다.App.vue 파일 구조 각 섹션의 역할섹션역할변환 결과HTML 마크업브라우저에서 렌더링되는 DOM 구조JavaScript 로직컴포넌트의 동작과 데이터 관리CSS 스타일컴포넌트의 시각적 표현SFC의 장점관심사 분리: HTML, JS, CSS가 하나의 파일에 있지만 명확히 구분됨모듈화: 각 컴포넌트가 독립적인 파일로 관리재사용성: 다른 컴포넌트에서 쉽게 import하여 사용개발 효율성: 관련 ..