본문 바로가기

분류 전체보기328

[Vue] Slot을 이용한 컨텐츠 제공 slot을 사용해 부모 컴포넌트에서 텍스트 전달해주기 slot 태그는 자식 컴포넌트에서 부모 컴포넌트가 전달해주는 텍스트를 출력할때 사용한다. App.vue에서 Apple이라는 텍스트를 자식 컴포넌트 MyBtn에 전달해주고 전달해준 텍스트는 slot 태그 안에 삽입된다. Apple slot 태그 안에 텍스트가 있는 경우 부모 컴포넌트에서 전달해준 텍스트가 더 높은 우선순위를 가지므로 출력되지 않는다. 부모 컴포넌트 안에 전달해줄 텍스트가 없는 경우에만 slot 태그 안에 있는 문자가 출력된다. Banana v-slot을 사용해 전달해줄 텍스트 순서 보장해주기 v-slot 디렉티브는 같은 이름을 가진 자식 컴포넌트의 요소에 해당하는 텍스트를 전달해준다. v-slot은 #으로 축약해서 사용할 수 있다. (B.. 2022. 6. 18.
[Vue] 이벤트를 상속시켜주는 Emit 부모 컴포넌트의 이벤트 상속받기 부모 컴포넌트의 속성을 자식 컴포넌트가 상속받을 수 있었던 것처럼 이벤트도 자식 컴포넌트에 상속 시킬 수 있다. Banana 부모 컴포넌트에서 받은 이벤트는 최상위 요소(루트 요소)에게만 전달된다. 아래 예제에서 최상위 컴포넌트는 btn이라는 클래스를 가진 div 요소이므로 해당 요소에 이벤트 @click="log"가 추가된다. 만약 부모 컴포넌트의 이벤트를 상속받고 싶지 않다면 inheritAttrs에 false값을 주면 된다. 만약 최상위 요소가 여러개면 부모 컴포넌트의 이벤트는 상속되지 않는다. I love fruits 한개 이상의 최상위 요소가 있을때 부모 컴포넌트의 이벤트를 상속받을 수 있는 방법 1. 부모 컴포넌트에서 상속받고 싶은 이벤트를 emits의 배열에 .. 2022. 6. 17.
[Vue] v-bind="$attrs"를 사용해 컴포넌트의 속성 상속시키기 부모 컴포넌트의 속성 상속받기 부모 컴포넌트 App.vue에서 MyBtn에게 class와 style 속성을 전달해주었다. Banana 부모 컴포넌트에서 받은 속성은 최상위 요소(루트 요소)에게만 전달된다. 아래 예제에서 최상위 컴포넌트는 btn이라는 클래스를 가진 div 요소이므로 해당 요소에 maple이라는 클래스가 추가되고 color: red라는 style 속성도 추가되어 화면에 출력된다. 만약 부모 컴포넌트의 속성을 상속받고 싶지 않다면 inheritAttrs에 false값을 주면 된다. 만약 최상위 요소가 여러개면 부모 컴포넌트의 속성은 상속되지 않는다. I love fruits 한개 이상의 최상위 요소가 있을때 부모 컴포넌트의 속성을 상속받을 수 있는 방법 $attrs로 부모 컴포넌트의 속성에 .. 2022. 6. 17.
[Vue] 컴포넌트 만들기 (props 전달 방법, slot 사용하기) ⚠️ 이 포스팅은 Vue3(한국어): 컴포넌트 기초를 공부하고 정리한 블로그 포스팅입니다. ⚠️ 컴포넌트란? 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다 컴포넌트의 장점 1. 캡슐화 (모듈화) 2. 재사용성 증가 컴포넌트 만들어 불러오기 컴포넌트 만들어주기 컴포넌트를 불러오기 App.vue에서 MyBtn 컴포넌트를 불러왔기 때문에 두 컴포넌트의 관계는 App.vue(부모) MyBtn(자식) 관계가 된다. 부모 컴포넌트(상위 컴포넌트): 자식 컴포넌트를 불러오는 컴포넌트 자식 컴포넌트(하위 컴포넌트).. 2022. 6. 16.
[Vue] 폼 입력 바인딩 - 수식어 (lazy, number, trim) ⚠️ 이 포스팅은 Vue3(한국어): 폼 입력 바인딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 1. lazy v-model에 수식어 lazy를 붙여주면 폼 입력 요소가 포커싱되지 않는 상황에 값이 업데이트된다. {{ msg }} @change @change는 v-model에 수식어 lazy와 같이 input 요소가 포커싱되지 않는 상황에 값이 업데이트된다. {{ msg }} 2. number v-model에 수식어 number를 붙여주면 폼 입력 요소에서 받아온 값이 자동으로 숫자로 바뀐다. input 요소에서 숫자를 입력해도 받아온 데이터는 문자형 데이터로 전환된다. 이때 v-model의 수식어인 number를 사용하면 받아온 데이터는 항상 숫자로 변환된다. {{ msg }} 3. trim v.. 2022. 6. 16.
[Vue] 폼 입력 바인딩 (@input, :value vs v-model) ⚠️ 이 포스팅은 Vue3(한국어): 폼 입력 바인딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 폼 입력 요소(input, textarea, select)에는 사용자가 입력한 값을 받기 위해 양방향 데이터 바인딩을 생성해주어야 한다. 여기서 양방향 데이터란 데이터값이 바뀌었을때 해당 데이터를 사용하고 있는 모든 곳에 변경된 데이터로 업데이트 해주는 것을 말한다. 저장된 데이터와 그 데이터를 사용하는 곳이 양방향으로 연결되어있어 양방향 데이터라고 부른다. input, textarea, select 요소로 사용자가 입력한 값을 받아 반영하고 싶을때 3가지 방법이 있다. 1. 메서드 메서드를 사용해 사용자가 입력한 input 값을 받아오기 {{ msg }} 2. 인라인 메서드를 사용하지 않고 인라인으로 사용.. 2022. 6. 16.
[개발도구/에러해결] xcrun: error: invalid active developer path ⚠️ 에러내용 Mac 업데이트 후 iterm, terminal과 같은 개발도구에 아래와 같은 에러가 발생한다. xcrun: error: invalid active developer path ❗️ 해결방법 아래의 코드를 편집기에 입력해 xcode를 설치해준다. xcode-select --install 2022. 6. 15.
[Vue] 이벤트 핸들링 - 키 수식어 ⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 키 수식어 자바스크립트에서 key 접근 어떤 요소에 키보드 이벤트를 등록할때 키 코드를 확인해야 하는 경우가 많다. 아래의 예제처럼 input 요소에 사용자가 어떤 값을 입력한 경우 사용자가 입력한 값을 받아와서 처리하는 작업을 많이 해준다. 자바스크립트의 경우 event 객체에 있는 key값에 접근해 작업을 해주만 Vue에서는 간단히 이벤트핸들러에 접근하고 싶은 key를 바로 등록해줄 수 있다. Vue에서 key 접근 사용자가 입력한 key에 접근하기 위해 Vue에서는 key 수식어로 바로 접근이 가능하다. 2022. 6. 15.
[자바스크립트/한줄정리] 이벤트 버블링과 이벤트 캡처링 이벤트 버블링 이벤트가 상위 요소로 전파(자식 → 부모) 자식 요소를 선택했을때 부모 요소에 있는 이벤트가 모두 실행되는 현상 이벤트 캡처링 이벤트가 하위 요소로 전파 (부모 → 자식) 이벤트를 특정 상위요소에서 하위요소로 전파시켜 주는 현상 2022. 6. 15.
[Vue] 이벤트 수식어 (prevent, once, stop, capture, self, passive) ⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 이벤트 수식어 Vue는 복잡한 javascript 구현을 간단히 처리하기 위해 이벤트 수식어를 제공한다. @이벤트.이벤트수식어="수행할 이벤트" v-on:이벤트.이벤트수식어="수행할 이벤트" 이벤트 수식어의 종류 prevent: event.preventDefault()처럼 이벤트의 기본동작을 방지해준다 once: 이벤트를 한번만 실행해준다 stop: event.stopPropagation()처럼 상위 요소에 이벤트가 전파되는 것을 방지해준다 (이벤트 버블링 중단) capture: 이벤트를 특정 상위요소에서 하위요소로 전파시켜준다 (포착 단계에서만 이벤트를 발생시킨다) self: 요소가 화면에 노출된 부분에서만.. 2022. 6. 15.
[Vue] 이벤트 핸들링 ⚠️ 이 포스팅은 Vue3(한국어): 이벤트 핸들링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 이벤트 청취 v-on디렉티브는 @기호로 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행해준다. 실행하고 싶은 자바스크립트 코드를 넣어도 되고 미리 만들어둔 메서드를 연결할 수도 있다. 인라인 핸들러 Hello World Hello World 메서드 핸들러 Hello World Hello World 이벤트 핸들러에 메서드 연결해주기 1. 전달해줄 인수가 없는 경우 자바스크립트에서 함수를 호출하기 위해서는 반드시 소괄호가 포함되어야했지만 Vue에서 함수를 실행할때 전달해줄 인수가 없다면 함수 이름만으로 함수를 호출할 수 있다. 인수 없이 함수만 호출해줄때 첫번째 파라미터로 event 객체를 가진다... 2022. 6. 15.
[Vue] 리스트 렌더링 (v-for) ⚠️ 이 포스팅은 Vue3(한국어): 리스트 렌더링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 기본 배열 데이터로 리스트 만들어주기 기본 구조 배열에 있는 데이터를 하나씩 꺼내올때 v-for 디렉티브를 사용한다. items가 배열이라면 item in items 구조로 items에 있는 데이터에 하나씩 접근한다. 이때 상태유지를 위해 key값을 함께 제공해주어야한다. key값을 부여하면 상태를 유지시켜 준다. key는 고유한 값으로 Vue가 각각의 리스트를 분별할때 사용한다. 예를 들어, key값을 가지고 있는 v-for로 만든 어떤 리스트에 변화가 생겼을때 Vue는 이 리스트를 처음부터 다시 렌더링하지 않고 key로 각각의 요소를 구별해서 바뀐 부분만 업데이트해 준다. 한마디로 v-for와 key 속성.. 2022. 6. 14.
[Vue] 조건부 렌더링 v-if, v-else, v-else-if, v-show (v-if와 v-show의 차이점) ⚠️ 이 포스팅은 Vue3(한국어): 조건부 렌더링을 공부하고 정리한 블로그 포스팅입니다. ⚠️ v-if v-if 디렉티브는 조건에 따라 요소를 렌더링할 때 사용한다. v-if="조건" 조건이 true면 해당 요소를 렌더링하고 false면 해당 요소를 렌더링 하지 않는다. 아래의 예제에서 awesome이라는 데이터가 true일경우만 h1 요소가 렌더링된다. Vue is awesome! 예제 Click Me Hello 여러 요소에 조건문 한번에 설정해주기 부모태그로 요소를 감싸준 후 v-if 디렉티브를 부모태그에 넣어주면 조건에 만족하면 모든 자식 태그가 렌더링 된다. title paragraph 1 paragraph 2 template v-if 디렉티브를 넣기 위해 의미 없는 HTML 태그를 넣고 싶지 .. 2022. 6. 14.
[Vue] 클래스와 스타일 바인딩 ⚠️ 이 포스팅은 Vue3(한국어): 클래스와 스타일 바인딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ HTML 클래스 바인딩 인라인 스타일 바인딩하기 클래스 바인딩 객체 구문 (인라인) 객체를 data에 정의해서 class에 연결해줄 수도 있다. Hello 객체 구문 (객체 따로 빼주기) 클래스 이름 text-danger를 작은따옴표로 묶어서 object의 key값으로 사용할 수 있도록 해주었다. Hello 배열 구문 Hello 스타일 바인딩 CSS 속성 이름에는 카멜 케이스(camelCase) 또는 케밥 케이스(kebab-case)를 사용할 수 있다. 케밥 케이스를 사용하면 작은따옴표로 감싸주어야하는 번거로움이 있기 때문에 그냥 카멜케이스로 사용하자. Hello 객체 구문 Hello 배열 구문 He.. 2022. 6. 14.
[Vue] Watch 속성 정리 ⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️ Watch 속성 Watch 속성 데이터가 변경되는 것을 감시해서 로직처리를 하고 싶을때 watch 옵션을 사용한다. 즉 watch란 데이터의 변경사항을 감시하는 옵션이다. data() { return { 데이터이름: '데이터내용', }; }, watch: { // 감시하고 싶은 데이터를 메서드로 만들어준다 데이터이름(value) { // 데이터가 변경되었을때 처리할 로직 console.log(this.데이터이름); // this.데이터이름 대신 첫번째 파라미터로 접근할 수도 있다 console.log(value); } } 예제 watch 옵션 안에 있는 msg 메서드는 msg 데이터가 업데.. 2022. 6. 13.
[Vue] Computed 속성의 Getter와 Setter ⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️ Computed 속성의 Setter computed 옵션 (Getter 기능) computed 옵션에 있는 함수의 리턴값은 읽기 전용(READ ONLY)이다. 값을 얻어내는 용도로만 사용하므로 reverseMsg는 Getter다. computed: { // 값을 얻어오는 용도로 사용하는 함수 (Getter) reversedMsg() { return this.msg.split('').reverse().join(''); }, } Setter 기능을 추가한 computed 옵션 computed 옵션에 있는 reverseMsg 함수를 Getter, Setter가 모두 가능하게 하기 위해 다음과 같.. 2022. 6. 12.
[Vue] Computed 속성과 Computed 캐싱 ⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️ Computed 속성 Computed 속성 템플릿 안에서 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어렵다. 아래의 예제에서는 문자열 msg 데이터를 거꾸로 출력해주는 reverseMsg라는 메서드가 있다. 이 메서드의 결과값을 화면에 세번 출력시키기 위해 같은 메서드를 세번 부른다면 메서드가 호출될때마다 같은 연산을 반복하면서 메모리가 낭비된다. {{ reverseMsg() }} {{ reverseMsg() }} {{ reverseMsg() }} 연산된값을 반복해서 출력하고 싶다면 computed 옵션을 사용해 함수를 만들어준 후 호출해준다. computed 옵션 안에 있는 함수.. 2022. 6. 12.
[Vue] 지금까지 배운 디렉티브 정리 (계속 업데이트 될 예정) 디렉티브 해석 v-on:click="메서드" 클릭했을때 실행할 메서드를 연결해준다 @click="메서드" v-on:click의 축약형으로 v-on은 @로 대체해 사용할 수 있다 @click.stop 클릭 이벤트가 상위 요소에 이벤트가 전파되는 것을 방지해준다 @keydown.enter="메서드" input 요소에 enter key를 눌렀을때 (keydown했을때) 연결한 메서드가 실행된다 v-if="조건문" 조건문을 만족할때 (true일때) 해당 요소를 출력 true일때: 해당 요소를 렌더링한다 false일때: 해당 요소를 렌더링하지 않는다 v-for="데이터 in 배열" 배열에 있는 모든 데이터를 반복문을 돌려 순서대로 하나하나 출력 (데이터를 하나씩 출력할때 고유한 key값을 해당 요소에 부여해줘야 .. 2022. 6. 12.
[Vue] 동적 전달인자(Dynamic Parameter) ⚠️ 이 포스팅은 Vue3(한국어): 템플릿 문법을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 디렉티브 동적 전달인자 동적 전달인자(Dynamic Parameter) 데이터를 HTML의 속성 이름으로 사용하고 싶을때 Javascript 표현식처럼 대괄호로 묶어 디렉티브의 인수(argument)로 사용할 수 있다. 아래 예제에선 h1 요소의 속성값 :[attr]="'active'" @[event]="add"는 결과적으로 :class="msg" @click="add"를 의미한다. v-bind를 생략해 :로 v-on:을 생략해 @로 사용하였다. 속성값으로 데이터가 아닌 문자열을 사용하고 싶을때는 작은따옴표로 속성값을 넣어주면 된다. 아래의 예제에서는 active라는 문자열을 class로 사용하기 위해 작은따옴.. 2022. 6. 12.
[Vue] 템플릿 문법 (문자열, 원시 HTML, 속성) ⚠️ 이 포스팅은 Vue3(한국어): 템플릿 문법을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 보간법(Interpolation) 문자열 원시 HTML 속성 보간법(Interpolation) 문자열 Vue에서 데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation)이다. Vue에서 데이터를 화면에 표시해주기 위해서는 script에 정의한 데이터를 template에서 이중중괄호 {{ }} 안에 사용해야 한다. 바인딩된 데이터는 해당 데이터가 업데이트 될때마다 화면에 갱신된다. {{ msg }} 만약 데이터가 업데이트되어도 화면상에 표시해주고 싶지 않다면 v-once 디렉티브를 해당 데이터를 사용하고 있는 요소에 넣어주면된다. v-.. 2022. 6. 12.

티스토리툴바