📚TIL

day38

Vuex Store

• store는 전혀 관련 없는 컴포넌트들 사이에서도 데이터를 활용할 수 있기 때문에 유용
• 상태관리 패턴 : state(중앙집중화로 관리하는 데이터), view(화면에 보여지는 내용), action(반응성 데이터들을 동작)
• createStore를 통해서 store 인스턴스를 생성해준 이후 use를 통해서 연결
• store기본 구성 : state(데이터), getters(계산된 데이터), mutations(데이터 상태를 변경하기 위해 사용), actions(데이터 변경 외의 로직들)
• state : vuex에서는 관리하고 사용할 데이터를 상태(state)라고 부르며 중앙에 집중되어있는 저장소 역할로 데이터 수정에 용이
• state는 직접 접근하여 데이터를 사용할 수 없음
• this.$store를 통해서 접근 가능

store의 모듈화

• store를 모듈화해서 내보낸 후 꺼내서 사용할 수 있음
• export를 통해서 내보낸 후 mapState, mapGetters, mapMutations, mapActions를 전개연산자를 통해서 접근할 수 있음

day39

Vue router

• route를 구성하여 plugin으로 연결하면 this.$route/ $router를 통해 접근 가능
• this.$route : 현재 페이지에 대한 정보를 가지고 있음
• this.$router : 페이지에 대한 조작을 할 수 있는 여러가지 매소드들이 들어있음
• : 자리에 해당하는 페이지들이 출력되며 페이지가 바뀔 때 다시 그려주는 영역
• HOME : HOME이라는 버튼을 통해 이동 가능
• path:'/:notFount(.*)' : 404 Error를 관리하는 방식으로 주소가 없는 경우 어떤 페이지를 출력할 지 결정할 수 있음
• this.$router.push('url') : 원하는 주소로 변경

🎨2021. 10. 06

store와 router 강의를 들었다. store의 개념을 어제보다 더 깊게 배웠는데 노션프로젝트 때 customEvent를 사용해서 데이터를 전달하던 방식보다 훨씬 간편하다는 생각이 들어 vue가 매력적으로 느껴졌다. Vanilla Js를 사용해서 router하는 과정은 굉장히 어려웠다. 노션 프로젝트를 할 때 특히 코드가 굉장히 지저분해져서 아쉬웠는데 Vue는 를 통해서 출력할 영역을 지정하기 때문에 복잡도가 줄어들고 코드 관리가 깔끔해져서 좋았다. 라이브러리를 쓰는 이유를 알 것 같다. 훨씬 간편하게 코드를 짤 수 있을것 같다!
내일도 Vue 강의 듣기 ~~!