beomy

스벨트 입문 강의를 출시했습니다. 블로그의 내용과 공식 문서를 토대로 인프런에 스벨트 입문 A부터 Z까지 강의를 출시했습니다. 공식 문서의 내용을 모두 담아 다른 강의나 다른 블로그를 찾아볼 필요 없이 이 강의 하나면 한 번에 해결하실 수 있습니다. 왜 스벨트를 배워야 할까요? 스벨트는 2019년에 등장해 무럭무럭 자라나고 있는 새로운 프론트엔트 프레임워크입니다. 가상돔을 사용하지 않아서 React, Vue와 다른 페러다임을 제시한 프레임워크입니다. 스벨트를 배워두면 좋은 이유를 이야기해 볼께요. 2019년 관심도 1위! 스벨트는 리엑트, 뷰, 앵귤러 프론트엔트 3대장 자리를 위협하며 2019년 관심도 1위를 기록했습니다. 스벨트는 많은 개발자의 관심을 끌게 한 강력한 무기를 가지고 있겠죠? 장점 하나:..

beomy.github.io에 브라우저에 관한 포스팅을 하였습니다. 주된 내용은 브라우저 구조, 초기 렌더링 최적화, 렌더링 업데이트 최적화에 관련된 내용입니다. 1. 자바스크립트 런타임이란? 자바스크립트 런타임이란, 간단하게 이야기 하자면 자바스크립트를 실행시키는 환경을 이야기 합니다. 브라우저 역시 자바스크립트를 실행시킬 수 있는 환경이기 때문에 브라우저도 자바스크립트 런타임이라고 이야기 할 수 있습니다. [JavaScript] 자바스크립트 런타임에서 자바스크립트 런타임이 무엇인지 이야기 합니다. 2. 브라우저가 화면을 렌더링 하는 방법 브라우저의 구조는 어떻게 되고, 브라우저가 HTML, CSS, JavaScript를 어떻게 화면에 렌더링 하는지 [Browser] 브라우저 렌더링에서 이야기 합니다...

github 페이지에 Vue.JS 소스 코드 분석 포스팅을 올렸습니다. 2019년 말에는 Vue 3.0 버전을 출시한다고 해, 이 포스트 시리즈는 곧 outdate 될 것 같습니다.. (공들여 작성했는데...) [Inside Vue] 1. Introduction - Vue Code 분석 [Inside Vue] 2. Initialize - Vue 코어 함수 [Inside Vue] 3. Initialize - Mixin Layer [Inside Vue] 4. Initialize - init 함수 [Inside Vue] 5. Reactive - Observer, Dep and Watcher [Inside Vue] 6. Reactive - Watcher가 업데이트 하는 3가지 방법(Lazy, Sync, Queu..

Vuex에서 단위 테스트를 하고자 하는 주된 부분은 mutation과 action입니다. 1. Mutation Testing mutation은 전달인자에 완전히 의존하는 함수이기 때문에, mutation을 테스트 하는 것은 매우 간단합니다. const state = { ... } // 변이를 이름을 가지는 내보내기를 이용하여 내보냅니다. export const mutations = { ... } export default new Vuex.Store({ state, mutations }) 위의 코드와 같이 mutation과 store를 모두 ES2015의 export를 사용하여 내보내기 하여 테스트 할 때 사용할 수 있습니다. // store.js export const mutations = { incre..

1. Strict Mode strict 모드를 사용하기 위해서는 strict: true를 Vuex의 store를 만들 때 추가만 하면 됩니다. const store = new Vuex.Store({ // ... strict: true }) strict 모드에서는 state가 mutation 핸들러 외부에서 변경 될 때 마다 오류를 발생 시킵니다. 배포시 strict 모드를 꺼야 합니다. strict 모드는 부적절한 state의 변경을 감지하기 위해 state 트리를 관찰하기 때문에, 성능 저하가 발생합니다. 성능 이슈를 해결하기 위해서는 배포 버전에서는 strict 모드를 꺼야 합니다. const store = new Vuex.Store({ // ... strict: process.env.NODE_ENV..

Vuex store는 변이에 대한 훅을 노출하는 plugins 옵션을 제공합니다. 플러그인은 store를 유일한 전달인자로 받는 함수입니다. const myPlugin = store => { // 저장소가 초기화 될 때 불립니다. store.subscribe((mutation, state) => { // 매 변이시마다 불립니다. // 변이는 { type, payload } 포맷으로 제공됩니다. }) } const store = new Vuex.Store({ // ... plugins: [myPlugin] }) 1. 플러그인 내부에서 변이 커밋하기 변이를 커밋한다는 말은 commit 메소드를 사용하여 mutations의 핸들러를 호출한다는 말로 사용할 것입니다. 플러그인은 state를 직접 변경 할 수 없..

하나의 state 트리를 사용하기 때문에 어플리케이션의 모든 state는 하나의 큰 객체 안에 포함됩니다. 프로젝트의 규모가 커질 수록 store의 크기도 커지게 됩니다. Vuex는 이 문제를 해결하기 위해 store를 모듈로 나눌 수 있는 기능을 제공합니다. 각 모듈은 state, mutation, action, getter, 중첩된 모듈을 포함 할 수 있습니다. const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store..

Action은 Mutation과 비슷하지만, 몇가지 차이점이 있습니다. state를 변경하지 않고 Mutation의 핸들러 함수를 호출합니다. 비동기 작업을 수행할 수 있습니다. const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) 위의 코드와 같이 action을 등록 할 수 있습니다. action의 핸들러는 context 객체를 전달인자로 받습니다. context 객체는 store의 메소드와 속성들을 가지고 있는 객체입니다. 그래서 context.com..

Vuex의 store에서 실제로 state를 변경할 수 있는 유일한 방법은 변이(Mutation) 하는 것입니다. Vuex의 Mutation은 이벤트와 유사합니다. 각 Mutation에서는 문자열 타입과 핸들러가 있습니다. 핸들러 함수는 실제 state를 수정하는 곳이고, 첫번째 전달인자로 state를 받습니다. const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 상태 변이 state.count++ } } }) Mutation의 핸들러를 직접 호출 할 수는 없습니다. mutation 옵션은 이벤트 등록과 비슷합니다. 타입이 increment인 Mutation가 발생하면 핸들러를 호출합니다. store..

state를 계산한 값을 사용해야 할 때가 있습니다. computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } todos라는 state에서 done 상태인 리스트를 가져오고 싶을 때 위의 코드와 같이 작성할 수 있습니다. 하지만 여러 컴포넌트에서 이 코드를 사용해야 한다면, 위의 코드를 복사해야 한다는 단점이 있습니다. 동일한 코드를 복사하여 사용하게 된다면 당연히 유지보수는 힘들어지겠죠. 이 단점을 해결하기 하기 위해서 Vuex는 Getter 기능을 제공합니다. store에서 사용하는 컴포넌트의 computed 속성과 비슷하다고 생각하면 이해하기 쉽습니다. computed 속성 처럼..