seulcoding

Ctrlp는 vim 내에서 파일을 쉽게 검색해서 해당 파일을 열게 해주는 플러그인이다.해당 파일명만 입력하면 쉽게 파일로 갈 수 있기 때문에 vim을 사용할 때 자주 사용하는 플러그인 중 하나이다.Ctrlp 공식 깃허브에서 사용법과 설명이 소개 되어 있다.우선 설치 방법이다. Plug를 사용하여 설치하면 된다.call plug#begin('~/.vim/plugged') Plug 'ctrlpvim/ctrlp.vim' "Ctrl + P for search file call plug#end() 이후 source ~/.vim/init.vim (일반 vim의 경우에는 source ~/.vimrc)를 해 주고PlugInstall로 ctrlp를 설치 해준다.자세한 Plug 사용법은 따로 포스팅 할 예정이다.Ctrlp..

install vue-routernpm install --save vue-router set up vue-routermain.js에서 Vue.use를 통해 사용할 수 있다.import Vue from 'vue' import VueRouter from 'vue-router'; import App from './App.vue' Vue.use(VueRouter); new Vue({ el: '#app', render: h => h(App) }) routes.js 만들기src/routes.js에 라우트를 선언해준다.import User from './components/user/User.vue'; import Home from './components/Home.vue'; export const routes = [..

Docker DjangoUsage$ git clone https://github.com/bartkim0426/django-docker-seul.git # when delpoy $ docker-compose up # when development $ docker-compose -f docker-compose-dev.yml up Now you can access the application at https://localhost and the admin site at https://localhost/admin.SettingsHave to change development.env and development_local.envNGINX_SERVER_NAME : add server nameuwsgi settings..

sass를 사용하는데 좋은 가이드라인이 있어서 공유한다. 구문, 설계 등 다양한 sass 사용 방식을 잘 설명해 놓은 글.sass를 사용하는 중이거나 사용 할 예정에 있는 사람이라면 한 번 읽어봄직하다.Sass Guidelines. 한국어 번역판은 여기에서 확인할 수 있다.다음은 저자가 너무 길어서 안 읽는 사람들을 위해 쓴 정리.탭 대신 스페이스 두(2) 칸을 들여쓴다;행의 너비는 80 글자;CSS를 여러 행으로 적절히 작성한다;공백을 의미 있게 사용한다;문자열과 URL에는 인용 부호(작은 따옴표)를 붙인다;뒤따르는 0은 표기하지 않는다. 앞장서는 0은 반드시 표기한다;연산은 괄호로 감싼다;매직 넘버를 피한다;색은 키워드 > HSL > RGB > 16진법 순으로 표기한다;리스트는 쉼표로 구분한다;리스트..

내가 vim을 선호하는 가장 큰 이유 중 하나는 속도이다. (간지라고는 말 못하니깐…)그런데 최근 vim에 무분별하게 설치한 플러그인(…)때문에 속도가 조금 저하되는 문제가 발생하여 이것 저것 플러그인을 지우고 최적화를 진행하다가, neovim이 vim 자체의 가치에서 크게 벗어나지 않고 성능을 크게 향상시켰다는 말을 듣고 neovim을 사용하기 시작했다. macvim 등 프로그램 기반의 다른 vim은 거부감이 많이 들었는데, nvim은 내가 사용하던 vim8과 많이 다르지 않기 때문에 선택했는데 현재까지는 매우 만족하며 사용중이다.처음에는 ~/.vimrc 세팅을 그대로 가져와서 사용하였으나 (귀차니즘) 하루 마음을 먹고 Plug를 사용한 플러그인 설치나, 최적화 등을 목적으로 init.vim을 작성해 ..

VariableSass는 variable을 사용해서 자주 쓰는 것들을 쉽게 사용할 수 있다. $를 사용해서 var를 선언할 수 있다.$color-red: red; div { background-color: $color-red; } p { background-color: $color-red; } NestedSass는 중첩된 엘리멘트들을 다 쓰지 않고, 해당 엘리먼트 내에 작성이 가능하게 하여 훨씬 간편하게 스타일을 적용할 수 있다..post { color: red; .title { color: black; } } Referencing Parent Selectors (부모참조 선택자: &)위의 중첩을 사용할 때, &를 사용하면 css로 컴파일 될 때 복합선택이 된다..post { color: red; .ti..

Vue Resource공식 github pageVue Resource 설치하기npm으로 설치하기npm install --save vue-resource cdn Vue Resource 전역에 불러오기main.jsimport Vue from 'vue' import VueResource from 'vue-resource'; import App from './App.vue' Vue.use(VueResource); new Vue({ render: h => h(App) }) Post server data이번 예시에서는 간단하게 filebase database를 사용해 보겠다. (Firebase 콘솔에서 아주 쉽게 데이터베이스를 만들 수 있다. 간단한 테스트 용도로는 무료로 사용이 가능하다.) Http testing..

tab 캐릭터를 space로 전환하려면 vim 창에서 다음과 같이 해준다.expandtab 옵션: tab 캐릭터를 space로:set expandtab retab: 현재 있는 탭을 space로 전환:retab shiftwidth: >,

Input data bind basicinput tag에 데이터를 바인딩 하기 위해서는 v-model이 필요하다. v-model을 사용하면 아주 쉽게 데이터를 바인딩 시킬 수 있다.App.vueApp.vue에 email input 필드를 추가한 후, email 데이터를 만들고 v-model="email"로 해당 인풋 필드와 연결시켜준다. Email Mail: export default { data() { return { email: "" } } } 이제 input 필드에 값을 입력하면 아래 `` 데이터에 바인딩 되는 것을 볼 수 있다.v-model.lazyv-model은 기본적으로 모든 key stroke가 발생할 때마다 값을 업데이트 시킨다. 이를 방지하고 싶다면 v-model.lazy를 사용하면 된다..

Filtersvue.js는 default filter가 없기 때문에 사용하기 위해서는 직접 만들어야 한다.Local filter 만들기methods를 만드는 것처럼 아주 간단하게 만들 수 있다.lower case를 모두 upper case로 만들어 주는 필터를 만들어보겠다. export default { data() { return { text: 'Hello There!' } }, filters: { toUppercase(value) { return value.toUpperCase(); } } } 이제 HELLO THERE라고 출력되는 것을 볼 수 있다.Global filter 만들기, Filter chainglobal filter도 비슷하게 만들 수 있다. main.js에 Vue.filter()로 등록..