강디너의 개발 일지

결론부터 말씀드리자면 '알아두면 좋다'입니다. 디자인 시스템이란 팀이 제품을 개발할 수 있도록 디자인 패턴 및 원칙들을 모아둔 시스템을 뜻하며 UI/UX 가이드라인 또한 포함됩니다. 서비스를 만드는 데 사용한 공통 컬러, 서체, 인터랙션, 각종 정책 및 규정에 관한 모든 컴포넌트를 정리해놓은 것이며 불필요한 커뮤니케이션을 없애기 위해 체계적으로 정리한 시스템입니다. 비효율적인 디자인 비용을 줄이기 위해 체계적으로 정리한 시스템 - 딜리셔스 멋쟁이 디자이너님 왜 알아두면 좋은가?? 예전 우아한형제들의 김민태 님께서 디자인 시스템에 대해 발표하신 것 중 배달의 민족 앱에는 많은 화면이 있는데, 그중 사용자가 잘 안 보는 화면이나, 수정이 없는 화면에는 옛날 옛적 UI가 남아있다. 디자인 시스템을 적용하면서 ..

1. CSS scope 2. vue custom event CSS scope Vue에서 css범위 설정에는 global, scope로 하는 방식 두 가지 있습니다. global로 설정하면 부모, 자식뿐만 아니라 모오오오든 파일에 적용되기 때문에 보통 가장 최상위에서 reset css 등에 넣음 scope로 설정하면 그 컴포넌트 안에 있는 DOM만 적용됩니다. 잘못 알고 있던 점 scope로 설정하면 부모에서 설정한 css가 자식에도 적용되는 줄 알았습니다. 공통으로 들어가는 자식들에게만 css를 적용하고 싶은데, global 설정으로 하기엔 너무 범위가 넓어서... 부모 단에서 scope로 설정하면 css 적용이 되길래 !!! 되길래애 !!! 적용되긴 합니다.. 다만 최상위 DOM에만 적용됩니다. 아래 ..

동적 컴포넌트란 컴포넌트를 동적 또는 비동기로 변경하고 싶을 때 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 등등 프로젝트 규모가 커질수록, 컴포넌트 안에..