강디너의 개발 일지

Vue.js + Express.js를 이용하여 로그인 로직 만들기 Front - Vue.js (localhost:8080) Back - Express.js (localhost:5000) (코드: github.com/DinnerKang/study_vue/tree/master/todo-list) front, back 코드는 현재 로컬에서 실행 중입니다. 서로 통신을 하기 위해서 기본 설정을 해줘야 합니다. Front - axios baseURL 설정 axios.defaults.baseURL = 'http://localhost:5000'; Back- cors 설정 const express = require('express'); const cors = require('cors'); const app = expr..

목표 Vue.js를 이용하여 네이버 로그인 네이버 AccessToken 가져오기(RefreshToken은 제공 안 한다고 함) AccessToken을 이용해서 네이버 API 사용하기 준비물 네이버 어플리케이션 등록 clientId, callbackUrl 값이 필요합니다. 네이버 API 설명서 1. index.html에 아래 코드 삽입 (Naver SDK) 2. DOM이 mount 된 후에 실행될 수 있도록 로직을 짜줍니다. LoginNaver.vue login.js const naverService = () => { const naverLogin = new window.naver.LoginWithNaverId({ clientId: "a0K------------Xfk", callbackUrl: "http:..

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

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

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에만 적용됩니다. 아래 ..

동적 컴포넌트란 컴포넌트를 동적 또는 비동기로 변경하고 싶을 때 v-bind:is를 사용하는 기능입니다. 이번 포스팅에서 보여드릴 예제는 router에서 특정 meta를 이용하여 레이아웃을 만들어보겠습니다. 프로젝트 기본 구성 짧게 설명드리자면 App 바로 아래 Layout을 둔 다음 slot으로 router-view를 둔 것입니다. App.vue router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home'; import MyPage from '../views/MyPage'; import Lounge from '../views/Lounge'; Vue.use(VueRouter..

Composition API는 Vue3에 도입되는 함수 기반 API 입니다. Composition API를 소개하는 페이지에서는 아래와 같이 설명하고 있습니다. 컴포지션 API 소개 : 구성 요소 논리를 유연하게 구성 할 수있는 추가 기능 기반 API 세트입니다. 중요한것은 Vue2에서도 나중에 나올 Vue3의 문법을 사용할 수 있도록 만든것이 Composition API 입니다. Vue2에서 Vue3 로 버전이 올라가면서 바뀌는 것이 많습니다. (Lifecycle, 문법 등) Vue의 단점이라고 말하는 '프로젝트 규모가 커질수록 관리하기 힘들다' 하는 점을 Composition API로 보안했습니다. 기존 Vue2에서는 data, methods, watch 등등 프로젝트 규모가 커질수록, 컴포넌트 안에..

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