강디너의 개발 일지

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 `${..

google 에서 지원해주는 youtube api로 검색을 해봤습니다. export function searchYoutube(q, maxResults) { const params = { key, part: 'snippet', q, maxResults, }; return axios.get(`https://www.googleapis.com/youtube/v3/search`, {params}); } key는 youtube api 키 part는 youtube api 에서 어느 정도 보여줄 지 정해주는 범위이며 할당량 사용 관리를 위한 변수 입니다. q 는 검색어 maxResults는 결과를 몇개 보여줄 지 입니다. part 매개변수에 예를 들어 video 리소스는 snippet contentDetails fil..

기획 이유 1. 회사 라운지 노래를 원격에서 컨트롤 하고 싶다. -> 멜론 앱으로 스마트폰에 스피커를 연결해서 틀어 놓는다. 2. 주로 유튜브를 이용해서 음악을 듣는다 -> 개발할때 쩌어어어 모니터 구석에 창을 작게 켜서 광고 넘긴다. 프로젝트 기술 스택 프론트 - Vue.js 백엔드 - firebase 호스팅, 실시간 데이터베이스 디자인 - 회사 디자이너님 착취 예약 프로젝트 기획 현재까지 구글 로그인, 유튜브 검색 및 데이터 저장 테스트 해봐야 할 것 - 자바스크립트로 유튜브 실행, 정지, 사운드 크기 조절 등등... Git - https://github.com/DinnerKang/study_vue/tree/master/deali-music 도메인 - https://dealibeat.firebasea..

목차 1. Firebase 배포 2. Firebase 로그인 권한이 있는 터미널에서 Firebase login 명령어를 입력하시고 구글 로그인 합니다. 로그인을 성공하면 아래와같은 페이지가 뜹니다. Firebase init 설정상에서 public 폴더 사용할꺼냐(디폴트) 해서 Y 눌렀더니 나중에 배포했을 때 빌드된 파일을 찾지 못했습니다. firebase.json public을 dist로 변경 빌드가 된 Vue 프로젝트가 dist 에 저장되기 때문에 설정을 수정해야함 Firebase deploy 무료로 호스팅 해주는 것을 볼 수 있습니다 서비스워커도 잘 돌아가는 것을 볼 수 있습니다. 서비스 워커란? 서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며, 웹페이지 또는..

1. Use AB Test - 김민영 / 원티드랩 프론트엔드 개발자 원티드랩에서 A/B 테스트에 대해 설명하고 직접 시연했다. 회원가입 전환율 관련 테스트를 진행 A안(원본)은 채용 공고를 보기 전 가입 유도를 하고, B안(대안)은 채용 공고는 일단 보여주고, 유저의 추가적인 액션이 있을 경우 가입 유도. 어떤 것이 회원가입 전환율이 높은가 테스트해서 B 안이 2.5배 높다는 것을 데이터를 통해 얻어서 성공했다는 것을 증명. 사용한 툴로는 Google Optimize Javascript API Google Optimize Javascript API의 설정 페이지 타겟팅 원본과 대안 설정 사용자 타겟팅(로그인 한 사람, 안 한 사람, 사용 기기 등) 트래픽 할당(%) GA 연동 원티드랩의 기술 스펙으로는 ..

* 사진 많음 데이터 주의 * 목차 1. 구글 검색의 작동 원리 2. 2019년 검색에 무슨 일이 있었나 3. 한국에서 SEO로 살아남기 4. 점심 5. 검색엔진이 이해할 수 있는 사이트 만들기 6. 커피타임 7. 디지털 마케팅을 위한 구글 서치 콘솔 8. 구글 검색 자세히 들여다보기 9. 웹사이트 성능 개선 도구 입장할 때 기념품으로 칫솔 세트 + 스티커 + 식권을 받았습니다. 밥 먹고 이 닦고 오라는 큰 그림인가...! 1. 구글 검색의 작동 원리 - 구글 검색팀 이수현 님 구글 검색의 작동 원리를 설명해주시고, 검색 알고리즘의 주요 요소에 대해 설명했다. 또한 구글 검색 엔진은 계속해서 업데이트되고 있으며 1년에 약 60만??(잘 기억이..) 아이디어 중 철저한 테스트를 거쳐서 약 3천 개? 정도의..

