코드블럭(codeblock)

마크다운 사용 시 코드를 표현하기 위한 코드블럭을 사용해 봅니다.

사용

``` {언어명(html, css, js 등)}
```

하이라이팅 언어

GitHub에서 사용하는 것과 페이지에서 사용하는건 테마에 따라서 차이가 있을 수 있음. 사용가능 언어는 꾸준히 추가된다.

• actionscript3
• apache
• applescript
• asp
• brainfuck
• c
• cfm
• clojure
• cmake
• coffee-script, coffeescript, coffee
• cpp - C++
• cs
• csharp
• css
• csv
• bash
• diff
• elixir
• erb - HTML + Embedded Ruby
• go
• haml
• http
• java
• javascript
• json
• jsx
• less
• lolcode
• make - Makefile
• markdown
• matlab
• nginx
• objectivec
• pascal
• PHP
• Perl
• python
• profile - python profiler output
• rust
• salt, saltstate - Salt
• shell, sh, zsh, bash - Shell scripting
• sql
• scss
• sql
• svg
• swift
• rb, jruby, ruby - Ruby
• smalltalk
• vim, viml - Vim Script
• volt
• vhdl
• vue
• xml - XML and also used for HTML with inline CSS and Javascript
• yaml

참고 링크

• GitHub - linguist - languages

CSS Preprocessor 중 하나인 Sass(SCSS)를 간단히 살펴보고 컴파일하는 방법을 알아봅니다.

Sass(SCSS)

Sass는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다.

Sass와 SCSS의 차이점

SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.
간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.

• Sass

  1 2 3 4 5 6 7 8

  .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px

• SCSS

  1 2 3 4 5 6 7 8 9 10 11

  .list { width: 100px; float: left; li { color: red; background: url("./image.jpg"); &:last-child { margin-right: -10px } } }

Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분합니다.

또한 Mixins(믹스인, 재사용 가능한 기능을 만드는 방식) 사용에도 차이가 있습니다.
(Sass는 단축 구문으로 사용합니다.)

• Sass

  1 2 3 4 5 6 7 8

  =border-radius($radius) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius .box +border-radius(10px)

• SCSS

  1 2 3 4 5 6 7 8

  @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

Sass는 =와 + 기호로 Mixins 기능을 사용했고, SCSS는 @mixin과 @include로 기능을 사용했습니다.

거의 차이가 없지만 복잡한 문장이 될 경우 장단점이 있을 수 있습니다.
Sass는 좀 더 간결하고 작성하기 편리하며, {}나 ;를 사용하지 않아도 되니 코드가 훨씬 깔끔해집니다.
SCSS는 인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽습니다.

보통의 경우 SCSS를 추천합니다.

컴파일 방법

Sass(SCSS)는 웹에서 직접 동작할 수 없습니다.
어디까지나 최종에는 표준 CSS로 동작해야 하며, 전처리기로 작성 후 CSS로 컴파일해야 합니다.
실무에서 활용하는 컴파일 방법들을 소개합니다.

SassMeister

간단한 Sass 코드는 SassMeister를 사용해서 웹에서 바로 컴파일하여 사용할 수 있습니다.
페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환 됩니다.

VSCode

VSCode에서는 Sass와 같은 Preprocessor 파일을 저장만하면 자동으로 컴파일 시켜주는 확장을 제공한다.

• Easy Compile
  Sass / SCSS / Less / TYPESCRIPT 통합 easy compile
  설치 세팅

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  // VSCode setting.json { ... "easycompile.sass" : { ... "compress": true, "sourceMap": true, "autoprefixer": "> 1%, Last 3 versions, iOS 8", // IE9 이상 }, "easycompile.compile": { "ignore" : [ "**/_*.*" ] }, }

easycompile.compile: 전체 언어에 해당하는 컴파일 옵션을 설정할 수 있다.(ignore옵션은 해당하는 파일은 컴파일하지 않는 파일. 예로 import에만 활용하는 파일)
easycompile.sass: Sass 언어에 해당하는 컴파일 옵션을 설정 할 수 있다.(compress, sourceMap, autoprefixer 등)

• Easy Sass
  위의 Easy Compile과 비슷하나 Sass만 지원하는 도구(Less의 컴파일을 지원하는 Easy Less도 존재)
  설치 세팅

  1 2 3 4 5

  // VSCode setting.json { ... "easysass.excludeRegex": "^(_)[a-z]+.", }

