일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- Docker
- nginx
- plugin
- vue login
- login
- vue
- database
- 프론트
- extension
- 기획
- react-query
- vuex
- 정리
- 뷰
- Git
- AWS
- 회고록
- 셋팅
- 토이프로젝트
- Firebase
- 배포
- vsCode
- PWA
- 신상마켓
- 플러그인
- 로그인
- react
- express
- javascript
- jwt
- Today
- Total
목록전체 글 보기 (105)
강디너의 개발 일지
Git이란 무엇인가. 깃(Git)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. - 위키백과 쉽게 말해서, 여러 명의 개발자가 하나의 프로젝트를 개발할 때 코드가 꼬일 위험이 있기 때문에 버전 관리 시스템을 사용합니다. 많은 개발자가 있는 회사에서는 필수적으로 사용합니다. 그리고 사용할 줄 아는 사람을 뽑고 싶어 합니다. 대부분의 개발자들은 Git을 사용하고 있어서, 포트폴리오에 Git 아이디를 적어서 내는 경우, 또는 기업에서 원하는 경우가 많습니다. 개발자는 개인 Git을 제출함으로써 자신을 어필할 수 있으며, 기업 입장에서는 지원자 Git에 저장된 프로젝트들에 대해 질문도 하며, 어떤 것에 관심이 많은지, 코딩 스타일 등..
InterSectionObserver 란 (developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API) Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document의viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. intersection 정보는 아래와 같은 여러 가지 이유 때문에 필요합니다: 페이지가 스크롤되는 도중에 발생하는 이미지나 다른 콘텐츠의 지연 로딩. 스크롤 시에, 더 많은 콘텐츠가 로드 및 렌더링 되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll을 구현. 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고. 사용자에게 결과가 ..
목적 Vue.js를 사용하면서 web push를 사용하고 싶다. Firebase를 사용해서 web push 시스템을 만들고 싶다. 다음 사이드 프로젝트에서 사용할 것이다. 모바일팀에서 firebase를 이용해 푸시 시스템을 쓰고 있는데, '언젠가... 웹에도 적용할 수도 있을 것 같다'라는 말을 듣고... 연습 삼아... Firebase setting 필요 모듈 (npm install -g) firebase-tools window 경우에는 cmd를 권한 있는 창으로 키셔야 합니다. 프로젝트 root에 firebase를 초기화해줍니다. 자세한 설치는 여기서 설명 Firebase console 프로젝트 설정에서 firebase cloude messaging 설정을 찾을 수 있습니다. firebase clou..
"귀차니즘은 개발자를 발전하게 만든다." 딜리비트라는 서비스를 개발하게 된 계기는 귀차니즘으로부터 시작했습니다. 음악을 틀 수 있는 핸드폰과 라운지 사이의 거리가 멀어서 음악을 바꾸려면 멀리 있는 핸드폰까지 가야만 했습니다. '왔다 갔다 하기 귀찮은데 이걸 원격에서 어떻게 컨트롤할 수 있을까...'라는 생각에 프로젝트를 기획했습니다. 하지만 원하는 기능(원격에서 유튜브 컨트롤)이 구현 가능한지 조차 모르기 때문에 아이디어가 생각날 때마다 개발했습니다. const 꼬꼬마님 = '친한 꼬꼬마 디자이너님'; 어느 정도 개발 각이 보이고 구현 가능할 것 같다는 생각이 들자마자 꼬꼬마님을 꼬시러 갔습니다(사실 잘생긴 디자이너분한테 먼저 갔다가 까였었다). 나: 평소에 퇴근하고 한가해요??? 꼬꼬마님: 네. 나: ..
2019년 하반기에 이직 후 회사에서 일하랴 적응하랴 정신없는 한 해를 보냈다. 하지만 개발하는 것이 이렇게 재미있던 적이 있었나 싶을 정도로 즐겁게 일하고, 개발했다. 개발하면서 다른 개발자분들의 글도 자주 보는 편인데, 회고라는 것을 처음 보게 되었고, 언젠가 나도 써보고 싶었다. 마침 블로그는 꾸준히 하고 있었어서 인생 처음 회고록이란 것에 도전한다. 1. 회사 내가 처음 입사했을 때에는 웹 개발 팀원이 2명이었는데 4명이 되었다. (지금도 더 뽑는 중!) 보통 디자이너, 백엔드, 기획자 이렇게 협업을 했었는데, 팀원도 늘고 큰 프로젝트가 생기면서 같은 프론트엔드 개발자와 처음 협업하게 되었다. 1-1. 업무 크게 2가지 프로젝트가 있었다. 첫 번째 프로젝트는 기존 php 코드를 모두 버리고 vue..
목적 특정 페이지를 들어갈 때 비밀번호를 입력하고 맞을 경우에만 들여보내고 싶다. 아무 생각 없이 비밀번호를 입력해야지만 들어갈 수 있는 페이지를 어떻게 만들까 하다가 대충 생각했을 때에는 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에만 적용됩니다. 아래 ..