일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- nginx
- 기획
- PWA
- 프론트
- javascript
- 정리
- plugin
- 신상마켓
- 플러그인
- 로그인
- express
- Git
- react
- 회고록
- AWS
- jwt
- vsCode
- 뷰
- database
- 토이프로젝트
- 셋팅
- vue login
- Docker
- Firebase
- react-query
- vuex
- 배포
- login
- extension
- vue
- Today
- Total
강디너의 개발 일지
목적 특정 페이지를 들어갈 때 비밀번호를 입력하고 맞을 경우에만 들여보내고 싶다. 아무 생각 없이 비밀번호를 입력해야지만 들어갈 수 있는 페이지를 어떻게 만들까 하다가 대충 생각했을 때에는 confrim 창처럼 그냥 비밀번호 뚜다닥 입력하고 맞으면 들여보내면 될 거라 생각했는데 옛날 옛적 자바 했을 때 알림창이었.... 던 것 같기도 하고 어디서 봤지... 역시 그런 건 없.... 너무 대충 생각했나.... (있으면 알려주세요) 그다음 생각한 것이 API 키를 두는 것처럼 키 파일 하나 만들고 비교하고 라우터 태우면 될 것 같아서 바로 작업 시작! 우선 비밀번호 파일을 만들어줍니다. loungeKey.js const loungeKey = '-----'; export default loungeKey; .g..
목적 firebase database 특정 데이터를 '조건'에 맞춰 페이징 + 정렬하고 싶다. - group/showGroup 아래의 데이터들을 likes/count가 높은 수 대로 맞춰서 정렬하고 싶다. firebase database 생김새 아래 코드는 group/showGroup 아래 likes/count에 대해서 정렬하는 코드입니다. 하지만 정렬만 하는 기능일 뿐 페이징을 하지 못합니다. firebase database 기본 쿼리에서는 페이징 기능을 따로 지원하지 않기 때문에 자체적으로 만들어야 합니다. // group/showGroup 아래 likes/count 에 대해서 정렬 export function getOpenGroup() { return firebase.database().ref('g..
목차 Firebase storage 다루기 Firebase resize images 사용해보기 1. Firebase storage // storage.js import * as firebase from 'firebase/app'; import 'firebase/storage'; // 파일 전체 목록 부르기 + url 가져오기 export async function getThumbnail(dealiName) { const { items } = await firebase.storage().ref(`thumbnail/${dealiName}`).listAll(); let thumbnaills = []; items.map((i) => { const { fullPath } = i; thumbnaills.push({..
결론부터 말씀드리자면 '알아두면 좋다'입니다. 디자인 시스템이란 팀이 제품을 개발할 수 있도록 디자인 패턴 및 원칙들을 모아둔 시스템을 뜻하며 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에만 적용됩니다. 아래 ..