본문 바로가기

프론트개발28

29. 컴포지션 API 활용(lifecycle, refs, props, context) 1. 반드시 읽어야 하는 공식 문서 - 지금까지 배운 내용을 컴포지션 API 형태로 작성하기 위해서 반드시 읽는 것을 권장합니다. - 전혀 어렵지 않으니 한번쯤 꼭 훑어보고 아래의 전환 예제를 따라 해보기를 권장합니다. 컴포지션 API의 Setup 공식문서 컴포지션 API의 라이프사이클 훅 공식문서 컴포지션 API의 provide와 inject 공식문서 컴포지션 API의 refs 공식문서 2. 컴포지션 API로 코드 전환 예제 [기존의 작성 방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} [컴포지션 API 작성방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversed.. 2021. 5. 28.
28. Vue - 컴포지션 API 작성방법 1. 예제 코드 [App.vue] {{ count }} [출력화면] [코드 설명] - 위의 코드는 화면의 숫자를 클릭하면 increase 메소드가 작동하여 숫자가 증가하는 방식이다. - this를 사용하여 데이터 객체인 count를 참조하여 반응성을 활용한 코드이다. - 위의 코드를 기반으로 컴포지션 API를 작성해보자. 2. 컴포지션 API 전환 a) 1차 전환 - 반응성이 구현되지 않은 상태 [App.vue] {{ count }} - 위의 코드를 구현한 뒤, 실제로 숫자를 클릭해보면 increase가 작동하지 않는 것을 확인할 수 있다. - 더 정확히 이야기 해보면 increase 메소드가 작동하지 않는 것이 아니라 화면이 업데이트(= 새로고침)되지 않는 것이다. - 즉, 반응성의 구현이 되지 않은 .. 2021. 5. 28.
27. Vue - 컴포지션 API란? 1. 공식 문서 공식문서 바로가기 소개 | Vue.js 소개 컴포지션 API가 필요한 이유 Vue 컴포넌트를 만들면 재사용 가능한 코드 조각으로 결합되어진 인터페이스의 반복가능한 부분들을 추출할 수 있습니다. 이것만으로도 어플리케이션에서 유지 v3.ko.vuejs.org 2. 컴포지션 API란? - Vue 객체를 만들다 보면 다양한 속성(data, computed, methods, etc)들을 작성하게 된다. - 이전의 포스팅에서도 많이 사용해 보았지만, 단순한 예제코드를 이용했기 때문에 코드를 이해하고 읽는데에 큰 불편함이 없었다. - 하지만, 코드가 복잡해지면 속성의 내용이 복잡해지면서 어떤 코드가 어떤 기능을 하는지 구분하기가 힘들어진다. - 정리하자면, 코드의 가독성과 이해도가 떨어진다. - 이처.. 2021. 5. 28.
26. Vue - 컴포넌트 Refs 1. Refs란? - Vue에서만 제공하는 개념으로, 특정한 컴포넌트 또는 요소를 참조하는 방식을 말한다. - 기존에 JS를 사용하여 컴포넌트를 참조하는 방법을 개선시킨 형태다. 2. Refs를 사용하는 이유 a) 예제코드 [App.vue] Hello world! - h1태그가 갖고있는 내용을 콘솔에 출력하고 싶은 경우, 위와 같은 코드를 작성할 수 있다. - 그러나 Vue에서 제공하는 Refs를 사용하면 보다 적은 줄의 코드로 동일한 기능을 사용할 수 있다. b) Refs 예제코드 [App.vue] Hello world! [출력화면] c) 코드해설 - HTML 엘리먼트에 id 또는 class 명으로 선택자를 사용했다면, Vue Refs에서는 ref라는 속성값을 사용하여 선택자를 생성한다. - ref 선.. 2021. 5. 28.
25. Vue- provide, inject - 이번 포스팅에서 provide와 inject에 대해 알아볼 것이다. 1. 예제코드 [App.vue] [Parent.vue - components 폴더 안에 생성] [Child.vue - components 폴더 안에 생성] {{ msg }} [출력결과] * props - 부모와 자식 컴포넌트 간의 데이터 통신을 가능하게 한다. a) 코드의 흐름 - App.vue에서 Parent 컴포넌트를 출력한다. - Parent 컴포넌트는 msg라는 props(속성)를 사용하는데, 이 props는 Child.vue에서 넘어온다. - 그러므로 Parent 컴포넌트에서 Child.vue를 import한다. - 결론적으로 화면에 출력되는 문구는 Child.vue에서 'msg'라는 부분인데, 이는 props를 통해 App.. 2021. 5. 27.
24. Vue - slot 태그 - 이전 포스팅에서 slot태그를 이용하여 컴포넌트 내용을 출력하였다. - 이번 포스팅에서는 slot태그에 관하여 조금 더 알아보자. 1. Fallback content [App.vue] Banana [MyBtn.vue] ㅌ [작동순서] a) slot 태그 사이에 내용이 있는 경우 [출력화면] - 반드시 컴포넌트에 내용(=content)을 삽입해야만 slot태그에서 출력이 되는 것이 아니다. - 위의 예시처럼 slot 태그 자체에 내용(=content)을 삽입하여 출력할수도 있다. b) slot 태그 사이에 내용이 있고 컴포넌트에도 내용이 있는 경우 [출력화면] - 컴포넌트와 slot태그 모두 content를 포함하고 있는 경우, 위의 예시처럼 컴포넌트의 내용이 우선적으로 출력된다. - slot 태그에 .. 2021. 5. 25.
23. Vue- Emit(2) - 본 포스팅은 이전 포스팅과 이어지는 내용입니다. - 이전 포스팅을 읽고 본 포스팅을 이해하는 것을 추천합니다. 1. emit에서 event 객체 사용하기 a) 예제코드 [App.vue] Banana? [MyBtn.vue] h1태그 입니다. [출력화면] - App.vue에서 event 객체를 등록하여 해당 이벤트가 동작하면 event 객체의 내용이 출력되도록 하였다. - 하지만, 위의 출력화면에서 확인할 수 있듯이 콘솔에 undefined 라고 나오는 것을 확인할 수 있다. - 이 부분이 확실히 출력되도록 설정하는 방법을 알아보자. b) event 객체 이용방법(1) - 위의 코드에서 emit을 사용하는 부분에 매개변수를 하나 더 집어넣었다. - 123이라는 숫자는 event 객체를 통해서 전달되는 값.. 2021. 5. 24.
22. Vue - Emit(1) 1. Emit 이란? - 이전 시간에 속성 상속에 대해서 배워보았다. - 속성 상속은 최상위 컴포넌트가 하나 이상인 경우, 속성을 직접 컴포넌트에 할당하는 것을 의미한다. - 이와 비슷하게 Emit은 최상위 컴포넌트가 하나 이상인 경우, 이벤트를 직접 컴포넌트에 할당하는 것을 의미한다. - 어떻게 하는지 예제코드를 통해서 알아보자. a) 예제코드 [App.vue] Banana? [MyBtn.vue] - MyBtn.vue를 살펴보면 최상위 컴포넌트가 div와 h1 두가지 이다. - log 라는 이벤트를 등록해 놓았으나, 최상위 컴포넌트가 두개이므로 작동하지 않는다. - Emit을 이용하여 직접 이벤트를 할당하는 방법을 알아보자. b) Emit 적용하기 [MyBtn.vue] h1태그 입니다. - script.. 2021. 5. 24.
21. Vue - 속성 상속 1. Attribute Inheritance - 우선 예제코드를 살펴보자. [App.vue] Banana [MyBtn.vue] [출력화면] - 출력화면을 살펴보면 다음과 같이 클래스 속성에 btn과 test 속성이 들어가 있는 것을 확인할 수 있다. - 해당 버튼 아래에 다른 요소를 삽입하면 다음과 같은 결과를 출력하는데, - 기존에 존재하던 버튼에 test라는 클래스 속성이 사라진 것을 확인할 수 있다. - 이유가 무엇일까? a) 최상위 요소 - HTML을 작성할 때, Vue에서는 template 태그에 작성하게 된다. - template 태그의 자식요소를 '최상위 요소(= Root)'라고 부르는데, 위의 코드에서는 최상위 요소가 2개(= div 2개)가 있는 것이다. - 이처럼 최상위 요소가 하나 이.. 2021. 5. 21.

티스토리툴바