본문 바로가기

Vue.js9

단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발 1. 단일 파일 컴포넌트(SFC)Vue 컴포넌트를 하나의 파일(.vue)로 작성하는 방식으로, `template`, `script`, `style`을 한 곳에 포함하여 관리 가능함.1.1 단일 파일 컴포넌트의 필요성컴포넌트 기반 아키텍처를 활용하여 유지보수성과 재사용성을 극대화할 수 있음HTML, JavaScript, CSS를 하나의 파일에서 관리하여 코드 가독성을 향상시킴프로젝트 구조를 체계적으로 관리할 수 있어 확장성과 협업에 용이함1.2 SFC 파일 구조 2. 프로젝트 설정2.1 번들링(Bundling) 개념Vue 프로젝트는 브라우저에서 실행되기 전에 여러 개의 파일을 하나의 번들로 묶어 최적화된 상태로 변환함Vite는 빠른 개발 서버와 빌드 속도를 제공하는 Vue 공식 추천 번들링 도구임2.2 .. 2025. 4. 4.

06 스타일 적용 1. HTML 요소에 스타일 적용Vue에서는 `v-bind:style` 또는 `:style`을 사용하여 동적으로 스타일을 적용할 수 있음.1.1 인라인 스타일Vue의 data 속성에서 스타일을 객체 형태로 정의하고, 이를 `:style`에 바인딩하여 적용.CSS 속성은 카멜 표기법(camelCase)으로 작성해야 함. 테스트 let vm = Vue.createApp({ data() { return { style1: { backgroundColor: "aqua", color: "black", } }; }, methods: { overEvent() { .. 2025. 4. 4.

05 이벤트 처리 1. 이벤트 처리 방식1.1 인라인 이벤트 처리`v-on` 디렉티브를 사용하여 이벤트를 직접 처리작성법:기본: `v-on:[이벤트 이름]="표현식"`단축 표현: `@[이벤트 이름]="표현식"`이벤트 객체 필요 시: `@[이벤트 이름]="함수명($event)"`예제: 기본 이벤트 처리 금액: 입금 인출 계좌 잔고: [{{balance}}]1.2 이벤트 핸들러 메서드`methods` 옵션에 이벤트 처리 함수를 정의하여 사용조건문, 반복문 등 복잡한 로직을 처리 가능예제: 이벤트 핸들러 사용 금액: 입금 인출 계좌 잔고: [{{balance}}]2. 이벤트 객체 (event, e)2.1 주요 이벤트 객체 속성속성명 설명`target`이벤트가 발생한 HTML 요소`currentTar.. 2025. 4. 4.

04 Vue 인스턴스 1. Vue 인스턴스란?Vue 애플리케이션은 `Vue.createApp()` 메서드를 호출하여 Vue 인스턴스를 생성하는 것으로 시작함. Vue 인스턴스는 Vue의 기본 단위이며, 데이터와 DOM을 연결하여 반응형 UI를 제공함.let vm = Vue.createApp({ name: "App", data() { return { name: "" }; },}).mount("#app");Vue 인스턴스의 특징Vue 애플리케이션에서 단일 또는 여러 개의 Vue 인스턴스를 생성 가능`mount()` 메서드를 통해 특정 DOM 요소에 연결됨데이터, 컴퓨티드 속성, 메서드, 생명주기 훅 등을 포함함2. Vue 인스턴스 옵션2.1 data 옵션컴포넌트의 데이.. 2025. 4. 3.

03 Vue.js 기초와 Template 1. MVVM 패턴Vue.js는 MVVM(Model-View-ViewModel) 패턴을 기반으로 동작하는 프레임워크입니다.1.1 MVVM 패턴 구성요소Model: 애플리케이션의 데이터와 비즈니스 로직을 담당View: HTML과 CSS로 작성된 사용자에게 보이는 부분ViewModel: View의 실제 논리 및 데이터 흐름을 담당하는 부분2. Vue.js 기본 개념2.1 보간법 (Interpolation)데이터를 템플ㅇ릿에 동적으로 표시하기 위해 {{ }}(이중 중괄호)를 사용예제: {{ message }}3. Vue 디렉티브Vue에서 제공하는 DOM 조작과 데이터 바인딩을 위한 속성입니다.3.1 주요 디렉티브 개요디렉티브 설명 예제v-text텍스트 콘텐츠 바인딩v-htmlHTML 콘텐츠 바인딩v-bind.. 2025. 4. 3.

02 Vue.js를 위한 ES6 1. ES6 소개ES6(ECMAScript 6): JavaScript의 표준화된 버전 (2015년 등장)일부 브라우저에서 ES6 기능 미지원 → 최근에는 대부분 지원됨2. let, const2.1 let블록 {} 단위로 유효 범위 지정선언 없이 사용 시 에러 발생 (진정한 지역변수)중복 선언 불가let msg = "GLOBAL";function outer() { let msg = "OUTER"; console.log(msg); if (true) { let msg = "BLOCK"; console.log(msg); }}outer();실행 결과OUTERBLOCK2.2 const상수 선언용 키워드값 변경 불가 (단, 객체나 배열 내부 속성 변경 가능)const p1 = { name: 'joh.. 2025. 4. 3.

이전 1 2 다음

티스토리툴바