Vue

npm create vite@latestnpm install tailwindcss @tailwindcss/vite

main.ts 에 라우팅 설정 후 app.vue 에서 navigation 을 만든다router-link 에 연결된 href 는routes 에서 사용하고 있는 각 컴포넌트에 연결되고router-view 에 렌더링 된다app.vue 를 레이아웃 컴포넌트 처럼 사용하는 방법

Vue3 에서는 setup() 을 script 내에서 처리하고defineComponent 대신definedOptios 를 사용

Proxy는 ES6(ES2015)에 추가된 JavaScript 내장 객체로, 대상 객체(target)의 기본 동작을 가로채서 커스텀 동작을 정의할 수 있게 해줍니다.Vue3의 반응성 시스템이 Proxy를 기반으로 동작하며, 이를 통해 자동 의존성 추적과 효율적인 UI

선언적 렌더링은 "무엇을 보여줄지"만 선언하면, 프레임워크가 알아서 DOM을 업데이트하는 방식입니다. 명령형 프로그래밍처럼 document.getElementById().innerHTML = ... 같은 DOM 조작을 직접 하지 않습니다.State는 컴포넌트의 동적 데

Vue는 점진적 프레임워크(Progressive Framework)라 불립니다. 작은 기능부터 큰 애플리케이션까지 점진적으로 확장할 수 있기 때문입니다.Vue 공식 사이트는 스스로를 "The Progressive JavaScript Framework"라고 소개합니다.

Vue의 싱글 파일 컴포넌트(Single File Component, SFC) 는.vue 파일 하나에 템플릿(HTML) + 로직(JavaScript) + 스타일(CSS) 을 모두 담을 수 있는 구조다.즉, 컴포넌트 단위로 완전히 독립된 작은 모듈처럼 동작하며,“이 컴포

컴포넌트는 생성 → 업데이트 → 소멸이라는 흐름을 가진다.이 과정을 라이프사이클(Lifecycle) 이라고 하며, 특정 시점에 맞춰 로직을 실행할 수 있다.Vue와 React 함수 컴포넌트 모두 함수 기반으로 라이프사이클을 관리한다.onBeforeMount: DOM이

Vue3에서 새롭게 도입된 컴포지션 API(Composition API) 는 기존 옵션 API와 달리,setup() 함수 안에서 상태와 로직을 정의하고 이를 조합하는 방식이다. 즉, 상태와 로직을 함수 단위로 묶어내는 구조로, 코드 재사용성과 가독성을 높인다.이 방식

Vue는 애플리케이션 인스턴스 레벨에서 전역 에러 핸들러를 제공한다.app.config.errorHandler를 통해 모든 하위 컴포넌트에서 발생하는 에러를 포착 가능하다.외부 라이브러리(Sentry 등)도 이 부분을 후킹해 에러 로깅을 구현한다.브라우저 전역 이벤트(

Vue는 app.use(plugin)을 통해 전역 플러그인을 등록할 수 있음app.config.globalProperties에 기능을 추가 → 모든 컴포넌트에서 접근 가능로깅, 에러 핸들링, 인증, 유틸 함수 등 공통 기능을 전역에서 제공장점: 중복 코드 감소, 일관성

Vue의 템플릿은 HTML 기반으로 작성되며, 브라우저에서 정상적으로 파싱됩니다.데이터 바인딩과 표현식은 직관적으로 사용할 수 있습니다.보간법(Mustache): {{ msg }}원시 HTML 출력: v-html (XSS 주의)속성 바인딩: v-bind / : 축약형불