참고

[10cheon00]

https://snipcart.com/blog/vuejs-blog-demo

[10cheon00]

https://docs.comfortable.io/guides/vue-blog-example#getting-started

[10cheon00]

es6문법에 대해 익숙해져야겠다.

1. template literal

   "\'작은 따옴표 내용 \'" 이렇게 표현하는 대신, '작은 따옴표 내용'이렇게 표현한다. 마크다운때문에 이상한데 아무튼 백틱문자를 쓰고, 변수를 활용하려면 ${}을 이용한다.

2. default export

   js파일에서 딱 한가지만 export하기 위해 default를 붙인다. 한 가지의 모듈로 만들기 위해 그러는것 같다.

[10cheon00]

router-link에서 이벤트가 발생하면 router-view를 update한다. 이 때 무엇을 update할 것인지는 router에 정의된 path에 따라 바뀐다. 라이프사이클에 따라서 mounted상태이며 beforeUpdate, updated를 통해 이벤트를 캐치할 수 있다.

[10cheon00]

watch_vs_computed

computed properties

• 새로운 변수를 만든다.
• 반응성이 있는(?), 다른 변수에 의존성을 가진다.
• 선언시 매개변수를 전달할 수 없다.
• 선언 내의 어느 변수라도 달라지면 재연산한다.

다른 프로퍼티에 의존성을 가진 프로퍼티라면 computed가 알맞다.

watcher

• 새로운 변수를 만들지 않는다.
• 반응성이 있는(?), 다른 변수의 값의 변화를 관측한다.
• 단 한 개의 변수만 관측한다.
• old, new value 매개변수로 과거값, 현재값을 얻을 수 있다.

변수가 변화하는 것을 알아야 한다면 watch가 알맞다.

[10cheon00]

Vue3 Coding Style

[10cheon00]

Vuex 간단히 정리..

주의깊게 봐야할 점

1. Getters는 state를 계산해 어떠한 결과를 반환하기 위해 쓰는 것. 단순 조회로 사용한다면 그냥 state를 확인하면 된다.
2. Mutations은 Setters로 생각하면 된다. 단지 동기방식인 것만 주의하자.
3. Actions은 아직 안 배웠지만 비동기 방식인 것만 알고 있다.
4. Modules로 여러 모듈을 만들 수 있다. state를 분리할 수 있다는 점!
5. 각 모듈에는 namespaced: true 옵션으로 재사용성을 높일 수 있다고 한다... 안 붙이면 어떻게 될까?

   this.$store.commit('MODULE_NAME/MUTATION_NAME', payload)
   this.$store.dispatch('MODULE_NAME/actionDispatch')
   this.$store.state.MODULE_NAME.stateLists

[10cheon00]

로그인을 했다고 Sign Up, Sign In을 못 들어가는게 아니다.

네이버 : 로그인 상태에서 가입페이지, 로그인 페이지 접속 가능 구글 : 로그인 상태에서 가입페이지 접근 가능, 로그인 페이지로 접속 시 로그인이 되어있다면 홈페이지로 이동되어버린다.

Nav에 보이지 않게 숨기고, url을 직접 찾아서 들어온다면 로그인 여부를 확인하고 리다이렉트를 하면 될 것 같다. (아마 갖고 있는 토큰을 검증받아야 하지 않을까...)

[10cheon00]

Vuex 간단히 정리..

Vuex 자세히 정리...

필요성

각 컴포넌트들간에 같은 코드가 존재할 수 있음. 또는 공통으로 존재해서 어디서든지 필요한 상황이 있을 수 있음. 싱글톤같은 객체가 필요해진다.

vue4에서 vuex사용하기

// store.js
import { createStore } from 'vuex'

const store = createStore({
    modules: {
    },
})
export default store

// main.js
import { createApp } from 'vue'
import store from './store'

createApp(App).use(store),mount('#app')

state

이 곳에 데이터를 저장해둔다. 싱글톤같은 역할이다. 어떤 컴포넌트든지 this.$store.state로 접근할 수 있다.

