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..

요즘은 유투브 영상을 쉽게 다운로드 받을 수 있는 다양한 프로그램, 익스텐션 등이 있어서 쉽게 영상을 다운받을 수 있다.터미널에서도 유투브 영상을 다운받을 수 있는 흥미로운 라이브러리가 있어서 소개해본다.이름은 youtube-dl.설치맥의 경우에는 brew, 리눅스는 pip로 설치할 수 있다. (물론 curl로 직접 다운받아 설치해도 된다.)# mac os의 경우 brew 사용 $brew install youtube-dl # pip로 설치 $ sudo -H pip install --upgrade youtube-dl # 직접 설치 $ sudo curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl $ sudo ch..

vim을 사용하다가 json type의 파일 포매팅하기 (pretty printing JSON in Vim)json 파일 내에서 명령 모드로 다음 명령어 실행:%!python -m json.tool

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탭이 생긴 것을 볼 수 있다.

다른 많은 IDE들이 스펠링 체크를 제공해 주는 것 처럼, vim도 spell check를 기본으로 제공한다.기본 스펠체크 명령어:set spell 이다. set spell 뒤에 spelllang로 해당 언어를 입력해주면 된다.가장 많이 쓰이는 미국식 영어(?)로 스펠 체크를 하고자 한다면:set spell spelllang=en_us 를 실행해주면 된다. 한 번도 스펠 체크를 한 적이 없다면 해당 언어의 파일을 다운로드 할 것이냐고 물어보는데, 확인을 누르면 자동으로 다운 받은 뒤 스펠 체크를 해준다.틀린 스펠을 하이라이팅 처리 해준다. 해당 언어 (여기서는 en_us)가 아닌 언어 (한글 등)도 모두 missspelling으로 감지한다는게 흠이지만, 스펠 검사 자체는 만족스럽다.이를 끄고 싶다면:se..