목록javascript (8)

강디너의 개발 일지

javascript - JWT 로그인 및 세션 유지

이전 포스팅과 이어집니다. 광고 보고 가시겠습니다. 목표 1. Access Token을 이용한 API 통신 2. Refresh Token을 이용한 Access Token 갱신 3. 사용자 모르게 토큰 갱신 후 API 호출 아래와 같은 Flow로 사용자에게 세션이 끊켰다는것을 모르게 데이터를 보여줄 것입니다. 준비 front - Vue 만든거 열기 back - API 서버 열기 docker - 만들어둔 컨네이너 시작해서 DB 열기 Git - github.com/DinnerKang/study_vue/tree/master/todo-list Docker - kdinner.tistory.com/99?category=312484 Login API 입니다. 사용자는 로그인을 해서 토큰을 얻어왔습니다. 토큰을 쿠키에 ..
Javascript/삽질 2021. 2. 7. 16:12
javascript - 간단한 JWT 로그인 로직 만들기

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..
Javascript/Vue.js 2021. 1. 10. 20:37
javascript - 카카오 로그인 with Vue.js

목표 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..
Javascript/Vue.js 2020. 10. 23. 02:18
javascript - AWS Lambda 를 이용해서 크롤링하기

기획 멜론 차트를 하루에 한 번 크롤링해서 Firebase Database에 저장 현재 상황 1. Vue.js 를 이용해서 프론트를 만드는 중이다. 2. Firebase Database 를 사용한다. 3. 멜론 차트를 크롤링 하고 싶다 { const title = []; const artist = []; const result = {}; const rank = 100; const getHtml = async () => { try { return await axios.get('https://www.melon.com/chart/'); } catch (err) { console.error('axios error', axios); console.error(err); } } const html = await ge..
Javascript/삽질 2020. 1. 27. 23:41
javascript - 날짜 계산(몇일전, 몇시간전, 몇분전)

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 `${..
Javascript/이것저것 2020. 1. 15. 21:22
Vue - watch를 이용한 정규식 사용

1. 한글 방지 input 만들기 data(){ return{ userInfo:'', onlyNumber:'', } }, watch:{ userInfo(val){ const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; if(reg.exec(val)!==null){ return this.userInfo = this.userInfo.slice(0,-1); } } } 2. 숫자만 입력 가능한 input 만들기 watch:{ onlyNumber(){ return this.onlyNumber = this.onlyNumber.replace(/[^0-9]/g, ''); } },
Javascript/Vue.js 2019. 9. 16. 19:29
javascript - Comma 만들기

삽질하지 않기위한 기록 makeComma(number){ return String(number).replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
Javascript/삽질 2019. 9. 11. 10:37
Vue에 익숙해지기 - Bingo(1)

목표 : Vue.js를 이용한 빙고게임 만들기 세부 목표 빙고판을 컴포넌트로 만들어서 재활용하기 2인용으로 만들기 vuex를 이용하기 1턴씩 주고 받기 (자기턴이 아닐 시 에러 처리) 5빙고가 되면 종료하기 1. 빙고판 만들기 flex를 이용해서 간단하게 5x5 빙고판을 만들었습니다. {{number}} .bingo_container{ display: flex; width: 100%; flex-wrap: wrap; .bingo{ flex: 0 0 19%; border: 1px solid #ced3d6; height: 150px; display: flex; justify-content: center; align-items: center; font-size: 40px; cursor: pointer; } .a..
Javascript/Vue.js 2019. 6. 27. 17:34
Prev 1 Next