기획 PWA를 이용한 위치 저장 어플리케이션 만들기 - Vue 이용한 페이지 제작 - Firebase 를 이용한 호스팅 + DB 저장 목차 1. vue-cli4 Setting 2. Firebase Setting 1. vue-cli Setting 설정 중 PWA 설정 도와주는 옵션이 있습니다. 설정해주시면 편합니다. 2. Firebase Setting Window에서 firebase-tools 를 설치하려면 까다롭습니다. 글로벌로 설치해서 사용하라고 적혀있는데, Window에서는 권한이 없다고 막혀버립니다. 그래서 찾아본 결과, 독립형 실행 프로그램을 다운로드 후 설치해서 firebase-tools 를 이용하거나 nvm-window를 설치해서 버전 관리해서 사용하는 방법 두 가지입니다. https://gi..

사용할 기능들 1. navigation guard - 뷰 라우터 내비게이션 가드 2. axios Intercept - axios 설정 3. Vue cookies 4. vuex 토큰을 이용한 로그인 유지 flow는 아래 사진과 같습니다. 참고 - 쉽게 설명해주셨습니다. https://tansfil.tistory.com/59 쉽게 알아보는 서버 인증 2편(Access Token + Refresh Token) 안녕하세요! 이전 포스팅에는 크게 세션/쿠키 인증, 토큰 기반 인증(대표적으로 JWT)에 대하여 알아보았습니다. 저희가 앱, 웹 혹은 서버 개발을 하면서 꼭 사용하게 되는 인증(Authorization).. tansfil.tistory.com 더 더 검색해보니 사용자가 로그인하면 -> 서버측에서 Acce..

딜리셔스에 입사해서 크게 2가지의 업무를 했습니다. 1. 로그인 페이지 만들기 2. 기존 php 프로젝트를 Vue 컨버팅 작업 로그인 페이지 만들기 처음으로 메인으로 맡은 큰 프로젝트였으며 원래 있던 로그인 페이지를 개편하는 작업이었습니다. 기존 로그인 페이지는 정말 로그인 기능만 있었다면, 개편될 로그인 페이지는 딜리셔스 서비스인 신상마켓의 소개가 들어가서 디자이너와 협업이 많이 필요한 프로젝트였습니다. 기획 한분, 디자이너 두 분, 개발 저 한 명이 메인이었으며, 개발만 약 한 달 동안 진행했습니다. 회사에서 처음으로 디자이너분들과 협업해서 헤멘것도 있지만, QA를 같이 하면서 엄청 왔다 갔다 하면서 대화하고 친해지게 된 계기가 됐습니다. 상용 서버에 배포 후 준호님(대표님)이 칼같이 QA를 해주셔서..

새로운 곳으로 이직한 지 3개월이 다되어 갑니다. 요우 님의 이직 대탐험 포스팅을 보고 '인싸개발자는 저렇게 하는거구나' 라는 마음에 저도 이직 과정들을 포스팅 해야겠다고 생각했었습니다. 하지만 회사 다니느라 뜸했던 끄적끄적 이 30일 넘었다고 제 기록들을 다 날려버렸습니다. 임시저장된 글은 저장일부터 30일 보관 by.티스토리 지금이라도 적어야지 하며 강디너의 이직 탐험기를 소개해 드리려고 합니다. 2019년 초 상황 2019년 초 회사 내에서 잦은 팀 개편과 담당 업무 혼란 등 퇴사를 매우 매우 고민하고 있었습니다. 아무 대책 없이 퇴사를 하고 이직을 준비한다면... 자그마한 것도 사라지기 때문에 준비를 해야 했습니다. 마침 11월부터 개인 프로젝트와 블로그를 꾸준히 하고 있었고 '포트폴리오에 어필하..