📌 컴포넌트에 v-model 만들기 1. 기본 동작 및 예시 >컴포넌트를 만든 후 해당 컴포넌트에 v-model을 적용하려면 @update:modelValue 이벤트를 사용하여 v-model을 만들 수 있다. 컴포넌트에 v-model을 적용한다는게 무슨말이냐면, 우리가 기본적으로 v-model로 반응형 변수를 양방향 바인딩 시켰던것처럼, import해서 쓰는 컴포넌트에서도 양방향 바인딩을 적용하고 싶다는 것이다. 우리가 이름을 쓰는 창을 A컴포넌트로 만들고 부모창에서 A를 불러와서 썼다고 가정해보자. A컴포넌트에서 입력되는 '123123124'라는 값이 v-model처럼 부모창의 반응형 변수 username과 양방향 바인딩 되길 바란다. 이 때 필요

이전 포스팅에서 props와 emit에 대해 다뤘다. 이번 포스팅에서는 그 중 emit에 대해 좀 더 자세히 다뤄보겠다. 📌 emit 이벤트 내보내기 1. 이벤트 발신/수신 >자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보낼 수 있다. 이벤트는 컴포넌트의 emit 메서드를 통하여 발생시킬 수 있다. 컴포넌트

📌 1. Props 1-1. props란? >**컴포넌트에 등록할 수 있는 사용자 정의 속성. 간단히 말하면, 자식 컴포넌트에서 props를 선언하면 부모 컴포넌트에서 데이터(속성)를 전달할 수 있다.** 위의 그림을 통해 직관적으로 알 수 있다. 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달시키는 역할이다. 쉽게 예시 먼저 살펴보자. 부모 컴포넌트 TheView.vue에서 자식 컴포넌트인 AppCard.vue에 title, contents 데이터를 전달했고, 자식 컴포넌트인 AppCard.vue에서 props를 선언하여 전달 받았다. 이처럼, Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 쓰인다.

싱글파일컴포넌트에서 CSS기능 (scoped / 모듈) 그리고 컴포넌트 등록시 명명 규칙등의 가이드를 분리하여 정리한 포스팅입니다. 지속적으로 가이드를 추가 수정 할 예정입니다. 📌 1. CSS 기능 (scoped / module) 1) Scoped CSS >``태그에 scoped속성이 있는 경우 해당 CSS는 현재 컴포넌트의 요소에만 적용된다. 해당 CSS는 현재 컴포넌트의 요소에만 적용된다. 이게 무슨말이냐면, scoped 속성이 없는 경우에는 A컴포넌트에서 적용한 스타일이 B컴포넌트에 영향을 미칠 수 있다는 얘기다. 나는 A컴포넌트의 스타일을 고쳤는데 B컴포넌트 화면이 이상하게 되어버리는.. 현상이 일어날 수 있다. scoped를 쓰지 않는 경우 화면 명을 클래스네임으로 붙여주고 test01.greeting{ } 스타일을 적용하는 방법도 있다.(scoped를 몰랐을 때 회사에서 이렇게 개발했었음,, 매우 비효율적)