easysass.excludeRegex: 해당 정규식에 해당하는 파일은 컴파일하지 않는다.

node-sass

node-sass는 Node.js 컴파일러인 LibSass에 바인딩한 라이브러리 입니다.
NPM으로 전역 설치하여 사용해봅니다.

1

$ npm install -g node-sass

컴파일하려는 파일의 경로와 컴파일된 파일이 저장될 경로를 설정합니다.

1
2

# $ node-sass [옵션] <입력파일경로> <출력파일경로>
$ node-sass scss/main.scss public/main.css

여러 출력 경로를 설정할 수 있습니다.

1

$ node-sass scss/main.scss public/main.css dist/style.css

옵션을 적용할 수도 있습니다.
옵션으로 --watch혹은 -w를 입력하면, 런타임 중 파일을 감시하여 저장 시 자동으로 변경 사항을 컴파일합니다.

1

$ node-sass --watch scss/main.scss public/main.css

기타 옵션은 node-sass CLI에서 확인할 수 있습니다.

참고 링크

• Sass(SCSS) 완전 정복!

CSS는 매우 뛰어난 표준 스타일 언어 입니다. 하지만 표준화된 기술은 어떤 개인이나 특정 단체가 혼자서 그 기술을 확정하는 것이 아닌 표준화 위원회가 장기간에 걸친 논의를 통해 그 기술의 개선안을 발표하기 때문에 모든 면에서 좋을수는 없습니다.
그래서 어떤 이들은 CSS에 편리한 기능을 더한 새로운 언어를 만들고 이 언어에 따라서 작성한 코드를 어떤 프로그램으로 실행시키면 결과적으로 CSS를 만들어주는 도구들을 개발했는데요, 이런 도구를 전처리기(Preprocessor)라고 합니다. 이런 도구들의 개념을 알아봅니다.

CSS Preprocessor

CSS Preprocessor 비교 사이트 : https://csspre.com/compile/

대표적인 CSS Preprocessor 세가지

• Sass(SCSS)
  Sass는 Sass와 SCSS의 두가지 문법이 있습니다. 가장 오래된 CSS Preprocessor 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 보유하고 있습니다. 태생이 Ruby 기반이기 때문에 사용하는 것에 대해 제약이 있었으나 현재는 C++ 기반의 libsass, Node 기반의 node-sass가 추가되고 계속 업데이트 되면서 rubysass의 대부분의 기능이 그대로 구현되어 문제없이 사용 가능합니다.
• Less
  Node 기반으로 구동되어 자바스크립트 문법을 취하고 있습니다. 브라우저단에서도 동작하며, 비교적 쉽고 간단하게 작성이 가능해 진입장벽이 낮습니다. 다른 언어에 비해 기능적으로 일부 부족한 부분이 존재합니다.
• Stylus
  가장 뒤 늦게 나온 언어이며 그만큼 커뮤니티가 적습니다. Node 기반으로 구동되고 문법이 굉장히 유연하다(세련됐다)는 특징이 있습니다. 하지만 너무 관대한 문법이 독이 될 수 있어 CSS와 stylus 문법의 구분이 모호하기 때문에 초보자가 함부로 쓰기 위험할 수 있다는 단점도 존재합니다. 또한 문법의 성숙도가 가장 낮기때문에 작성하다보면 당황스러운 버그들을 만날 수도 있습니다.

참고 링크

[생활코딩] CSS 뛰어넘기(preprocessor)

댓글 기능 추가하기
친절하게도 다양한 댓글 서비스를 연결할 수 있도록 준비되어 있다. 그 중에서 블로그 댓글로 많이 사용하는 DISQUS를 적용해 보도록 한다.

DISQUS

