강디너의 개발 일지

결론부터 말씀드리자면 '알아두면 좋다'입니다. 디자인 시스템이란 팀이 제품을 개발할 수 있도록 디자인 패턴 및 원칙들을 모아둔 시스템을 뜻하며 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 등등 프로젝트 규모가 커질수록, 컴포넌트 안에..

1. Create Firebase database 쓰기에는 set 과 push 가 있습니다. set 를 사용하면 지정된 위치에서 하위 노드를 포함하여 모든 데이터를 덮어씁니다. 키 값이 따로 없으며 지정된 위치에 바로 저장됩니다. 만약 하위에 데이터가 있다면 지워지고 덮어쓰여집니다. firebase.database().ref('status/lounge').set({ status: data.status, playTime: data.playTime, videoName: data.videoName, }); push 를 사용하면 데이터베이스의 데이터 목록에 추가합니다. 목록에 새 노드를 푸시할 때마다 데이터베이스에서 고유 키(예: music////)를 생성합니다. firebase.database().ref(`m..

여태까지 구글 애드센스, 라이브리 댓글(광고 포함)을 사용하고 있었는데 포스팅 중간 중간 광고가 너무 나와서 불편+ 거슬리다고 생각해 광고를 다 없애버렸습니다. 윽........한번 들어와서 결국... 구글 상단에 배너 하나 달았습니다 ㅠ 요런거라도 있어야지 글쓰는 맛이 나지 않겠습니까 !!!!! 엄청난 글은 아니지만 공부하고 있는 분야에 대해서 글을 쓰고 있는데, 카페인이 들어가면 더 힘이 날 것 같습니다! 카페인 충전으로 더 고급진 글을 쓰도록 노력하겠습니다 ~~!

기획 멜론 차트를 하루에 한 번 크롤링해서 Firebase Database에 저장 현재 상황 1. Vue.js 를 이용해서 프론트를 만드는 중이다. 2. Firebase Database 를 사용한다. 3. 멜론 차트를 크롤링 하고 싶다 { const title = []; const artist = []; const result = {}; const rank = 100; const getHtml = async () => { try { return await axios.get('https://www.melon.com/chart/'); } catch (err) { console.error('axios error', axios); console.error(err); } } const html = await ge..

Vue 에서 google OAuth 로그인을 위해서 mount 된 후 renderGoogleLoginButton 가 적용되게 했다. 하지만 mount 되는 속도보다 google API를 불러오는 속도가 느려서 오류가 나는 현상(gapi is not defined)이 자주 발생했다. 내생각 : Script Load -> mounted -> gapi render 하지만 : mounted -> gapi is not defined -> Script Load mounted 가 더 빨라서 강제로 스크립트를 먼저 로드한 후 gapi 를 호출해야 했다. mounted() { window.addEventListener("google-loaded", this.renderGoogleLoginButton); }, method..

javascript 를 이용해서 몇일전, 분, 시간, 일, 년 까지 구하는 함수 토이프로젝트를 하다가 날짜계산을 하고는 싶은데 moment.js는 무겁다고 생각이 들고... 어떻게 만들까아아 고민고민 하다가 회사 프로젝트에서 저희팀 '꼬북'님께서 만든걸 보고 사용 !!! function timeForToday(value) { const today = new Date(); const timeValue = new Date(value); const betweenTime = Math.floor((today.getTime() - timeValue.getTime()) / 1000 / 60); if (betweenTime < 1) return '방금전'; if (betweenTime < 60) { return `${..