강디너의 개발 일지

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월부터 개인 프로젝트와 블로그를 꾸준히 하고 있었고 '포트폴리오에 어필하..

예전에는 filters 라는 메소드가 없어서 ? 못찾아서 ? 못사용했는데, 최근에 뷰에 대해 공부하다 보니 있었다. filters 기능을 몰랐던 당시에는 methods, watch 에 넣어서 사용했었는데 구분 할 수 있을것 같다 {{arr | comma}} 1. 로컬 필터 data(){ return{ commaTest: [14000,1231244,1231244566,42134324,21312], } }, filters:{ comma(val){ return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ","); } } 2. 전역 필터 {{arr | makeComma}} Vue.config.productionTip = false; Vue.config.silent = tru..