1. 먼저 DISQUS 홈페이지(https://disqus.com/)에 로그인한다.(가입 절차는 별도로 다루진 않는다)
2. (4번 항목의 페이지가 바로 나올 경우 바로 4번부터 진행하면 된다.) 우측 상단에 톱니바퀴 모양의 설정아이콘을 클릭해 나오는 메뉴에서 Add Disqus To Site를 선택
3. 페이지 가장 하단의 GET STARTED 선택
4. I want to install Disqus on my site 선택
5. 항목을 채우고 Create site 선택
6. 플랜 선택 화면, 무료버전은 Basic버전 선택
7. 플랫폼 선택 화면, I don't see my platform listed, install manually with Universal Code를 선택
8. 하단의 configure 선택
9. 환경을 마무리하고 Complete Setup 선택

10. next/_config.yml 파일의 disqus 환경 세팅

    1 2 3 4 5

    disqus: enable: true shortname: sams-web-story # DISQUS SITE의 URL 상단 주소 이름 참고. 예) https://sams-web-story.disqus.com count: true lazyload: false

11. 정상적으로 포스트 하단에 댓글 영역이 추가되었다.

    

여기서는 Vue.js의 상태관리 라이브러리인 Vuex를 알아봅니다.

상태관리(State Management)의 필요성

Vue와 같은 컴포넌트 기반 프레임워크에서는 화면(page)을 header, button, list등의 많은 컴포넌로 잘게 쪼개서 컴포넌트로 사용하는데, 여기서 각 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생기게됩니다.

이러한 필요성에 의해 생겨난 상태관리 라이브러리는 각 컴포넌트가 저장소(store)라는 곳을 연결해 사용하는 식의 상태관리를 합니다.

Vue는 Vuex, React는 Redux나 Flux와 같은 상태관리 라이브러리를 사용하고 있습니다.

Vuex

• Vue 애플리케이션에 대한 상태 관리 패턴 + 라이브러리입니다.
• 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다.
• 예측 가능한 방식으로 상태를 변경할 수 있습니다.
• Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅샷 내보내기/가져오기와 같은 고급 기능을 제공합니다.
• 다른 상태관리 패턴이나 라이브러리와 비교했을 때 Vue의 반응형(Reactivity) 체계를 효율적으로 활용하여 화면 업데이트가 가능하다는 차이점이 있습니다.

상태관리 패턴

상태관리 구성요소 세가지(상태, 뷰, 액션)

• 상태(state): 앱을 작동하는 원본 소스(data)
• 뷰(view): 상태의 선언적 매핑(template)
• 액션(actions): 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법(methods)

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  new Vue({ // 상태(state) data () { return { count: 0 } }, // 뷰(view) template: ` <div>{{ count }}</div> `, // 액션(actions) methods: { increment () { this.count++ } } })

위의 구성요소는 다음과 같이 동작합니다.

문제 및 해결

위와같은 구조는 앱의 규모가 커질수록(공통의 상태를 공유하는 여러 컴포넌트가 있는 경우) 다음과 같은 문제가 발생합니다.

• Vue의 기본 컴포넌트 통신방식(상위→하위)에서 중간에 거쳐야 할 컴포넌트가 많아지거나
• 이를 피하기 위해 Event Bus를 활용하여 상하위 관계가 아닌 컴포넌트 간 통신 시 관리가 되지 않는 점
  이러한 문제들을 Vuex는 모든 데이터 통신을 한 곳(저장소, store)에서 중앙 집중식으로 관리하여 문제를 해결합니다.

저장소(store) 사용하기

“저장소(store)”는 기본적으로 애플리케이션 상태를 보유하고있는 컨테이너 입니다.

• Vuex store는 반응형(Reactivity) 입니다. Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트 합니다.
• 저장소의 상태를 직접 변경할 수 없습니다. 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋(Commit)을 이용한 변이 입니다. 이렇게하면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있습니다.

Vuex를 설치한 후 저장소를 만들어 봅니다.

1
2
3
4
5
6
7
8
9
10
11
12

// 모듈 시스템을 사용하는 경우 Vue.use(Vuex)를 먼저 호출해야합니다.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

state 객체에 store.state로 접근하여 store.commit 메소드로 상태 변경을 트리거 할 수 있습니다.

1
2
3

store.commit('increment');

console.log(store.state.count) // 1

store.state.count를 직접 변경하는 대신 변이를 수행하는 이유는 명시적으로 추적을 하기 때문입니다. 이 간단한 규칙에 따라 의도를보다 명확하게 표현할 수 있으므로 코드를 읽을 때 상태 변화를 더 잘 지켜볼 수 있습니다. 또한 모든 변이를 기록하고 상태 스냅샷을 저장하거나 시간 흐름에 따라 디버깅을 할 수 있는 도구를 제공합니다.

컴포넌트 안에서 저장소 상태를 사용하는 것은 단순히 계산된 속성 내에서 상태를 반환하는 것입니다. 변경을 트리거하는 것은 컴포넌트 메소드에서 변경을 커밋하는 것을 의미합니다.

참고 링크

• Vuex 공식 페이지
• Captain Pangyo - Vuex 시작하기 1 - Vuex와 State

프로젝트 작업할 때 CSS 선택자 즉, class를 작명하는데 기준이 없어 사람마다 다 다른 중구난방한 이름들을 볼 때마다 매우 답답한 게 있었는데요, 이번 기회에 이를 정리하고자 CSS 방법론을 알아보기로 합니다.

먼저 CSS 방법론을 사용하는 이유로는,

• 쉬운 유지 보수가 가능하다.
• 재사용이 가능하다.
• 쉽게 확장이 가능하다.
  와 같은 게 있다고 합니다.

CSS 방법론에는 SMASS, BEM, OOCSS 등이 있지만 그중에서도 BEM을 적용해 보기로 했습니다. 그 이유는 BEM은 Sass나 Less에서 사용할 때 하위 요소로 내려갈 때마다 중복되는 이름을 &로 생략하여 편하게 작성할 수 있기 때문입니다.

1
2
3
4
5
6
7
8

.block {
  /* CSS declarations for `.block` */
  &__element { /* CSS declarations for `.block__element` */ }
  &--modifier {
    /* CSS declarations for `.block--modifier` */
    &__element { /* CSS declarations for `.block--modifier__element` */ }
  }
}

BEM(Block Element Modifier)

BEM은 “Yandex”라는 회사에서 개발한 방법론으로, BEM 이름 그대로 블록(Block) / 요소(Element) / 수식어(Modifier)로 구분하고 이를 두 개의 언더 스코어(__)나 하이픈(--)으로 연결한 형태로 작명하는(block__element--modifier, block--modifier) 형태를 띱니다.

작명 규칙(Naming Convention)

• 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다.
• 영어 소문자, 숫자만을 이용한다.
• 여러단어의 조합은 하이픈(-)으로 연결한다.

블록(Block)

• 페이지 구성 요소 중 재사용 할 수 있고, 기능적으로 독립적인. 즉, 하나의 컴포넌트 요소이다.
• HTML에서 블록은 class 속성으로 표시한다.
• 형태(red, big)가 아닌 목적(menu, button)에 맞게 결정한다.
• 블록은 환경에 영향을 받지 않아야 한다. 즉, 여백이나 위치를 설정하면 안된다.
• 태그명, id 선택자를 사용하면 안된다.
• 블록은 서로 중첩해서 작성할 수 있다.
  예)

  1 2 3 4 5 6

  <div class="header"> <div class="menu"> <div class="search-form"> </div> </div> </div>

요소(Element)

• 블록이 포함하고 있는 하나의 조각(특정 기능)이다.
• block__element 형태로, 블록 뒤에 두개의 언더 스코어(__)로 연결한다.

• 형태(색상, 크기)가 아닌 목적(item, text, title)에 맞게 결정해야 한다.
  예)

  1 2 3 4

  .header__logo {property: value;} .header__tagline {property: value;} .header__searchbar {property: value;} .header__navigation {property: value;}

• 요소는 중첩해서 작성 할 수 있다.

• 요소는 블록의 부분으로만 사용할 수 있고 다른 요소의 부분으로는 사용할 수 없다.
• 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉, 블록안에 요소가 없을 수도 있다.
  예) menu__item, header__title …

