반응형
입문외에 추가적으로 공부하면 좋은 내용 정리
Vuex
컴포넌트 통신 문제점 발생
Vue는 컴포넌트간 데이터 통신을 제공하는데 컴포넌트 통신간에 수 많은 컴포넌트가 존재하면 porps 남발하게 된다. 이를 해결하기 위해서 이벤트 버스를 사용하지만 이벤트 버스를 남발하면 또한 데이터의 흐름이 잘 잡히지 않는 문제가 생긴다.
Vuex란?
뷰엑스는 어플리케이션 상태관리를 돕는 라이브러리이다. 모든 데이터를 중앙에서 관리하여 데이터 관리를 효율적으로 하는 것을 목표로 한다.
뷰의 반응성(Reactivity)
뷰가 데이터가 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성이다. 뷰의 반응성은 뷰 인스턴스가 생성될 때 적용된다. 그 후 추가된 데이터 속성에 대해서는 반응성은 없다.
서버 사이드 렌더링
클라이언트 사이드 렌더링은 매끄러운 사용자 경험을 제공하지만 SEO 검색 최적화 점수가 높지 않아 검색 엔진 노출이 낮다. 반면 서버사이드의 경우 SEO 검색 최적화 점수가 높다. 기본적으로 뷰를 클라이언트 사이드 렌더링으로 사용하지만 서버사이드 렌더링 라이브러리 Nuxt.js를 제공한다. 상황에 맞는 방식을 사용하면 된다.
웹팩
서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환도구. 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해주는 변환 도구.
- 자바스크립트,css, 이미지 파일에 대한 http 요청이 발생하는데 http 요청이 많을 수록 웹 로딩시간은 지연된다. 그러므로 하나의 자바스크립트 파일로 만들어주는 것은 웹 속도 개선에 도움이 된다.
- vue는 vue-loader, css는 css-loader, javasciprt는 babel-loader를 사용하여 ES6 문법을 호환가능하도록 변환, 이미지 파일은 file-loader를 사용하여 자바스크립트로 변환한다.
반응형
