vuex는 중앙 집중식 데이터 관리를 위한 vue 공식 플러그인이다.프로젝트 구조가 복잡해지면 여러 컴포넌트들간에 props, emit, provide, inject 등으로만 데이터를 주고받기엔 너무 복잡해지기 때문에 이럴 경우 vuex를 사용한다.보편적으로 이 중앙

use를 통해 라우터를 연결createRouter 를 사용하여 라우터를 구성하여 exportcreateWebHashHistory 를 사용하여 Hash모드 적용

컴포넌트 - 속성 상속 기본적으로 컴포넌트 태그에 속성을 작성하면 컴포넌트의 최상위 요소에 속성들이 들어간다. 하지만 최상위 요소가 2개 이상일 경우 어느 요소에 속성이 들어가야할지 모르기 때문에 적용되지 않는다.

composition API는 분산되어 있는 로직을, 관련 있는 로직들끼리 그룹핑하기 위해 만들어졌다.기존 문법은 아래와 같이 여러 로직들이 섞인채로 작성되도록 설계되어 있다.하지만 composition api 문법을 사용하면 아래와 같이 관련 있는 로직별로 그룹핑하는

ref는 reference의 약자로, vue에서 간략히 DOM(Document Object Model)에 접근하게 해주는 속성이다.DOM에 접근하는 것이기 때문에 mounted() 라이프 사이클에서 접근해야 한다.자식 컴포넌트에 ref 속성으로 최상위 요소를 참조할 수

Props 같은 경우, 부모 > 자식 > 손자 컴포넌트 처럼 중첩된 컴포넌트 뎁스가 깊어질 수록 중간에 props 데이터만 전달해주기 위한 코드들이 무의미하게 많이 생성된다.Provide와 Inject는 이와 같은 과정 없이 다이렉트로 부모 컴포넌트에서 손자 컴포넌트로

컴포넌트 태그 사이에 정보를 넣어, 자식 컴포넌트로 컨텐츠를 전달할 수 있다.부모 컴포넌트의 컨텐츠를 자식 컴포넌트에 <slot></slot> 슬롯 태그가 선언된 위치에 받을 수 있다.부모 컴포넌트에서 컨텐츠가 넘어오지 않는다면 아래와 같이 <slot>

props

vue에서 양방향 데이터 바인딩은 v-model 디렉티브로 손쉽게 구현할 수 있다.하지만 한글 입력시 데이터가 반영되는 것에 지연이 생긴다.이것은 한글 특성상 초성,중성,종성 모두 입력이 되어야 하나의 글자가 완성되는 특징 때문이다.아래 이미지처럼 바로바로 데이터에 반

이벤트 수식어 e.preventDefault() 대신 prevent 수식어를 사용할 수 있다. e.preventDafault() 대신 .prevent 수식어를 붙일 수 있다. once 수식어를 붙이면 이벤트 핸들러가 1번만 실행된다. 수식어를 두개 이상 붙여서

이벤트 핸들러를 @click 디렉티브에 연결할 때 ()는 생략 가능핸들러 함수의 인자로 event 객체가 넘어옴인자를 넣고 싶을 때 event 객체를 넘기는 방법은 $event를 넘김하나의 요소에 이벤트 핸들러를 여러개 붙일 수 있다.이벤트 핸들러를 붙일 때 ()를 생

클래스 하나만 적용하는 케이스클래스 여러개 적용하는 케이스 1클래스 여러개 적용하는 케이스 2클래스 여러개 적용하는 케이스 3클래스 여러개 적용하며 부분적으로 조건 거는 케이스클래스 여러개 적용하는 케이스 2가 제일 많이 쓰일거 같고, 다른 케이스들은 저런 방법이 있다

watch는 데이터가 변경이 됐을 때 실행되는 로직이다.감지를 원하는 데이터명을 함수명으로 선언한다. (데이터가 변경되면 함수 호출)일반 데이터, computed의 데이터 등도 변경을 감지할 수 있다.아래와 같이 매개변수로 변경된 값이 들어온다.매개변수 newVal은

computed는 기본적으로 읽기 전용이다.버튼 클릭하면 아래와 같이 읽기 전용 이라고 경고가 뜨며 화면은 바뀌지 않는다.computed에 선언된 로직은 읽기 전용이며 캐싱이 된다. (함수를 여러번 호출하여 메모리를 낭비하는 비효율을 막아줌)기본적으로는 읽기 전용이지만