수식어(Modifier)

• 블록이나 요소의 모양(color, size..), 상태(disabled, checked..)를 정의한다.
• block__element--modifier, block--modifier 형태로, 블록이나 요소 뒤에 두개의 하이픈(–)으로 연결한다.
• 수식어는 불리언 타입(boolean)과 키-벨류 타입이 있다.
• 불리언 타입: 수식어가 있으면 값이 true라고 가정한다. (from__button--disabled)
• 키-벨류 타입: 키, 벨류를 하이픈으로 연결하여 표시한다. (color-red, theme-ocean)
• 수식어는 단독으로 사용할 수 없다. 즉, 기본 블록과 요소에 추가하여 사용해야 한다. (class="block__element block__element--modifier")

혼합사용(Mix)

• block1, block2__element 형태로 사용할 수 있다.
• block2__element에 여백이나 위치를 지정하고 block1은 독립적으로 유지할 수 있다.
  예)

  1 2 3

  <div class="header"> <div class="search-form header__search-form"></div> </div>

처음엔 이러한 방법론이 너무 거추장스럽고 거부감이 들어 받아들이지 않았지만, 프로젝트의 규모가 커질수록 그리고 협업에서의 이러한 최소한의 규칙(일관성)은 필요하다고 생각합니다.

하지만, 위의 내용을 모두 그대로 사용하는 것이 아닌. 팀 또는 프로젝트 내에서 정비하여 대부분이 만족할 수 있는 더 나은 규칙을 만들어나가는 것이 중요할 것입니다.

