업데이트 예정 !

웹팩이란 (Webpack) 웹팩(webpack)은 자바스크립트 모듈 번들러 (Module Bundler)로 최근 사용하는 React, Vue와 같은 프론트엔드 프로젝트 빌딩에서 절대 빠질 수 없는 녀석입니다. 웹팩은 다양한 로더를 사용해 자바스크립트외에 웹어플리케이션을 구성하는 자원 (CSS, HTML, 이미지, 폰트) 들을 조합해서 빌드 결과물을 ...

어플리케이션의 규모가 커질수록 저장소에 넣고 관리해야 할 상태가 많아지고 그 구조 또한 복잡해집니다. 쇼핑몰을 만든다고 가정 했을 때 product 이라는 이름의 상태는 중복된 의미를 가질 수 있습니다. 메인 리스트의 product 장바구니 리스트의 product 관심상품의 product 이 경우 저장소 내 트리형태 또는 네이밍으...

Vuex 에서 Actions 는 상태 커밋을 지시하는 역할을 합니다. 속성 설명 사용 Getters Vuex 상태의 계산된 속성 조회 store.state Mutations Vuex 상태 변이 ...

Vuex 의 헬퍼 Mutation 에 대해 알아보겠습니다 ☺️ mutation 을 직역하면 변화 이라는 의미인데요, 이 의미처럼 Vuex 에서 mutations 은 상태를 변이시키는 역할을 합니다. getters 와 마찬가지로 Vuex 스토어 생성시에 정의할 수 있습니다 mutation 핸들러 함수는 첫번째 인자로 state 를 받아오고, 다음...

Vuex 는 상태를 저장하는 중앙 저장소 입니다. 우리는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props 를 사용 합니다. 하위 컴포넌트에서 상위 컴포넌트로 전달 할 때는 이벤트 버스, $emit을 사용 하여 전달 합니다. 단순한 어플리케이션의 구조에서 props, $emit 을 사용하는데 문제가 없지만 어플리케이션의 규모가 커질 ...

SPA (Single Page Application) 의 큰 특징은 페이지 진입 시 리소스를 한번에 다운 받아 자연스러운 페이지 전환을 시켜 준다는 것 입니다. 하지만 프로젝트의 규모가 커질수록 리소스 다운로드에 많은 시간이 소요되어 이는 SPA 의 장점 이자 단점 으로 작용 합니다. SPA의 대표적인 프레임워크로 꼽히는 Angular, React...

Vue 는 DOM 업데이트를 비동기로 처리합니다. 우리는 Vue 의 반응형 데이터를 변경하여 컴퍼넌트를 재 렌더링 하지만 이것은 즉각 발생 하는 이벤트가 아닙니다. 데이터 변경 발생 시 이를 대기열에 넣고 이벤트 루프 tick 을 통해 큐의 플러쉬가 일어날 때 DOM 업데이트가 일어나는 것 입니다. 자세한 내용은 공식문서 - 비동기 갱신 큐...

이전 포스팅: Vue.js 라우터 기초 (3) ✨ 라우터 컴포넌트에서 props 를 사용하기 위한 방법에 대해 알아보겠습니다 🙂 라우터 컴포넌트에 값을 전달하기 위한 방법으로 path params 을 사용하는 방법이 있습니다. /user/:userId 로 경로를 설정하면 컴포넌트 내에서 $route.params.userId 로 매칭되어 접근이 가...

이전 포스팅: Vue.js 라우터 기초 (2) ✨ 이번 포스팅에서는 Vue 라우터를 이용한 페이지 이동 방법에 대해 알아보도록 하겠습니다 첫번째 포스팅에서 우리는 <router-link>를 통해 a 태그로 페이지 전환을 하였습니다. 이 방법 외에도 우리는 $router 객체를 통해 프로그래밍 방식 페이지 전환 을 할 수 있습니다. ...