졸업프로젝트
1.헤이동동 서비스 소개 및 설계
음료 메뉴 : 매장의 음료 메뉴를 모바일 앱 안에서 손쉽게 확인나만의 음료 : 커스텀 메뉴 혹은 자주 주문하는 음료를 저장하고 간편하게 주문결제 바코드 생성 : 주문이 완료되면 결제 바코드가 생성되고, 음료 수령 시 간편하게 결제히스토리 : 자신이 주문했던 내역을 확인
2.Vue CLI로 프로젝트 생성
vue cli로 프로젝트 생성법
3.ESLint + Prettier 설정
ESLint + Prettier 설정법
4.Vue.js 절대 경로 설정
jsconfig.json
5.Vue CLI의 env 파일과 proxy 설정
.env.development, .env.production, .env vue.config.js
6.reset.css
css style을 reset 하기 위한 코드
7.Vue router 설정
1\. 뷰 라우터 설치2\. @/routes/index.js 폴더 및 파일 생성url 주소의 \`\`\`\`js mode: 'history',component를 하나씩 import하지 않고 설정하는 방법인증이 필요한 페이지는 router.beforeEach로 다시 로그
8.Vuex store 설정
1\. vuex 설치2\. @/store/index.js 폴더 및 파일 생성3\. main.js
9.Vue.js axios + store 사용하여 메뉴 불러오기
1\. axios 설치2\. @/api/index.js 생성3\. @/api/menus.js4\. 메뉴를 불러와 store에 저장할 것이다.@/store/index.js5\. @/store/mutations.js6\. @/store/actions.js 생성7\. @/v
10.Vue props로 component에 메뉴 데이터 넘기기
부모 컴포넌트 @/view/menu/AllMenuPage.vue 에서 자식 컴포넌트 @/components/menu/MenuListItem.vue로 menuItem을 넘긴다.1\. @/view/menu/AllMenuPage.vuevuex의 mapGetters를 이용cr
11.Vue axios interceptor를 이용한 로그인 토큰 헤더에 넣어 보내기
1. Token을 store에 저장 로그인을 하면 Spring boot 서버에서 jwt를 이용한 token을 response로 보내준다. 그 토큰을 store에 저장 후 꺼내서 request header에 실어 보낼 것이다. cookie에 토큰을 넣고 store에서 쿠
12.로그인 시 user 정보 쿠키에 담기
1\. @/utils/cookies.js2\. @/store/index.js3\. @/views/login/SignInPage.vue 1\. @/utils/cookies.js 1\. @/utils/cookies.js2\. @/views/login/SignOutPag
13.localStorage를 이용한 장바구니 구현
localStorage에 key값을 숫자로 하여 장바구니 메뉴들을 저장할 것이다.@/menu/MenuDetailPage.vue@/order/CartPage.vue
14.Vue.js에서 카카오맵API 사용하기
package.json 에추가한다.먼저 html로 작성하면이 모양을 DOM Manipulation을 이용해서 만들어준다.
15.RefreshToken을 이용하여 로그인 세션 유지하기
Spring boot 로 구현한 Back-End에서 JWT를 사용하여 로그인 시 Access Token과 Refresh Token을 response로 보내준다. 보통 유효기간은 Access Token은 1시간, Refresh Token은 2주 정도이다.최초 로그인 시