참고 링크

• https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1
• https://webclub.tistory.com/263
• https://a-tothe-z.tistory.com/2

Swiper.js

꽤 괜찮은 javscript Slider(Carousel) 라이브러리인 Swiper.js를 사용해보자.

• DOCS : http://idangero.us/swiper/api/

Vue (vue-awesome-swiper)

Swiper.js의 Vue.js 호환 버전이다. DEMO >

설치하기(Installation)

1
2
3
4

# npm
$ npm install vue-awesome-swiper --save
# yarn
$ yarn add vue-awesome-swiper --save

사용하기(Mount)

글로벌(global)

1
2
3
4
5
6
7

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

Nuxt.js에서 글로벌로 사용할 때, plugins/폴더 내에 다음과 같이 사용한다.

1
2
3
4
5
6
7
8
9

// plugins/swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

nuxt.config.js내의 plugins속성 값 추가

1
2
3
4
5
6
7
8
9
10

module.exports = {
  ...
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/swiper.js', ssr: false },
  ]
  ...
}

컴포넌트(component)

1
2
3
4
5
6
7
8
9
10
11

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

SSR 환경

1
2
3
4
5

// 만약 Nuxt.js(SSR) 환경이라면, 브라우저 환경(process.browser)에서만 사용
if (process.browser) {
  const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
  Vue.use(VueAwesomeSwiper)
}

Swiper 플러그인 옵션 변경

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import Swiper from 'swiper'
Swiper.use({
  name: 'pluginName',
  params: {
    pluginSwitch: false,
  },
  on: {
    init() {
      if (!this.params.pluginSwitch) return
      console.log('init')
    },
    // swiper callback...
  }
})

차이점(Difference)

SSR과 SPA에서 사용할 때 유일한 차이점 :

• SPA는 컴포넌트(component) 형태로 사용하고, ref 속성으로 Swiper인스턴스를 찾으세요.
• SSR은 디렉티브(directive) 형태로 사용하고, directive arg로 Swiper인스턴스를 찾으세요.
• 다른 환경과 이벤트는 동일합니다.

SPA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!-- The ref attr used to find the swiper instance -->
<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // swiper 옵션, 콜백함수 모두 동일하게 사용
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // 현재 swiper 인스턴스를 확인
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

비동기 데이터에서의 사용 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
        swiperSlides: [1, 2, 3, 4, 5]
      }
    },
    mounted() {
      setInterval(() => {
        console.log('simulate async data')
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000)
    }
  }
</script>

SSR

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->
<template>
  <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="callback">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // some swiper options...
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.banners.push('/4.jpg')
        console.log('banners update')
      }, 3000)
      console.log(
        'This is current swiper instance object', this.mySwiper, 
        'It will slideTo banners 3')
      this.mySwiper.slideTo(3, 1000, false)
    }
  }
</script>

Git 명령어들을 다뤄본다.

init

새로운 저장소를 만든다(대상 폴더 내에 .git 저장소 생성)

1
2

$ git init
> Initialized empty Git repository in D:/seop/test-ss/.git/

clone

저장소를 복제한다.

1
2
3
4

# 로컬 저장소 복제
$ git clone /로컬/저장소/경로
# 외부 저장소 복제
$ git clone 사용자명@호스트:/원격/저장소/경로

remote

현재 저장소를 원격 저장소(서버, 예: Github)에 연결한다.

