mobX는 상태관리 라이브러리 이다. redux보다 깔끔하여 러닝커브가 낮다. 컴포넌트를 필요시에만 실행해 렌더링 최적화에 용이하다. 작동원리 event가 발생하면 Actions를 일으킨다. Actions는 Observable state에 저장되어 있는 데이터들을 변화시키는 action함수이다. Observable State는 상태들의 집합이다. Observable State가 변화되면 Compute Values에서 감지하여 Side Effects를 전달하여 렌더링을 한다. 실행된 side Effects는 다시 액션함수에 이벤트를 전달한다. 사용법 import 해 준다. action함수들을 만들어준다. 관리를 위해 만들어진 observable파일들을 묶어 export시켜준다. 적용하고자 하는 컴포넌트에서 사용한다.

ES6 문법 중 map(), filter(), reduce() 의 특징을 알아보자 const lists = [one, two, three, four] (1) Array.prototype.map() Array 에 있는 요소들을 모두 조건에 맞게 변경하여 배열을 만들어준다. (2) Array.prototype.filter() Array 에 있는 요소들을 모두 조건과 비교 후 true인 요소들만 배열로 만들어준다. (3) Array.prototype.reduce() Array 에 있는 요소들을 모두 조건에 맞게 계산 한 뒤, 하나의 값으로 내보낸다.

Styled-component 의 장점 Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다. 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다. 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다. Styled-component는 CSS-in-JS는 스타일 기법 중의 하나로 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존에는 html에서 class 를 지정해 준 뒤, 그에 따라 변화되는 Action들에 의해 class를 바인딩해주는 구조로 되어있다. 그렇기 때문에, 동일한 디자인을 사용하는 여러개에서 액션을 줄 때는, 각각의 컴포넌트 별로 스타일을 지정해주어야 한다.(특히 position) 그러나, Styled-component를 사용하게되면, 이러한 번거로움이 줄어들게 되는 장점이 있다. css컴포넌트에서 변수까지 지정해 주어 해결

tab 구현하기 첫번째. class binding하여 현재 있는 탭 위치를 보여주기. ex) 각종 tab을 통해 분류하여 보여주기 tab 구현하기 과정 tab 의 네비게이션 부분에 클래스 바인딩 해준다. 탭을 클릭할때, 해당 tab이름을 불러온다. 해당 tab이름으로 선택된 tab에 'active' 클래스를 넣어준다.

UserStory. 서비스 어디에서나 열고 닫을 수 있는 모달 ex) 어느 메뉴 어느 게시판에서나 열 수 있는 내용 상세보기 modal화면 vuex사용하기 state에 전역 변수 지정한다. state값을 변경하기 위한 mutations에 method를 정의한다. state에 저장된 변수를 해당 modal에 적용한다. ... /vuex/index.vue .../index.vue ... /compoenet/modal.vue