vue-router를 이용한 라우팅 - Vue.js

Vue-routerSPA(단일 페이지 애플리케이션: Single Page Application)하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공여러 화면을 하나의 페이지 안에서 제공, 화면을 별도로 로딩하지 않음 ➡ 화면마다 고유의 식별자(URI)를 기반으로 화면을 렌더링 해야 함요청한 URI 경로에 따라 각각 다른 화면이 렌더링 되도록 함 ➡ vue-router 라이브러리 이용 vue-router의 기본 사용법1️⃣ createRouter()createRouter(options):Routerrouter 객체를 생성URI 와 이 경로를 처리할 컴포넌트 매핑import { createRouter, createWebHistory } from 'vue-router' … const route..

• format_list_bulleted Vue.js
• · 2025. 3. 28.
• textsms

HTML, SFC, Options, Composition - Vue.js

HTML, SFCVue 파일 형식HTMLHyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어주로 텍스트, 이미지, 링크, 버튼 등 웹 페이지의 콘텐츠와 구조를 기술하는 데 사용HTML은 단독으로 동작하지 않고 CSS, JavaScript와 함께 사용되어 시각적 스타일링 및 동적인 기능을 구현 // ... SFC (Single-File Components, 싱글 파일 컴포넌트)*.vue 파일컴포넌트의 템플릿 로직 및 스타일을 하나의 파일로 묶어낸 특수한 파일 형식HTML(), CSS(), JavaScript( //...  Options API, Composition APIVue 컴포넌트 작성 스타일Options APIOption의 data, method,..

• format_list_bulleted Vue.js
• · 2025. 3. 26.
• textsms

반응형 기초 - Vue.js

반응형 상태 설정옵션 API 에서 data 옵션을 사용해 컴포넌트의 반응형 상태를 선언Vue는 새 컴포넌트 인스턴스를 만들 때 함수를 호출하고, 반환된 객체를 반응형 시스템에 래핑객체 안의 모든 속성은 해당 컴포넌트 인스턴스에서 최상위에 프록시(proxy)됨해당 컴포넌트 인스턴스 : 매서드 및 생명 주기 훅에서 this나중에 값이 추가되는 인스턴스 속성은 어떠한 값이라도 사전에 선언 필요let vm = Vue.createApp({ name: "App", data() { return { // 인스턴스 속성 }; },}).mount("#app");⚠️ $ , _ 로 시작하는 이름은 Vue에서 특수한 용도로 사용되고 있으므로 일반 식별자의 시작 문자로 사용하면 안 됨어플리케이션 인스턴스..

• format_list_bulleted Vue.js
• · 2025. 3. 22.
• textsms

계산된 속성(Computed Property) - Vue.js

템플릿 내에서 코드가 반복되고 있는 등 반응형 데이터를 포함하는 복잡한 논리의 경우 사용data 나 다른 속성이 변경될 때 함수가 실행되어 저장된 캐싱된 값 ↔ data 옵션함수의 실행은 의존하고 있는 속성(프록시) 또는 data가 변경될 때 한 번 호출됨함수명이 계산된 속성명이 됨 1보다 큰 수: 1부터 입력한 값까지의 합: {{sum}} 1부터 입력한 값까지의 합: {{sum}} 1부터 입력한 값까지의 합: {{sum}}  계산된 캐싱 vs 메서드메서드를 호출해서 동일한 결과를 얻을 수 있어 결과적으로 두 가지 접근 방식은 동일계산된 속성 : 의존된 반응형을 기반으로 캐싱됨변경되지 않은 여러 곳에서 접근할 경우 getter 함수를 다시 실행하지 않고 이전에 계산된 결과를 즉시 ..

• format_list_bulleted Vue.js
• · 2025. 3. 22.
• textsms

이벤트 핸들링 - Vue.js

v-on 디렉티브를 사용하여 이벤트 리스닝v-on:[이벤트 이름]="표현식"@[이벤트이름]="표현식" // 단축 표현 핸들러 값은 다음 중 하나인라인 핸들러 : 이벤트가 트리거될 때 실행되는 인라인 JavaScript메서드 핸들러 : 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 인라인 핸들러간단한 경우 사용 this.name=e.target.value"** /> 이름: {{name}} 인라인 핸들러에서 메서드 호출네이티브 이벤트 객체 대신 사용자 지정 인자를 메서드에 전달할 때 사용methods: { say(message) { alert(message) }}안녕이라고 말하기잘가라고 말하기 인라인 핸들러에서 이벤트 객체 접근$event 특수 키워드 사용 or 인라인 ..

• format_list_bulleted Vue.js
• · 2025. 3. 21.
• textsms

템플릿 문법 - Vue.js

텍스트 보간법메세지: {{ msg }}{{}} 이중 중괄호 사용해당 컴포넌트 인스턴스의 msg 속성의 값으로 대체됨HTML 출력v-html 디렉티브 사용: v-html 디렉티브 사용rawHtml 속성 값을 일반 HTML로 해석한 것으로 대체됨데이터 바인딩은 무시됨⚠️ 임의의 HTML을 동적으로 렌더링하면 XSS 취약점 발생하므로 신뢰할 수 있는 컨텐츠에만 사용속성 바인딩 {{}} 은 HTML 속성(attribute)내에서 사용 불가하므로 대신 v-bind디렉티브 사용element의 id속성을 dynamicId 속성과 동기화된 상태로 유지바인딩된 값이 null, undefined 라면 element 속성이 제거되어 렌더링Boolean 속성버튼element에 표기했는지 여부로 참/거짓 값을 나타내는 속성..

• format_list_bulleted Vue.js
• · 2025. 3. 19.
• textsms