1
2
3
4
5
6
7
8
9
10
11
12
13

# github 저장소에 연결하기
$ git remote add origin <원격 서버 주소>

# 현재 remote 주소 보기
$ git remote -v
> origin  <현재 연결된 원격 서버 주소> (fetch)
> origin  <현재 연결된 원격 서버 주소> (push)

# remote URL 변경하기
$ git remote set-url origin <변경할 원격 서버 주소>
$ git remote -v
> origin  <변경된 원격 서버 주소> (fetch)
> origin  <변경된 원격 서버 주소> (push)

status

현재 저장소의 변경 사항(상태)을 확인한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$ git status
> On branch master
> Your branch is up to date with 'origin/master'.

> Changes not staged for commit:
>   (use "git add <file>..." to update what will be committed)
>   (use "git checkout -- <file>..." to discard changes in working directory)

>        modified:   scaffolds/draft.md
>        modified:   scaffolds/post.md
>        modified:   source/_drafts/hexo-theme-next.md
>        modified:   source/categories/index.md

> Untracked files:
>  (use "git add <file>..." to include in what will be committed)

>        source/_drafts/git.md

> no changes added to commit (use "git add" and/or "git commit -a")

(친절하게도 각각 파일들에 대해 어떻게 처리하면 좋은지 다음 명령어 들을 설명해준다.)

add

변경된(추가/수정/삭제) 내용들을 인덱스(Stage)로 올린다.

1
2
3
4
5
6

# 특정 파일
$ git add <파일 이름>

# 폴더 전체
$ git add *
# 또는 "git add ."

commit

변경된 내용들을 확정(commit)한다.

1
2
3
4
5
6
7
8

# -m, --message / <msg> 즉 "커밋 메세지" 옵션
$ git commit -m "커밋 메세지"
``` 

## push
로컬 저장소에 있는 변경 내용들을 원격 저장소에 발행(push)한다.
``` bash
$ git push origin <가지(branch) 명>

--help

각 명령어들은 --help 옵션을 통해 메뉴얼 페이지로 연결이 가능하다.
예) $ git commit --help를 하면 commit 명령어에 대한 메뉴얼 페이지가 열린다.

참고 링크

• git - 간편 안내서

Vue Snippets

뷰 컴포넌트 추가할때마다 SFC(Single File Components) 스타일(<template>, <script>, <style>)을 일일히 치는게 귀찮다보니 찾아봤다.

검색해보니 대표적으로 세개가 눈에 띄었다.

• Vetur
• Vue 2 Snippets
• Vue VSCode Snippets

전부 다뤄보고 싶지만, 일단 내가 사용하는 것 위주로 차근차근 업데이트 해보도록 한다.

Vetur

아직 쓰는게 없다.

Vue 2 Snippets

아직 쓰는게 없다.

Vue VSCode Snippets

VSCode 확장(Extensions)에서 Vue VSCode Snippets설치.

Usage

Vue Base

• vbase : 뷰(vue) 파일의 기본 형태를 구성해준다. (TypeScript는 vbase-ts를 사용)

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  <template> <div> </div> </template> <script> export default { } </script> <style lang="scss" scoped> </style>

<Template>

• vfor

  1 2 3

  <div v-for="item in items" :key="item.id"> {{ item }} </div>

디렉티브(directive)

디렉티브는 속성명 앞에 v-로 시작하는 프리픽스가 붙는 특수한 속성으로 새로운 기능을 제공한다.
디렉티브의 속성 값은 단일 javscript 표현식이다.

v-text(== ｛{ … }｝) / v-html

HTML 요소 내부에 내용을 렌더링 하기 위한 방식 v-text는 javascript의 innerText와 같고, v-html은 innerHTML와 같이 동작한다.

1
2
3
4

<span v-text="msg"></span>
<-- '<span>{{msg}}</span>'와 같이 동작합니다. -->

<span></span>

v-bind(:)

요소 객체의 속성들을 바인딩하기 위해 사용한다.

1
2

<img v-bind:src="imagePath" /> <-- 안의 imagePath는 변수이다. -->
<img :src="imagePath" /> <-- ':'만 써서 축약해서 사용이 가능하다. -->

v-model

v-bind는 단방향 데이터 바인딩이라면, v-model은 양방향