본문 바로가기

JavaScript

 (40)
빌트인 컴포넌트 빌트인 컴포넌트 내장 컴포넌트 라고도 하는 빌트인 컴포넌트란, Vue 프레임워크 자체에서 기본적으로 제공하는 컴포넌트를 의미합니다. 이러한 컴포넌트는 별도의 설치나 코드 작성 없이 필요에 맞게 Vue를 사용할 때 바로 사용할 수 있으며, 일반적으로 특정 기능이나 UI 처리를 돕기 위해 사용되는 컴포넌트를 의미합니다. 이번 포스트에서는 자주 사용되는 빌트인 컴포넌트들에 사용법에 대해 알아보겠습니다.Transition 컴포넌트transition은 상태 변화에 대응하기 위해 애니메이션 작업에 도움되는 transition 이라는 컴포넌트를 제공합니다. transition을 포함한 앞으로 설명할 빌트인 컴포넌트는 등록이나 설치 없이 템플릿에서 사용할 수 있습니다. Vue 공식 문서의 transition 컴포넌트..
Vue.js 컴포넌트 심화(2/2) - (fallthrough 속성, slot, provide/inject, 비동기 컴포넌트) fallthrough 속성 fallthrough 속성이란 정의되지 않은 속성이 자식 컴포넌트에 루트 엘리먼트로 자동 전달되는 기능을 말합니다. 말이 어려울 수 있지만, 단순하게 말하자면 부모 컴포넌트가 자식 컴포넌트에 어떤 속성을 줬는데, 그 속성이 자식 컴포넌트에 props로 정의되지 않아다 하여도 자동으로 자식 안의 HTML 요소로 전달되는 것을 의미합니다. 정말 간단한 예제로 부모 컴포넌트를 위와 같이 작성하고 Click me자식 컴포넌트에 template을 이렇게 작성했다고 생각해 보곘습니다. 자식 컴포넌트는 class 라던가 id라던가 아무것도 정의를 하지 않았습니다. 상식적으로 생각해본다면, 해당 요소에 .big로 저장된 css 라던가, id를 통해 엘리먼트 요소로 접근하는 로직은 실행되..
Vue.js 컴포넌트 심화(1/2) - (props, 컴포넌트 이벤트, 컴포넌트 양방향 바인딩) Props props란 부모 컴포넌트에서 자식 컴포넌트로 단방향 데이터 전송에 사용되는 요소 입니다. 조금 더 알기 쉽게 얘기하면, Vue에서는 컴포넌트를 여러개로 나눠서 만드는데 이때 컴포넌트 끼리 데이터를 주고 받을 수 있는 통로가 있다면 컴포넌트를 만드는데 있어, 효율적으로 구성하는 것이 가능합니다. props는 부모 => 자식으로 전달되는 단방향 흐름입니다. 따라서 자식에서 부모에 데이터를 직접 바꿀 수는 없으며 자식이 받은 props 값을 직접 수정하면 props를 사용하는 의미가 없을 뿐 아니라 에러 또는 경로를 발생할 수 있기 때문에 이점을 유의하여 개발 해야합니다. 먼저 특정 상품의 이름과 가격을 등록하는 예제를 통해 props의 사용 방법에 대해 알아보겠습니다. 부모 컴포넌트 구성으로..
Vue.js 컴포넌트 컴포넌트 Vue.js 에서 컴포넌트는 재사용이 가능한 UI 블록을 의미합니다. 즉, Vue.js 앱을 모듈와하고 유지 보수를 용이하게 만들어 주는 핵심 요소라 할 수 있습니다. 예를 들어 버튼, 카드, 모달, 댓글 입력 등등 이런 화면 ui 요소들이 각각 하나의 컴포넌트가 될 수 있습니다. 물론 SPA 웹의 특성상 하나의 파일에서 화면 개발을 하는 것도 가능합니다. 그렇지만 아래와 같은 이유들로 Vue.js 에서는 화면 구성을 컴포넌트로 분리하여 개발하는 것을 지향합니다.재사용성 : 한 번 만든 컴포넌트는 필요한 경우 여러 곳에서 반복하여 사용하는 것이 가능합니다.유지보수 용이 : 각 기능과 독립된 파일로 나위어 있어, 하나의 파일만 수정해도 사용한 전체를 수정하는 것이 가능가독성 향상 : 코드가..
생명 주기 훅(lifecycle hooks) vue의 생명 주기 훅 프로그래밍에서 생명 주기 는 어떤 것이 생성하여 소멸될 때 까지의 과정을 말합니다. 마치 사람의 인생처럼, 프로그래밍에서 어떤 요소가 생성되고 사용되다가, 사라지는 과정을 의미합니다. Vue나 React와 같은 프로트엔드 프레임워크에서의 생명 주기라 하면 컴포넌트가 생성되고 이때 생긴 컴포넌트의 데이터가 바뀌거나 사용자와 상호작용을 하다 화면에서 사라지는 이 과정을 의미한다고 할 수 있습니다. 생명주기 훅은 이러한 생명주기의 흐름의 속성마다 개발자가 추가할 수 있는 커스텀 로직을 의미 합니다. 즉 예를들어 컴포넌트가 생성될 때, 소멸할 때 등등의 상황에 따라 코드를 작성하고 이를 자동적으로 실행할 수 있도록 할 수 있습니다. 각 단계에서 어떤 로직이 필요한지에 대해 미리 정의하..
Vue.js 기초문법(3/3) - 이벤트 핸들링,Form 입력 바인딩,감시자 이벤트 핸들링 Vue.js 에서는 v-on 디렉티브를 통해 이벤트 핸들링 기능을 제공합니다. v-on 디렉티브는 단축문법을 제공하는데 예를 들어 클릭 이벤트를 구현하기 위해 v-on:click="function" 과 같은 형태를 '@' 기호를 사용하여 @click="function"과 같은 형태로 작성이 가능합니다.https://dkkim2318.tistory.com/156 Vue.js 기초문법 - 반응형,템플릿,이벤트 루프,메서드 상태유지Vue.js에서의 핵심 흐름 웹/앱 개발에서 프론트엔드 사이드는 일반적으로 백엔드 사이드에서 데이터를 받아 이를 화면으로 표현합니다. Vue는 백엔드에서 받아온 데이터를 Vue 컴포넌트의 data()에dkkim2318.tistory.com코드 예시는 이전 템플릿 문..
Vue.js 기초문법(2/3) - 계산된 속성, 클래스/스타일 바인딩, 조건부 렌더링,리스트 렌더링 computed properties (계산된 속성) computed properties는 Vue.js에서 여러 데이터를 바탕으로 자동으로 계산된 값을 반환해주는 속성입니다. Vue.js의 공식문서에서는 '계산된 속성' 이라는 소제목으로 이를 소개합니다. 영문을 직역한 관계로, 한국인의 입장에서 이를 읽어보면 다소, 와닿지 않은 제목일 수 있는데, 저는 이것을 '자동 계산 속성' 이라는 키워드로 설명 드릴 수 있을거 같습니다. 즉, data 에 있는 값이 변경되면, 이를 자동으로 계산해 템플릿 내에 이를 반영합니다. Vue.js 공식문서에 있는 계산된 속성을 사용하지 않은 예제부터 살펴 보겠습니다 책을 가지고 있습니까? {{author.books.length > 0 ? 'Yes': 'No'}} 이 예제..
Vue.js 기초문법(1/3) - 반응형,템플릿,이벤트 루프,메서드 상태유지 Vue.js에서의 핵심 흐름 웹/앱 개발에서 프론트엔드 사이드는 일반적으로 백엔드 사이드에서 데이터를 받아 이를 화면으로 표현합니다. Vue는 백엔드에서 받아온 데이터를 Vue 컴포넌트의 data()에 저장하며, 이를 반응형 객체로 감싸고 감시합니다. 여기서 반응형과 감시라는 개념이 중요합니다. 정적인 HTML 파일은 DOM을 조작할 수 없습니다. 이에따라 Vue 와 같은 동적인 페이지를 구현하는 프레임워크는 반응형 시스템을 통해 데이터면 바꾸면 이를 감시(watch)하며 데이터의 변화를 감지하고 UI를 알아서 조작할 수 있게 지원합니다. 즉 직접 DOM을 조작할 필요가 없이 데이터의 변화에 따라 화면의 구성이 가능합니다. 이를 요약하자면 아래와 같습니다.백엔드에서 데이터 받기데이터를 Vue 컴포넌..

티스토리툴바