일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- AWS
- 뷰
- jwt
- 로그인
- 기획
- 프론트
- 플러그인
- vue login
- 회고록
- react
- plugin
- 신상마켓
- database
- login
- vsCode
- javascript
- Firebase
- express
- 배포
- PWA
- 토이프로젝트
- Docker
- nginx
- vue
- extension
- 셋팅
- vuex
- Git
- 정리
- react-query
- Today
- Total
목록전체 글 보기 (105)
강디너의 개발 일지
웹 버전 관리 시스템 만든 이유는 단 한 가지입니다. 사용자가 이전 버전의 API 규격, 데이터 타입으로 호출해서 오류가 생기기 시작 웹 서비스 배포 후, 사용자가 이전 버전의 웹을 보고 있어서 이슈 발생하는 것을 감지했습니다. 딱 담당하고 있던 프로젝트 두 개에서 같은 이유로 이슈가 발생해서 해결해야 한다고 생각했습니다. 우선 원인은 SPA 특성 때문에 발생한 이슈였습니다. 생각지 못한 곳에서 나타났는데, SPA의 장단점은 여러 가지 있지만 그중 크게 중요하지 않게 생각 한 문장이 있습니다. 처음 접속했을 때 웹에 필요한 대부분의 리소스를 다운로드하기 때문에 초기 로딩 속도가 느리다. 하지만 그 후 필요한 리소스만 다운로드하기 때문에 빠른 렌더링이 가능하다. "초기 로딩 속도가 느리다"라는 것만 이슈하..
이전 포스팅과 이어집니다. 광고 보고 가시겠습니다. 목표 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 입니다. 사용자는 로그인을 해서 토큰을 얻어왔습니다. 토큰을 쿠키에 ..
이전 포스팅과 이어집니다. 목표 도커를 이용해서 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 -..
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..
상반기 회고록을 작성했으니, 당연히 하반기 회고록도 작성해서 한 해의 마무리를 잘하고 싶었다. 특히 상반기 회고록을 재미있게 봤다는 피드백을 많이 받아서, 더욱 잘 써보려고 한다. 보통 연말에는 사람들 만나고, 술 먹느라 시간을 많이 쓰기 때문에 회고록을 늦게 작성할 것 같았는데, 코로나 덕? 분에 집에 있는 시간이 많아져서 자연스럽게 글을 쓰고 있다. (코로나 때문에 회사에서 송년회도 못했다... 작년에 재미있었는데...) 1. 회사 코로나라서 특별한 이벤트 없이 일만 한 것 같았는데 되돌이켜보니 다양한 일이 있었다. (이래서 회고를 하는 것 같다.) 1-1. 광고 서비스 하반기 내내 새로운 광고 서비스를 오픈하는 규모가 큰 프로젝트에 합류해서 진행했다. 배경을 잠깐 소개하자면, 광고 관련 서비스를 전..
목표 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..
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 저장소에 ..