seulcoding

Sass에서는 다음의 우선순위를 따라서 색을 입력하라고 얘기한다. 인간의 두뇌로 이해하기 쉽고 작성자가 색을 변경하기 쉬운 순서대로 사용하라고 하는 것 같다.CSS 색키워드: 여기서 모든 목록을 확인 가능하다. (ex black, red …)HSL 표기법 : hue, saturation, lightness를 사용. ({backgrount-color: hsl(120, 100%, 50%)})RGB 표기법: 우리가 알고있는 그 RGB. (ex. rgb(255, 0, 0))RGB 표기는 0~255 숫자 혹은 0%~100%의 백분율을 사용한다. rgb(100%, 0%, 0%)는 rgb(255, 0, 0)과동일16진법 표기법: #000추가적으로 Alaph(투명도)가 추가된 RGBA, HSLA가 있다.HSLA: hu..

vue는 v-for, v-text 등 13가지 vue Directive들 이외에도, 커스텀 directive를 만들 수 있다는 큰 장점이 있다. 이는 여러 방면에서 유용하게 사용이 가능하다.vue의 기본 directive들은 이 글에서 다루었다.vue directive 만들기vue directive는 main.js에서 전역으로 만든다.Vue.directive();로 등록이 가능하다.main.js에서import Vue from 'vue' import App from './App.vue' Vue.directive('highlight', {}); new Vue({ el: '#app', render: h => h(App) } hooks위의 directive 정의 객체는 5가지 훅 함수를 제공한다. 어떤 상황에서..

를 사용해서 컴포넌트 파트를 동적으로 변화시킬 수 있다.컴포넌트를 변경하면 매번 컴포넌트가 Destory되고 새로 생성된다.App.jsApp.js에서 selectedComponent라는 데이터를 생성하고, 3개의 컴포넌트를 해당 데이터에 바인딩해주는 버튼을 생성.를 이용해서 동적으로 템플릿에 뿌려주는 component를 변화시킬 수 있다. Quote Author New Default content dynamic component 동작원리위에서 언급했듯이, dynamic component를 사용하여 다른 컴포넌트로 전환하면 항상 해당 컴포넌트는 destory되고, 새 컴포넌트가 create 된다. destroyed lifecycle로 이를 확인해 볼 수 있다.couter 데이터를 증가시키는 간단한 방법으로..

Direcitve: “지시문”이라는 뜻으로 vue 엘리멘트에 사용되는 특별한 속성이다. 지금까지 다뤄온 v-model, v-for 등이 모두 지시문.디렉티브는 총 13가지가 있다. vue 2.0의 모든 디렉티브 리스트는 vue.js 공식 문서의 directives에서 자세한 확인이 가능하다.v-text내부의 값이 Vue 엘리멘트의 변수로 지정된다. ``와 v-text="text"는 동일하다고 볼 수 있다.v-htmlvue의 테이터는 태그 자체가 html에 표시된다. vue 엘리먼트의 데이터에 Hello를 넣고 html에 뿌려보면 그대로 출력되는 것을 볼 수 있다.이를 렌더링해서 Hello로 출력하고 싶을 때 v-html 디렉티브를 사용하면 된다.v-show해당 엘리멘트의 display: none을 활성화..

Vue Components 사용법기초 세팅 (main.js, App.vue)이번 component 예제에는 webpack을 사용하였다. 자세한 내용은 vue webpack에서 다룰 예정.src 디렉토리에 main.js와 App.vue를 만들고, main.js에 App.vue를 등록해 주어야 한다.index.html main.jsimport Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }) Vue components 만들기vue component는 template, script, style 크게 세가지로 구성된다.다음은 vue component의 예시. App.vue에 다음과 같이 입력한다.App.v..

vue.js에서 부모 컴포넌트에서 자식 컴포넌트 내부의 데이터를 추가하고 싶은 경우, 을 사용하면 된다.App.vueApp.vue에서 아래 있는 Quote 컴포넌트를 호출하여 해당 컴포넌트에 태그를 넣어보자. Quote Test import Quote from './components/Quote.vue'; export default { components: { appQuote: Quote } } Quote.vuetemlpate 안에 을 추가 해 주면 자동으로 데이터가 들어온다. export default { } Scope 특징1. Style은 자식 컴포넌트에서만 적용된다.위의 Quote에 스타일을 적용시키고 싶다면 자식 컴포넌트인 Quote.vue에서 style을 적용시켜야만 적용된다. export de..

vue에서 디버깅하는 두 가지 방법chrome의 개발자 도구 사용 vue-cli(webpack)을 사용하는 경우 크롬의 개발자 도구를 활용하여 쉽게 디버깅 가능.vue dev tools (https://github.com/vuejs/vue-devtools) vue dev tools을 설치하면 크롬 개발자 도구에서 뷰 컴포넌트, 이벤트 등을 쉽게 확인이 가능하다.설치도 extension 형태로 아주 쉽게 설치할 수 있다. (현재 Chrome, Safari, Firefox를 지원)크롬 extension 설치파이어폭스 애드온 설치사파리 workaround 설치: npm install이 필요하다.이후 개발자 모드로 들어가 보면 Vue탭이 생긴 것을 볼 수 있다.

WebRTC란??WebRTC 관련 자료들1. WebRTC codelab 데모codelab webrtc를 따라하면 webrtc를 간략하게 맛보기 할 수 있다.자세한 설명은 이 글에..2. Getting Started with WebRTChtml5에서 제공하는 webrtc 튜토리얼. WebRTC에 대한 대략적인 설명과 기초적인 개념, 관련 설명등이 나와있다.3. Capturing Audio & video in HTML5기존 flash, sliverlight같은 브라우저 플러그인이 해왔던 audio, video capturing을 html 5에서 지원한다. 이를 설명해 놓은 사이트.getUserMedia()의 소개와 사용법, 보안 등이 간단한 예시와 함께 나와있다. 4. WebRTC Google I/Ogoog..

Codelab의 WebRTC tutorial을 통한 WebRTC 정리1. IntroductionWebRTC는 audio, video, data를 웹과 native 앱 등에서 realtime으로 커뮤니케이션 할 수 있게 해주는 오픈 소스 프로젝트WebRTC는 몇몇 javascript API를 가진다getUserMedia(): capture audio, videoMediaRecorder: record audio, videoRTCPeerConnection: user들 간에 audio, video 스트리밍RTCDataCh: user들 간에 data 스트리밍어디서 WebRTC를 쓸 수 있는지?Firefox, opera, chrome (desktop, android)와 IOS, Android에서 사용 가능Signa..

2강Directives 이해, v-oncenew Vue ({ el: "#app", data: { title: "Hello world", link: "https://seulcode.tistory.com", }, methods: { sayHello: function() { this.title = "Hello"; return this.title; }, }, }) 다음 코드에서 sayHello()를 호출하면 기존의 Hello world가 hello로 대체된다. 이를 막기 위해서는 v-once를 통해 re-rendering을 방지 가능하다.Raw html 표시하기: v-htmlvue에서 다음과 같이 finishedLink에 html을 넣고 html에서 double curly로 불러오면 string으로 불러진다. ..