강디너의 개발 일지

목표 Vue.js를 이용하여 firebase, google 로그인 google AccessToken, RefreshToken 가져오기 Firebase 1. Firebase 프로젝트 설정에서 Google 로그인 사용 설정을 허용합니다. 2. Firebase SDK 설치 (현재 8.0.0 버전) npm install --save firebase 3. Firebase 세팅 (firebase.google.com/docs/auth/web/google-signin) Vue 컴포넌트가 생성 될 때 firebase 초기화 후 로그인 이벤트 설정해줍니다. Google 1. 아래 구글 개발자 콘솔에서 프로젝트 생성 및 OAuth 2.0 클라이언트 ID를 얻습니다. console.developers.google.com/ 2..

목표 Vue.js를 이용하여 카카오 로그인 카카오 AccessToken, RefreshToken 가져오기 유저 정보 가져오기 준비물 developers.kakao.com/ REST API 키 Javascript 키 Admin 키 Flow 인증 코드 요청 (javascript SDK) 받은 인증 코드를 이용하여 토큰 요청 (REST API) 받은 토큰을 이용하여 계정 정보 요청 (javascript SDK) (코드: github.com/DinnerKang/study_vue/tree/master/todo-list) 카카오 로그인 1. index.html 에 아래 코드 삽입 (카카오 javascript SDK) 2. kakao javascript 키 설정 - main.js window.Kakao.init('1..

Git 기초 명령어 git clone 'URL' git clone 명령어는 원격 github에 저장되어있는 소스 코드를 내 로컬로 저장하는 명령어. 원격에서 저장소를 최초로 가져올 때는 git clone을 써야 한다 git add 'file path or name' 수정한 코드 선택하기 - 경로 또는 이름을 직접 선택할 수 있다. 하위 디렉토리를 전부 담고 싶다면 * 또는 --all를 적으면 된다. git status 현재 git의 상태를 보여준다. (변경 사항 등) git commit -m '변동사항에 대하여 적을 내용' 선택한 코드 설명을 적는 칸이다. 협업하는 개발자들은 커밋 메시지로 어떤 걸 변경했는지 대략적으로 알 수 있다. 대충 적으면 그 커밋을 보는 동료들은 별로 좋아하지 않을 것이다. gi..

Git 설치 - 윈도우 윈도우용 Git 설치 파일을 다운 받습니다. Git 다운로드 페이지 입니다. 1. 약관 (읽을 수 있다면 읽..) 2. 어떤 에디터를 사용할 것인가. vim 편집기는 강력하지만 사용하기 어려울 수 있습니다. 사용자 인터페이스가 직관적이지 않고 키 바인딩이 어색합니다. vim은 역사적인 이유로 Windows 용 git의 기본 편집기이며 대신 최신 GUI 편집기로 전환하는 것이 좋습니다. 그러면 'core editor'옵션이 설정되지 않고 Git이 'editor'환경 변수로 대체됩니다. 기본 편집기는 Vim이지만 원하는 다른 편집기로 설정할 수 있습니다. 요약 : 고를순 있게 했는데, vim 으로 하는게 신상에 좋을 것이다. 3. 어떤 쉘 클라이언트를 사용할 것인가. Git 저장소에 ..

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..

목적 특정 페이지를 들어갈 때 비밀번호를 입력하고 맞을 경우에만 들여보내고 싶다. 아무 생각 없이 비밀번호를 입력해야지만 들어갈 수 있는 페이지를 어떻게 만들까 하다가 대충 생각했을 때에는 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({..