지난 글 : https://crispypotato.tistory.com/172 7. Node 프로젝트 가계부 만들기 (back-end와 api 연결) 지난 글 : https://crispypotato.tistory.com/134 6. Node 프로젝트 가계부 만들기 (Vue, 라이브러리 설치) npm i axios Vue2와 Vue-cli 이용해서 프로젝트를 제작한다. 1. Vue-cli를 설치한다. npm i -g @vue/cli.. crispypotato.tistory.com api가 연결이 되면 해당하는 rest api에 맞게 전송 해야한다. 전송 메소드 방식 get, delete params post, put, patch body /src/api/ 디렉토리 안에 url.js라는 파일을 생성한다. ..

지난 글 : https://crispypotato.tistory.com/134 6. Node 프로젝트 가계부 만들기 (Vue, 라이브러리 설치) npm i axios Vue2와 Vue-cli 이용해서 프로젝트를 제작한다. 1. Vue-cli를 설치한다. npm i -g @vue/cli 2. Vue-cli를 사용하여 프로젝트 생성 ex) vue create test-vue vue create Vue2 Default 로 설정 하고 엔.. crispypotato.tistory.com 요약 설치 한 axios를 이용하여 back-end와 통신을 한다. vue interceptor를 이용하여 로그인, 비로그인 상태를 구별 하여 전송시 인증 토큰 유무를 결정한다. vue Interceptor 설명 참고 : http..

npm i axios Vue2와 Vue-cli 이용해서 프로젝트를 제작한다. 1. Vue-cli를 설치한다. npm i -g @vue/cli 2. Vue-cli를 사용하여 프로젝트 생성 ex) vue create test-vue vue create Vue2 Default 로 설정 하고 엔터를 입력하면 자동으로 프로젝트가 생성된다. 3. 필요한 라이브러리들을 설치 해 준다. 프로젝트 디렉토리로 이동하여 axios, vuex, dayjs, vue-router, vuex-persistedstate를 설치한다. npm i axios vuex dayjs vue-router vuex-persistedstate axios : 백엔드 서버와 통신하기위한 라이브러리 vuex : 데이터를 중앙에서 관리하는 저장소 dayj..

가계부 작성, 수정, 삭제 구현 깃 주소 : https://github.com/wls0/account_book/blob/master/routes/account.js Account는 위에 선언한 account_lists를 의미한다. // 가계부 작성 router.post('/', async (req, res, next) => { try{ const token = req.headers.authorization // const token = req.cookies.user.access_token const tokenResult = jwt.verify(token, secret.jwtPwd) const bigCategory = req.body.bigCategory const smallCategory = req.bo..

passport를 이용해서 로그인 jwt를 이용하여 인증 유저를 계속확인하기위해 디비에 요청하는 작업은 자원 낭비이기 때문에 jwt를 이용하여 로그인 횟수를 줄일 수 있다 깃 주소 : github.com/wls0/account_book/blob/master/routes/user.js passport를 설치 한다. npm install passport passport-local 1. id, password를 프론트에서 받는다. 2. 유니크 키인 id를 이용하여 해당 유저의 디비를 찾는다. 3. 유저의 비밀번호가 맞는지 crypto을 이용해 해당 패스워드와 salt값을 합쳐 디비에 저장된 비밀번호와 같은지 확인 한다. 4. 맞다면 done(null, data)로 유저 정보를 전달한다. jwt jwt 설명 :..

회원가입시 중복 아이디 확인 유저의 비밀번호는 crypto를 이용해서 저장 깃 주소 : github.com/wls0/account_book/blob/master/routes/user.js 아이디를 유니크 키이기 때문에 아이디가 중복되면 안되서 아이디 중복을 확인해준다. 1. let check 을 전역변수로 두고 중복확인을 해야 값이 true로 변한다. 2. 회원가입시 전역변수 check가 true로 변하는지 확인, 입력값이 비어있는지 확인 후 회원가입을 진행한다. 회원가입 express에 내장되어있는 모듈시 중복 아이디 확인 후 유저의 비밀번호는 crypto를 이용해서 저장한다. crypto를 이용해서 salt를 만든 후 유저 테이블에 아이디, 암호화된 비밀번호, salt를 저장 시켜주면된다. const..