강디너의 개발 일지

동적 컴포넌트란 컴포넌트를 동적 또는 비동기로 변경하고 싶을 때 v-bind:is를 사용하는 기능입니다. 이번 포스팅에서 보여드릴 예제는 router에서 특정 meta를 이용하여 레이아웃을 만들어보겠습니다. 프로젝트 기본 구성 짧게 설명드리자면 App 바로 아래 Layout을 둔 다음 slot으로 router-view를 둔 것입니다. App.vue router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home'; import MyPage from '../views/MyPage'; import Lounge from '../views/Lounge'; Vue.use(VueRouter..

목적 회사 라운지 노래 컨트롤 내가 듣고 싶은 노래들 저장 다른 분들이 저장한 노래 듣기 내 공부 총 5개의 페이지 홈 화면 마이 페이지 화면 검색 결과 화면 플레이 리스트 화면 앱 전용 플레이 리스트 화면 홈 화면 1. 로고 2. 검색창 검색 결과 페이지로 이동 3. 로그인 로그인할 경우 마이페이지, 로그아웃 버튼 공개 로그아웃 버튼 클릭 시 홈 화면으로 이동 4. 마이 플레이 리스트 로그인하지 않을 경우 숨김 처리 해당 그룹 목록의 첫 번째 유튜브 썸네일 클릭 시 플레이 리스트 화면으로 이동 5. 공개 플레이 그룹 등록된 그룹 썸네일 표시 Like 기능 클릭 시 플레이 리스트 화면으로 이동 6. 앱 재생 플레이어 앱에 틀어져있는 유튜브 컨트롤할 수 있는 컨트롤러 딜리셔스 이메일을 쓰는 사람만 보임 유..

Composition API는 Vue3에 도입되는 함수 기반 API 입니다. Composition API를 소개하는 페이지에서는 아래와 같이 설명하고 있습니다. 컴포지션 API 소개 : 구성 요소 논리를 유연하게 구성 할 수있는 추가 기능 기반 API 세트입니다. 중요한것은 Vue2에서도 나중에 나올 Vue3의 문법을 사용할 수 있도록 만든것이 Composition API 입니다. Vue2에서 Vue3 로 버전이 올라가면서 바뀌는 것이 많습니다. (Lifecycle, 문법 등) Vue의 단점이라고 말하는 '프로젝트 규모가 커질수록 관리하기 힘들다' 하는 점을 Composition API로 보안했습니다. 기존 Vue2에서는 data, methods, watch 등등 프로젝트 규모가 커질수록, 컴포넌트 안에..