Vue.js

프론트를 공부한적이 한번도 없었기 때문에 저번에 프로젝트 할때 많이 아쉬웠던 부분이 있었다. SPA를 구성해보고 싶어서 러닝커브가 낮다는 뷰를 선택해서 공부한지 4일? 정도 된것 같다!
그냥 공부하면서 좀 익숙치 않았던 부분이 굉장히 많았다. 그런부분들만 정리해서 다시 보려한다.

타입스크립트를 서버개발캠프에서 적용했던 경험이 있어서 뷰에도 타입스크립트를 이용해서 짜보려고 노력중이다. 클래스 기반의 컴포넌트로 작성!

프론트 단에서 타입스크립트를 쓰는게 좋은건지는 아직 와닿지 않는다. 백엔드, 비지니스로직을 구성하거나 그럴 때에는 타입스크립트의 장점이 확실하게 느껴졌는데 ... 프론트에서는 잘 모르겠다 ㅜㅜ

computed, watch

Vue에서 비동기적으로, 반응적인 데이터들을 설정할때는 computed 나 watch를 사용한다고 한다.
둘다 비슷하게 변경되는 값들을 추적하는 역할을 해준다. 가장 완벽하게 이해하기가 애매했던 파트...
프로젝트를 한번 해보면서 다시한번 정리해서 예시를 통해 정리하기로 ㅜㅜ
구글링을 하면서 선배 개발자분들의 글들을 보면,
computed는 내부 api에 의한 데이터를 추적해야 할때 많이 사용하고,
watch는 외부 api에 의한 데이터 추적시에 사용한다고 한다,

Vuex - component 간의 통신

컴포넌트간의 통신을 이용할때, 부모에서 자식에서는 props의 방법으로, 자식은 부모에게 Emit Event를 통해 데이터를 주고받는다. 하지만 형제 컴포넌트간의 통신에서는 EventBus를 이용해서 전달해야한다. EventBus는 뷰객체를 만들어서 뷰객체 자체를 이용해서 전달하는 형태이다. 많은 상황을 고려하지 않는 간단한 프로젝트같은 경우에는 괜찮지만, 어느정도 규모의 프로젝트에서는 감당이 되지 않는다. 이러한 문제를 Vuex를 통해 해결할 수 있다!

Vuex - Store

뷰에서는 스토어를 통해 데이터를 관리한다. 정확히는 데이터들의 상태를 관리해준다.

• state: 컴포넌트가 갖는 데이터를 저장
• action: mutation을 실행시킬 수 있는 권한(commit)을 갖는다. Back-end의 서버와 통신을 하는부분, 콜백형태의 메서드 정의.
• mutation: action의 commit을 받아 실행할 수도 있고, 바로 mutate 역시 가능함
• getter: state의 값을 가져다 씀