state: {
    count: 0,
    todoList: [],
},

컴포넌트의 props처럼 Number, String같은 형태를 명시하는줄 알았지만 실제 값을 넣어줘야 한다.

getters

먼저, state를 갖고오려면 그냥 접근하면 된다. this.$store.state.VARIABLE_NAME 그런데 state에 어떤 처리를 거친 결과를 갖고 오고 싶을 경우, state를 이용해 복잡한 연산을 거친 결과를 갖고 오고 싶을 때, getter를 사용한다. this.$store.GETTER_NAME으로 호출한다. template에서 이걸 그대로 쓰면 template가 더러워진다. computed에서 getter를 호출하고 템플릿에선 computed를 불러오는 형태로 쓰면 더 깔끔해진다.

getters: {
    doSomething: (state) => {
        //state.VARIABLE_NAME로 state에 접근
        return result
    }
}

• 다른 getter가 필요할 때

  doSomething2: (state, getters) => {
   //getters.doSomething으로 호출..
  }

• 인자를 넘겨야 할 때

  findStringStartWith: (state) => (startLetter) => {
   ...
  }

  mapGetter를 이용해, 컴포넌트에서 getter를 호출하는 경우 더 간편하게 호출할 수 있다.

  
  import { mapGettters } from 'vuex'

computed: { ...mapGetters([ 'GETTER_NAME', ]) } getter_name을 그대로 쓰지 않고 다르게 호출하고 싶다면, ...mapGetters({ otherName: 'GETTER_NAME', })

[10cheon00]

Vuex 간단히 정리..

Vuex 자세히 정리...

mutations

getters가 state를 갖고 어떤 연산을 거쳐 결과물을 반환하는 역할이었다면, mutations은 setter라고 생각하면 된다. 동기적으로 진행되는 작업을 mutation에 작성한다. state를 변화시키는 함수를 작성하는 공간이다.

mutations: {
    addValue(state, val) {
        state.VARIABLE_NAME += val
    }
}

호출은 이렇게 한다. this.$store.commit('addValue', 10) 또는 이렇게도...

this.$store.commit({
    type: 'addValue',
    val: 10
})

중요한 것은 mutation이 동기라는 거다. api를 호출하려면 actions을 이용해야 한다. state를 변화시키고 싶다면 mutation을 이용하는게 맞지만 mutation을 호출한 이후에는 state가 변했다는걸 전제하고 작성해야겠다.

[10cheon00]

Vuex Actions

Promise를 사용하므로, 이 개념에 대해 이해해야겠다.

[10cheon00]

Promise를 사용하므로, 이 개념에 대해 이해해야겠다.

Promise

왜?

js특유의 콜백함수를 중첩시키다보면 피라미드 구조가 난잡해진다. 이를 해결하기 위해 Promise라는 개념이 등장.

사용법

let promise = new Promise( (resolve, reject) => {
    // 어떤 비동기 처리를 이 함수 안에서 진행한다.
    // 그 작업이 성공 시 resolve()를 호출하고, 
    // 실패 시 reject()를 호출한다.
})

promise.then(value => {
    // 인자로 넘어오는 값은 resolve(...)를 호출할 때 인자로 넘긴 값이다. 
}).catch(error => {
    // ... error 값도 reject에서 넘긴 값이다.
})

장점

피라미드 구조를 체이닝형식으로 바꿨다는 점. then().then().then()으로 계속 이어지는 구조를 통해 비동기 처리를 연속적으로 실행해야 하는 경우를 단순화할 수 있다. 각 Promise는 비동기 작업 완료를 나타낸다.

resolve와 reject는 대체 뭐지?

비동기 처리의 결과를 어떻게 처리하느냐? then과 catch로 다룬다. resolve()를 호출하면 then()안에 들어간 함수가 실행된다. resolve에 들어가는 인자는 then()안에 들어갈 함수에게 넘겨진다. reject도 똑같다. resolve는 then을 말하는 것, reject는 catch를 말하는 것.

[10cheon00]

Vue-Router Flow

[10cheon00]

JWT Refresh Flow