강디너의 개발 일지

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
Docker에 MySQL 설정해서 회원가입, 로그인 하기

이전 포스팅과 이어집니다. 목표 도커를 이용해서 MySQL 설치 후 사용 예정 회원가입한 사용자 데이터를 MySQL에 저장 로그인 시 JWT 토큰 저장 이전에 비슷한 포스팅을 한 적이 있습니다. - window는 여기 참고하시면 됩니다. 이번 포스팅에서는 DBeaver라는 데이터베이스 관리 도구 사용하겠습니다. Mac에 도커가 설치되어있다고 가정하겠습니다. mysql pull 받기 docker pull 이미지이름 mysql 이미지 확인 docker images 도커 컨테이너 생성 및 실행 docker run -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=password --name dinner-mysql -v /Users/dinner/sql:/var/lib/mysql mysql -..
back_end 2021. 1. 24. 20:11
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
주니어 개발자의 2020년 하반기 회고록

상반기 회고록을 작성했으니, 당연히 하반기 회고록도 작성해서 한 해의 마무리를 잘하고 싶었다. 특히 상반기 회고록을 재미있게 봤다는 피드백을 많이 받아서, 더욱 잘 써보려고 한다. 보통 연말에는 사람들 만나고, 술 먹느라 시간을 많이 쓰기 때문에 회고록을 늦게 작성할 것 같았는데, 코로나 덕? 분에 집에 있는 시간이 많아져서 자연스럽게 글을 쓰고 있다. (코로나 때문에 회사에서 송년회도 못했다... 작년에 재미있었는데...) 1. 회사 코로나라서 특별한 이벤트 없이 일만 한 것 같았는데 되돌이켜보니 다양한 일이 있었다. (이래서 회고를 하는 것 같다.) 1-1. 광고 서비스 하반기 내내 새로운 광고 서비스를 오픈하는 규모가 큰 프로젝트에 합류해서 진행했다. 배경을 잠깐 소개하자면, 광고 관련 서비스를 전..
회고록 2020. 12. 20. 21:53
javascript - 네이버 로그인 with Vue.js

목표 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:..
Javascript/Vue.js 2020. 11. 13. 23:53
Prev 1 ··· 3 4 5 6 7 8 9 ··· 22 Next