이전 포스팅: Vue.js 라우터 기초 (1) Vue 라우터 두번째 포스팅 입니다 ☺️ 이번엔 Vue 라우터의 path parameter, URL을 파라미터로 받는 동적 라우트 매칭에 대해 알아보도록 하겠습니다. 동적 라우트 매칭 우리가 쇼핑몰 상품 페이지를 개발 한다고 생각 해봅시다. 상품을 보여줄때 우리는 중복된 페이지를 만들 필요 없이...

Vue 에서는 vue-router 라는 SPA 페이지 전환 공식 라우터를 제공 합니다. npm 을 통해 vue-router 를 설치하고, Vue root 인스턴스 생성 전 router 인스턴스를 생성 하면 라우터를 사용할 준비가 된 것 입니다. ✨vue-cli 를 사용할 경우 Vue.use(VueRouter) 로 라우터 사용을 명시A해야합니다...

Vue 에서는 vue-router 라는 SPA 페이지 전환 공식 라우터를 제공 합니다. npm 을 통해 vue-router 를 설치하고, Vue root 인스턴스 생성 전 router 인스턴스를 생성 하면 라우터를 사용할 준비가 된 것 입니다. ✨vue-cli 를 사용할 경우 Vue.use(VueRouter) 로 라우터 사용을 명시해야합니다....

Vue에서는 filter 를 사용해 문자열 형식화를 할 수 있습니다. 적용하는 방법은 두 가지입니다. 첫번째 방법으로는 vue 컴포넌트 옵션 사용하는 법이 있고, Vue 인스턴스를 생성하기 전에 전역으로 설정하는 방법이 있습니다. 컴포넌트 옵션 필터 컴포넌트 옵션으로 필터를 정의하기 위해 아래처럼 filters 옵션을 추가 하고 입력한 숫자를 원단...

Vue 에서 동적으로 컴포넌트를 생성 하며 전환 효과를 주기 위해 <component v-bind:is="컴포넌트명"> 을 사용할 수 있습니다. 컴포넌트 전환과 라이프 사이클 두 개의 컴포넌트 Home.vue 와 About.vue 를 만들어 App.vue 에서 두 컴포넌트의 전환 작업을 해보겠습니다. 두 컴포넌트는 모두 created 훅...

Vue 에서 믹스인 (mixins) 이란 재사용이 필요한 요소들을 모아 놓은 객체를 의미 합니다. 믹스인으로 공통 관심사를 분리 하여 정의 하고 필요로하는 컴포넌트에서 가져다 쓰는 것 이지요. Mixin의 Hook 호출 Vue 에서 Mixin 의 훅은 컴포넌트의 훅 이전에 호출 됩니다 아래 예제를 확인해 볼까요? // mixins/myMix...

Vue에서 슬롯은 (Slots)은 특정 컴포넌트에서 자신에게 등록된 자식 컴포넌트의 내용을 재정의 할 수 있는 디렉티브 입니다. Slot 의 의미를 나무위키에서 검색 하면 아래와 같이 나옵니다. 무언가를 집어넣도록 만든 통로 정도로 이해하면 되겠네요 :) Vue.js 2.6.0 버전 이전에는 slot 과 slot-scope속성으로 슬롯을 다뤘...

Vue 에서 함수를 구현하기 위한 속성으로 computed 와 methods 를 제공 한다. 그렇다면 어떤경우에 Comptuted 를 사용해야하고 Methods 를 사용해야할까? 둘의 차이점은 뭘까? 속성 설명 computed 계산해야하는 목표 데이터를 정의 하...

Vue.js는 화면 표출 조건을 설정할 수있는 v- 접두사 directive 를 지원한다. 조건부 렌더링 directive 는 v-if와 v-show로 둘은 모두 Boolean type true || false 로 표출 여부를 판단한다. v-if v-if : 단일 조건에서 사용 v-else : if 가 아닐 경우 else 표출 v-if,...

브라우저의 구조 브라우저는 우리가 요청한 자원을 서버에 요청하고 화면에 출력하는 기능을 한다. 브라우저의 주요 구성 요소는 다음과 같다. 사용자 인터페이스: 사용자에게 제공하는 브라우저 기본 기능 (주소표시줄, 이전/다음/새로고침 버튼 등) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 : 요청한 콘텐츠...