📌 1. 컴포넌트(SFC / String) 1. Single File Component(SFC) >기본적으로 Single-File Component는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법이다. Vue에서 Single-file component는 템플릿(template), 로직(script), 스타일(style)을 하나의 파일로 캡슐화한 특수 파일 형식(*.vue)을 말한다. 빌드도구를 사용할 때 컴포넌트는 일반적으로 SFC로 정의할 수 있다. 1) `` 영역 각 *.vue 파일은 한 번에 최대 하나의 top-level `` 블록을 포함할 수 있다. 콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고, JavaScript 렌더 기능으로 사전 컴파일되고, render 옵션으로 내보내어 컴포넌트에 첨부된다. **2) `<s

📌 1. Watch >composition API의 watch는 반응형 상태가 변경 될 때마다, 이를 감지하여 특정 작업을 수행하게 하는 "감시자 역할"을 한다. 한 마디로, 반응형 상태가 변경 되었을 때 이를 감지하여 다른 작업(DOM변경, 비동기 작업 등등..)을 해야하는 상황에서 사용하는 속성이다. 간단한 예시를 살펴보자. ✨ 예제 1 위의 예시에서 message의 값이 'Hello World!'로 변경된다면, 콘솔창에는 다음과 같이 출력될 것이다. watch의 첫 번째 매개변수는 다양한 타입(ref, reactive, computed, array등)이 될 수 있다. ✨ 예제 2 여기서 주의할 점은 위와 같은 방식으로는 반응형 객체의 속성을 볼 수 없다는 것이다. 우리는 너무나 당연하게도 watch를 객체의 속성에도 사용

📌 양방향 바인딩 v-model 1. v-model 이란? >입력 요소의 상태와 자바스크립트의 상태를 동기화 시켜주는 디렉티브. 즉, v-model은 양방향 바인딩을 시켜주는 디렉티브이다. 양방향 바인딩이란 무엇일까? 말 그대로, 단방향이 아닌 양방향을 연결시켜주는 바인딩이다. 우리가 이전에 주로 사용했던 v-bind를 살펴보자. v-bind는 단방향 바인딩 디렉티브이다. 먼저 v-bind를 살펴보자. 자바스크립트에서 작성한 "안녕하세요"는 `의 textValue`로 전달된다. 하지만, input 입력창에 사용자가 입력한 데이터는 자바스크립트의 textValue로 전달되지 않는다. 쉽게 말하면, javaScript → html 방향으로는 데이터가 가고 있는데 javaScript ← html 방향으로는 데이터가 가지 않는 것이다. <img src="https://velog.velcdn.com/images/falli

들어가기에 앞서 먼저 예시부터 살펴보자. 이와 같은 화면에서 ``를 클릭하면 어떻게 될까? ` → → ` 순서로 3개의 얼럿 창이 뜰 것이다. 왜 이런 현상이 일어나는 것일까? `를 클릭하면, `의 얼럿창만 뜨도록 하려면 어떻게 해야할까? 이를 해결하려면 우리는 버블링과 캡처링의 개념을 알아야 한다. 📌 버블링(bubbling) 1. 버블링이란? >한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 한 마디로, 이벤트가 실행된 요소부터

📌 1. 디렉티브(Directives)란? >**디렉티브는 v-접두사가 있는 특수 속성이다. 그대로 직역하면 '지시'를 뜻한다. 즉, 디렉티브는 기능상에서 중요한 역할인 컴포넌트(또는 DOM요소)에게 " Vue는 여러가지 내장 디렉티브를 제공한다. v-text v-html v-show v-if v-on v-bind v-model ... 이전 포스팅들에서도 썼던 이미 익숙한 디렉티브들도 보인다. 천천히 디렉티브들을 살펴보자. 📌 2. 디렉티브(Directives) 구성 디렉티브는 다음과 같이 구성되어 있다. 디렉티브(directives) : v- 접두사가 있

📌 v-for 1. v-for 배열 >v-for는 반복문을 사용하기 위한 디렉티브이다. 배열 또는 객체의 항목을 순차적으로 가져와 렌더링 할 수 있다. v-for="item in items" : items 배열에서 항목을 순차적으로 item에 할당. v-for=”(item, index) in items” : 배열 인덱스를 가져올 수 있다. 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야한다. (id, index..) 이해를 돕기 위해 바로 예시를 살펴보자. items 배열안에 있는 항목들을 나열하고 싶다. 'Java', 'HTML', 'CSS', 'JavaScript'를 나열한다고 가정했을 때, v-for로 반복을 실행해 쉽게 나열할 수 있다. items안의 항목들을 순차적으로 item에 할당한다. 첫 번째 반복에서 item에는 items의 0번째 인덱스인 `{ id: 1, message: 'Java

📌 1. v-if >v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용된다. 위의 코드에서 visible이 true라면 "Hello Vue3!" 텍스트가 화면에 렌더링 될 것이고, false라면 렌더링 되지 않을 것이다. 조건에 따라 화면에 렌더링을 하게 해주는 것이 v-if이다. v-else-if, v-else도 사용할 수 있다. 이름에서 알 수 있듯이 v-if에 대한 else if 블록이다. 여러 조건을 연결하여 사용할 수 있다. 여러개의 HTML요소를 v-if디렉티브로 연결하고 싶다면 ``를 사용할 수 있다. 🚫 주의사항 > v-if와 v-for를 함께 쓰는 것은 권장하지 않는다. 자세한 내용은 뷰의 공식 **[스타일 가이드](https://v3.ko.vuejs.org/style-guide/#v-if%E1%84%8B%E1%85%AA-v-for-%E1%84%83%E1

📌 1. HTML 클래스 동적 바인딩 >클래스를 동적으로 바인딩 하기 위해서는 :class(v-bind:class)를 사용할 수 있다. 1) 객체 바인딩 ① - 클래스 객체 동적 바인딩 위의 예시는 클래스 동적 바인딩의 기본적인 예시다. isActive가 true이므로, 클래스에 acitve가 바인딩된다. 개발자 도구를 켜서 확인해보면, `` 를 확인 할 수 있다. 이처럼 클래스의 값을 동적으로 바인딩 시킬 수 있다. 2) 객체 바인딩 ② - 스타일 동적 바인딩 이번엔 동적 바인딩 된 클래스를 이용해 동적으로 스타일을 입혀보자. 클래스를 동적으로 바인딩 했으므로, isActive가 true라면 active가 바인딩 되어 해당 클래스의 스타일이 적용된다. 예를 들어, 버튼 클릭 이벤트로 isActive를 true 혹은 false로 변경해 스타일을 변환 시킬 수 있다. <b

