Tempo Di Valse

먼저 Vue.js 의 동적 컴포넌트란 무엇인가. 해당 내용은 Vue.js 문서에 잘 나와있다. 동적 & 비동기 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 간단하게 실무쪽으로 사용하는 방법에 대해서 예시로 설명하자면, - 여러 컴포넌트가 있다. 이 때 컴포넌트 들은 거의 같은 구조를 가지고 있다. (다른 구조를 가지고 있어도 상관없긴 함) - 컴포넌트는 한 곳에서 번갈하가면서 뿌려줘야 한다. - 컴포넌트는 비슷한 상호작용을 할 수 있어야 한다. 할 때에 코드로 작성하게되면, 일반적으로 기초만 배웠을 때에는 다음처럼 코딩을 작성할 것이다. 그리고 각 콘텐트 태그들은 다음의 내용을 가지고 있다고 한다. Content {{ n }} 겉보기에는 괜찮을 수 ..

Laravel 에는 Vue 를 올려서 사용할 수 있도록 composer 를 통해서 지원해주고 있다. Webpack 은 물론, Vue 환경에서 개발에 필요한 라이브러리들을 import 시켜주고있어 Laravel 환경에서 참 편하게 개발하고 있다. 여기서 소개할 내용은 Laravel 의 가상 로컬 호스트 패키지인 Valet 환경에 BrowserSync 를 적용하여 Vue 작업과 관련된 소스에서 변경이 일어나면 브라우저에 바로 반영을 시키는 그런 방법을 소개 하도록 하겠다. 일단, laravel/ui 를 통해 Vue 가 적용된 Laravel 환경이 프로젝트에 설치가 되어있어야 한다. 가장 먼저 할 일은 webpack.mix.js 파일을 찾아 browserSync 항목을 추가한다. 아무 것도 설정하지 않은 빈 ..

A 와 B 컴포넌트가 있고 B 컴포넌트는 A 컴포넌트에 속해있을 때, A 에서 B 의 기본값을 정의해 줄 때가 있다. 그럴 때에는 보통 다음의 프로세스를 따라 정의를 하게 된다. 1. B 컴포넌트에 props 를 정의한다. 2. A 컴포넌트에서 B 컴포넌트에 정의한 props 의 name 값으로 데이터를 전달한다. 이 프로세스를 소스로 옮기게 된다면, 인 경우에 B 컴포넌트에 // B.vue props 에 value 라는 이름으로 property 를 추가했으며 A 에서는, value 이름을 가지고 데이터를 넣어주게 된다. 만약, 일반 값이 아닌 변수를 넘겨주게 된다면 그냥 value 가 아니라 :value 를 사용하게 될 것이다. 여기까지는 기본적인 Vue 의 props 에 대한 정의 였다. 하지만, 이..

지난 포스팅에서는, [Vue.js] 커스텀 Checkbox 만들어보기 UI 를 만들다 보면, 디자이너가 그려주는 UI 에서는 시스템에서 제공해주는 UI 와는 많이 다른 신기하게 생긴 컴포넌트들이 많이 보이곤 한다. 게다가 기능이 이미 코어에도 존재하는 것들, 계열 tempodivalse.tistory.com 을 해보았다. 이번에는 체크박스와 비슷한 의 radio 타입을 커스터마이즈 하는 작업도 하며, 나아가서는 Android 에서는 RadioGroup 이라고 부르는데 라디오 버튼들의 묶음을 만드는 것을 해보도록 하겠다. 1. Vue 컴포넌트 생성 먼저, RadioGroup 이라고 .vue 파일을 하나 만들었고 기본 프레임도 작성을 했다. // 여긴 텍스트가 들어갈 곳 체크박스 때와 같이 태그를 밖에 둘..

UI 를 만들다 보면, 디자이너가 그려주는 UI 에서는 시스템에서 제공해주는 UI 와는 많이 다른 신기하게 생긴 컴포넌트들이 많이 보이곤 한다. 게다가 기능이 이미 코어에도 존재하는 것들, 계열의 checkbox 나 radio, 의 경우에는 기능은 유지하되, 겉의 모습만 바뀌는 것을 많이 볼 수 있다. 하지만 레이어 같은 아이들이 아니라서 새로 스타일을 정의하기에는 많은 어려움을 가지고 있다. 그래서 이런 것들은 웬만하면 크게 커스터마이즈하여 디자인을 맞추곤 하는데, 이번 포스팅은 그 중에서 커스터마이즈 하기가 쉬운 Checkbox 를 Vue.js 를 통해서 만져보도록 하겠다. 먼저 일반적인 체크박스 의 구조를 보게 되면, HTML 삽입 미리보기할 수 없는 소스 2가지 타입의 체크박스를 볼 수 있다. 해..