Summary of Vuejs, Vuex, Vue-Router front-end Practical
view-trello
Summary of Vuejs, Vuex, Vue-Router front-end practical technology lectures through Trello development
1. Getting started
Lecture introduction
Requirements -> Technical Research -> Function Implementation
Requirements Analysis
- Authentication: login, logout
- Board work
Code scaffolding
npm i -g vue-cli or yarn global add vue-cli
2. Routing
The need for a router
- Server routing: Naver, Google
- Browser routing: Google Mail, Trello
3. API communication
Explore the backend API
To see the json data pretty in curl command, you need the following program? ex) curl localhost:3000/health -v | jq
https://stedolan.github.io/jq/
Ajax - HttpXMLRequst 객체
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
Using Axios in practice
It is better to make a separate module that calls axios.
4. Certification
Authentication API
In practice, it is necessary to respond to the expiration time for the token.
Navigation guard
There is a navigation guard in vue router.
This function can add logic before being routed.
6. State Management
Vuex
- Serves as a central repository for all components
State
yarn add vuex
Store improvements
https://vuex.vuejs.org/kr/guide/structure.html
7. Basic flow implementation
Card Movement 1-Logic Analysis
https://github.com/bevacqua/dragula
Card Movement 2-Implementation
yarn add dragula
8. Implementation of additional requirements
theorem
- Requirements: Basic addition
- Technical research: Vue, Vuex, Vue-router, axios, dragula
- Function implementation: spa, authentication, trello
9. Things to implement yourself
server
Default implementation
- sqlite => MySQL, PostgreSQL
- Check the operation after changing to the above RDB
- distribute
Additional implementation
- Automatic distribution
- refresh token
- SNS login
- typescript
- typeORM
front
Default implementation
- Operation when access token expires
- distribute
Additional implementation
- Automatic distribution
- Refresh token related operation (expiration and update response)
- typescript
Download Details:
Author: seongjoojin
Source Code: https://github.com/seongjoojin/vue-trello
#vuejs #vue #javascript