📌 1. computed 1-1. computed란? >템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성. 템플릿 안에 다음과 같은 코드가 있다고 가정해보자. 위와 같이 템플릿 표현식 내 코드가 길어질 경우, 가독성이 떨어지고 유지보수가 어려워질 수 있다. 이러한 코드를 여러곳에서 반복적으로 사용해야 한다면 매우 비효율적일 것이다. 이럴때 사용하는 것이 계산된 속성(computed property) 이다. 위의 코드에서 computed를 사용해보자. template 표현식 내 코드가 더욱 깔끔하고 명확하게 되었다. 또한, computed로 인해 다른 곳에서도 자유롭게 사용할 수 있게 되었다. 이처럼 computed를 사용하는 이유는 가독성과 재사용성을 위해서이다. 1-2. computed 속성의 장점 >** 1) computed 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하

📌 1. 반응형이란? > 반응형이란, 데이터가 변경되었을 때 이를 감지하고 이에 반응하여 DOM이 자동으로 업데이트 되는 성질을 말한다. 즉, 데이터를 변경하면 화면이 변경되는 것이다. 쉬운 이해를 위해 반응형 상태를 생성하는 코드를 살펴보자. 버튼을 클릭하면, state.count의 값이 +1로 증가하며, 데이터 변경을 감지하여 새롭게 바뀐 데이터값이 화면에 자동으로 업데이트 된다. 변경된 데이터 값을 렌더링 해주는 작업을 하지 않아도 되는 것이다. 이것을 '반응형 상태'라고 부른다. 📌 2. reactive, ref 반응형 상태를 선언하기 위한 방법에는 reactive, ref가 있다. 2-1. reactive > - 원본 객체에 대한 Proxy를 제공해서 객체에 대한 반응성을 제공. Object, Array, Map, Set과 같은 타입에 사용. .value를 생략(언래핑)

📌 1. Composition API > 코드의 가독성을 높이고, 컴포넌트의 로직을 유연하게 구성할 수 있도록 하는 함수 기반의 API. Vue3 공식문서에서 Composition API를 쓸 것을 권장하고 있다. 1.1 Composition API란? Composition API는 Vue3에서 새로 추가된 함수 기반의 API로, 컴포넌트 로직을 유연하게 구성할 수 있도록 하여 코드의 재사용성과 가독성을 높여준다. 기존의 Vue는 프로젝트 규모가 커질수록 컴포넌트의 계층 구조가 복잡해지며, 이로인해 추적 및 관리가 어려웠다고 한다. 이러한 Vue의 단점을 커버하기 위해 Vue3부터 컴포지션 API가 추가되었다. 1.2 Composition API 살펴보기 > Composition API는 옵션을 선언하는 대신 import한 함수를 사용하여 vue 컴포넌트를 작성할 수 있는 API 세트이다. **반