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

UserStory 쉽게 모달을 열고 닫을 수 있다. ex) 구글 메인페이지 google apps 목록 펼쳐보기 모달 외부 클릭하여 닫기 위한 필수조건 보여줄 모달에 v-if를 사용해 toggle 가능하도록 변수를 셋팅하여야 한다. 모달의 tabindex 라는 요소를 -1로 설정되어야 한다. focus()를 위한 요소의 ref값이 설정되어야 한다. 실행 순서 모달의 v-if 변수 값을 true로 설정 해 준다. 해당 모달의 ref를 사용하여 focus()를 설정해준다. blur가 될 경우, close()메소드를 실행한다.