diff --git "a/2019/06/01/\353\202\230\353\205\270\355\217\254\354\226\264-\354\213\234\355\200\200\354\213\261\354\235\264\353\236\200/index.html" "b/2019/06/01/\353\202\230\353\205\270\355\217\254\354\226\264-\354\213\234\355\200\200\354\213\261\354\235\264\353\236\200/index.html" new file mode 100644 index 0000000..b2e49c2 --- /dev/null +++ "b/2019/06/01/\353\202\230\353\205\270\355\217\254\354\226\264-\354\213\234\355\200\200\354\213\261\354\235\264\353\236\200/index.html" @@ -0,0 +1,290 @@ +
thumbnail
나노포어 시퀀싱이란?
Oxford Nanopore
2019.06.01.
+

Nanopore의 가장 최신 버전인 R9을 기준으로 작성되었습니다.

+
+

인간 게놈 프로젝트의 종료 후, 10년동안 차세대 염기서열 해독법 (Next Generation Sequencing, 이하 NGS) 기술의 비약적인 발전이 있었다. +Illumina 혹은 IonTorrent와 같은 2세대 NGS 기술은 매우 강력하지만, 100-500bp 길이의 short read만 시퀀싱이 가능하다. +따라서 2세대 기술은 반복서열, 복제수변이 (CNV)와 같이 유전체의 복잡한 구조를 이해하는데에는 한계가 존재한다.

+

이러한 문제들을 해결하기 위해서 많은 연구들이 지속적으로 진행되었고, 그 결과 3세대 기술들이 등장하게 되었다. +3세대 기술의 대표적인 예로는 Pacific Bioscience사의 SMRT 시퀀싱 기술과 Oxford Nanopore Technologies사의 Nanopore 시퀀싱 기술이 있다.

+

SMRT 시퀀싱은 형광을 사용하여 측정한다는 점에서 기존의 2세대 NGS와 유사하다. 하지만, short read가 아니라 long read까지도 시퀀싱이 가능하다는 점이 다르다. +우수한 기술력을 가진 PacBio사는 2018년에 Illumina사가 long read 시퀀싱 기술력 확보를 위해 인수 되었다.

+

+ + + + + + ont_logo + + +

+

PacBio사와는 반대로 독자적인 행보를 걷고 있는 Oxford Nanopore Technologies (이하 ONT)는 나노포어를 사용하여 기존과는 색다른 방식으로 시퀀싱을 한다. +2012년에 첫 상품인 MinION을 발표하였다. MinION은 long read 시퀀싱이 가능한 포터블 나노포어 기기이며, 이는 많은 사람들의 관심을 한 몸에 받았다.

+

하지만 나노포어 기술에도 몇가지 문제점들이 존재했고, 이를 ONT에서 지속적인 업데이트를 통해 보완하는 작업을 진행중에 있다. +현재는 R9.4 버전의 나노포어 기술이 발표된 상태이다.

+

그렇다면 도대체 이 나노포어는 무엇이고, 어떻게 나노포어를 가지고 시퀀싱을 하는 것일까? +본 글에서는 나노포어와 나노포어 시퀀싱 기술에 대해 간략하게 소개를 하고자 한다.

+
+

나노포어란?

+

Nanopore(이하 나노포어)는 문자 그대로 nano-meter 크기의 매우 작은 초소형 구멍을 뜻한다. +생물세포내에 존재하는 나노포어는 주로 외부의 물질들을 내부로 보내는 역할을 한다. +이러한 특징을 응용하여 많은 연구원들은 나노포어를 가지고 특정 물질을 전달하는 시스템이나 유전자 시퀀싱에 이용하기 시작하였다.

+

나노포어는 크게 두가지 종류로 나뉘어진다.

+

1. Solid-state 나노포어

+

+ + + + + + silicon_nanopore + + +

+
    +
  • 생물학적 나노포어를 본따, 전도체를 사용하여 nano-meter 사이즈로 만든 나노포어
    • +
  • 주로 실리콘, 알루미늄, 그래핀 등의 전도체로 나노포어를 만든다.
    • +
  • 생물학적 나노포어의 성능은 완벽하게 균일하지 않지만, solid-state 나노포어는 획일화된 제조 공정을 통해 성능을 어느정도 균일하게 만들수 있다는 장점이 있다.
    • +
+

2. Biological 나노포어

+

+ + + + + + nanopore_class + + +

+
    +
  • 박테리아 혹은 다른 생물세포내에 존재하는 단백질형태의 나노포어
    • +
  • DNA 시퀀싱에 가장 많이 이용되는 4가지 종류 +
      +
    • alpha-hemolysin
      • +
    • MspA
      • +
    • CsgG
      • +
    • bacteriophage phi 29
      • +
    +
    • +
+
+

나노포어 시퀀싱 방법

+

+ + + + + + sequencing + + +

+
    +
  1. 나노포어를 전기 저항을 띄고 있는 멤브레인 표면에 설치함.
    2. +
  2. Leader motor가 시퀀싱하고자 하는 dsDNA에 부착됨.
    3. +
  3. 나노포어의 구멍속으로 dsDNA가 차례차례 통과함. 이때, 통과되는 속도는 leader motor가 dsDNA를 single strand로 풀어지는 속도에 의해 조절됨.
    4. +
  4. 일정한 크기의 전압을 나노포어에 지속적으로 걸어줌.
    5. +
  5. 나노포어의 구멍 내부에 DNA가 지나가게되면, 나노포어의 저항 값이 증가함.
    6. +
  6. ‘옴의 법칙’에 따라 저항값이 증가하게 되면, 균일한 전압을 맞추기 위해 전류의 값이 감소함.
    7. +
  7. 감소하는 전류 값을 통해 ACTG 핵산 및 methylation을 구분할 수 있음.
    8. +
  8. 실시간으로 기록된 전류값의 변화를 통해 시퀀싱 정보를 얻음.
    9. +
+
+

나노포어 시퀀싱의 장단점

+

장점

+
    +
  1. Read length를 길게 시퀀싱 가능 (kilo-base)
    2. +
  2. 빠른 시퀀싱 속도
    3. +
  3. 실시간 분석 가능
    4. +
  4. 증폭 필요 없음 => base modification 혹은 methylation 정보를 잃지 않음
    5. +
+

단점

+
    +
  1. 나노포어안에 하나의 nucleotide가 들어가 있는게 아니라, 한번에 4-5개의 nucleotide가 들어감. +따라서, 반복되는 시퀀스를 구분하는데에 약간의 어려움이 존재. (= 호모폴리머 이슈)
    2. +
+
+

R9 나노포어 시퀀싱 개선점

+

2016년 5월에 ONT사에서 R9 버전으로의 업데이트를 발표하였다. +R9 버전에서는 나노포어 종류와 분석 알고리즘 두가지가 개선되었다.

+
    +
  1. 나노포어 변경; CsgG 사용 (기존 alpha-hemolysin 포어)
    2. +
  2. 속도 빨라짐; 250bp/s
    3. +
  3. Hairpin ligation 없이 사용 가능 +
      +
    • 기존에는 leader motor가 dsDNA를 반으로 나누어주면서 나노포어로 들어가게 되고, 말단에서는 hairpin motor가 dsDNA를 묶어줌으로써 나노포어로 들어가는 속도를 조절해줌
      • +
    • 기존 2D read => 1D^2 read
      • +
    +
    4. +
  4. 분석 알고리즘 RNN으로 변경 (기존의 HNN 알고리즘 보다 더 빠르고 정확한 분석)
    5. +
+
    +
  • ONT CsgG 포어 관련 +
      +
    • E.coli가 가지고 있는 CsgG 포어 단백질의 변이체
      • +
    • polypeptide를 translocate시키는 역할 +
        +
      • Engineering을 통해 펩타이드 대신, DNA가 잘리도록 바꿈 (냠냠 먹어버리는것과 같은 효과!)
        • +
      • recombinant DNA 기술로 나노포어 생산함
        • +
      +
      • +
    • 36개의 베타-배럴 모양이 9개의 서브유닛을 이루어 pore 형성
      • +
    +
    • +
+

자료 출처:

+

[1] A.Magi et al. Briefings in Bioinformatics, 2017, 1-17

+

[2] N.Kono et al. Develop Growth Differ. 2019; 1-11

+

[3] ONT website

+
+

이상으로 나노포어 시퀀싱 기술에 대해 간략하게 알아보았습니다.

+

다음 글에서는 나노포어 시퀀싱으로 얻어진 전류 데이터가 어떻게 유전체 정보로 바뀌는지 ONT사의 분석 프로세스에 대해 +간단하게 소개하고자 합니다.

Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby
+ + \ No newline at end of file diff --git a/2019/06/10/tutorial10-transition/index.html b/2019/06/10/tutorial10-transition/index.html new file mode 100644 index 0000000..f2f068a --- /dev/null +++ b/2019/06/10/tutorial10-transition/index.html @@ -0,0 +1,395 @@ +
thumbnail
Vue.js 뽀개기 (10) 트랜지션과 애니메이션 적용하기
vue
2019.06.10.
+

본 글은 Udemy에서 제공하는 유료 강좌인 Vue.js Complete Guide를 수강하면서 정리한 내용입니다. 저작권 문제시 바로 글을 내리도록 하겠습니다.

+
+
+

웹 어플리케이션을 제작 할 때, 트랜지션과 애니메이션 효과를 넣어 동적인 연출을 만듭니다. +Vue에서도 CSS 트랜지션 및 애니메이션을 구현할 수 있습니다.

+

트랜지션이란 HTML 엘리먼트에 변화를 적용하여 일정시간 동안 발생을 시키는 역할을 한다고 이해하면 되겠습니다.

+

트랜지션 사용하기

+
    +
  • +

    <transition> 태그 안에 넣어 사용

    +
    • +
  • +

    하나의 태그에는 하나의 엘리먼트만 트랜지션 적용 가능 = 단일 트랜지션

    +
      +
    • 조건부 렌더링/출력 (v-if 혹은 v-show)를 사용하여, 1개를 트랜지션으로 보여주면 다른 하나는 숨겨야함
      • +
    • 여러 엘리먼트를 트랜지션 하려면 <transition-group> 태그를 사용 +
        +
      • <span>을 렌더링
        • +
      • <tag> 속성으로 렌더링된 요소를 변경
        • +
      +
      • +
    +
    • +
  • +

    최초 렌더링시 트랜지션을 사용하려면 appear를 태그안에 명시

    +
      +
    • <transition appear>
      • +
    +
    • +
  • +

    CSS 혹은 JavaScript 훅을 사용해서 트랜지션/애니메이션 적용 가능

    +
      +
    • Vue가 자동으로 CSS 트랜지션 적용을 감지하고, 적절한 타이밍에 트랜지션 클래스 추가/제거
      • +
    • JS 훅이 제공되면, Vue가 적절한 타이밍에 훅을 호출
      • +
    • 한마디로, 일반적인 상황에서는 Vue가 알아서 잘 적용해준다는 소리
      • +
    +
    • +
  • +

    Duration을 명시 안하면, 즉시 attach 하고 detach함

    +
    • +
  • +

    Transition property 혹은 animation property를 사용

    +
    • +
+
+

Vue 트랜지션의 6가지 클래스

+
    +
  • 진입 및 진출 트랜지션에는 총 6가지 클래스가 존재
    • +
+

+ + + + + + transition_class + + +

+
    +
  1. v-enter
    2. +
  2. v-enter-active
    3. +
  3. v-enter-to (2.1.8 버전 이상) +
      +
    • 진입 상태의 마지막에 실행
      • +
    +
    4. +
  4. v-leave
    5. +
  5. v-leave-active
    6. +
  6. v-leave-to (2.1.8 버전 이상) +
      +
    • 진입 상태의 마지막에 실행
      • +
    +
    7. +
+
    +
  • v-를 없애고 name을 지정하면, name-enter 이렇게 바뀜
    • +
  • transition 혹은 animation은 enter 단계가 아닌, enter-active에서 정의
    • +
+
<style>
+    /* Enter 단계에서는 transition을 추가하지 않음 */
+    .fade-enter {
+        opacity: 0;
+    }
+
+    .fade-enter-active {
+        transition: opacity 1s; # 시간을 명시해줌
+        opacity: 1;     /* 1초 뒤에 opacity 0을 opacity 1로 바꿔줌 */
+    }
+
+    .fade-leave {
+
+    }
+
+    .fade-leave-active {
+        transition: opacity 1s;
+        opacity: 0;
+    }
+</style>
+

트랜지션과 애니메이션 함께 사용

+
    +
  • 그냥 style에 animation이랑 transition 같이 정의하면 됨
    • +
  • type property를 정의해서 animation 이랑 transition 시간중 어떤거 사용할지 정할수 있음
    • +
+
<style>
+    /* Slide transition using Animation property of CSS */
+    .slide-enter{
+        /* keyframe에 이미 초기 상태를 정의해놔서 여기에 정의 안해도 됨 */
+    }
+
+    .slide-enter-active{
+        animation: slide-in 1s ease-out forwards;
+        /* forwards = element가 finishing position에 붙어놓음  */
+        transition: opacity .5s;
+    }
+
+    .slide-leave {
+
+    }
+
+    .slide-leave-active {
+        animation: slide-out 1s ease-out forwards;
+        transition: opacity .5s;
+        opacity: 0;
+    }
+
+    @keyframe slide-in {
+        from {
+            transform: translateY(20px);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframe slide-out {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(20px);
+        }
+    }
+
+</style>
+

CSS 스타일 무시

+
    +
  • transition 태그에 :css="false"로 정의하기
    • +
+

라이브러리 CSS 사용하기

+
    +
  • name attribute를 없애고 specific class를 적기
    • +
  • 라이브러리 사용하게되면 appear는 작동 안함
    • +
+

동적 바인딩

+
    +
  • v-model을 사용하고, value를 적어놔야함
    • +
  • transition 태그에 :name 으로 지정해주기
    • +
+
<transition
+  enter-active-class="animated bounce"
+  leave-active-class="animated shake"
+>
+</transition>
+
+<select v-model="alertAnimation">
+  <option value="fade"> Fade </option>
+  <option value="slide"> Slide </option>
+</select>
+
+<transition :name="alertAnimation"> ... </transition>
+
+<script>
+  export default {
+    data() {
+      return {
+        show: true,
+        alertAnimation: 'fade',
+      }
+    },
+  }
+</script>
+

트랜지션 모드

+
    +
  • 트랜지션의 기본 동작은 다른 트랜지션이 진행되는 동안 하나의 트랜지션이 나타남 (동시 발생)
    • +
  • mode를 선언하여, 트랜지션 동시 발생으로 이상하게 보이는 것을 방지 +
      +
    1. out-in: 현 엘리먼트 트랜지션 후, 새로운 요소 생성 (더 자주 사용)
      2. +
    2. in-out: 새로운 요소 생성 후, 현 엘리먼트 트랜지션
      3. +
    +
    • +
+

여러개 트랜지션하기

+
    +
  • v-if와 v-else를 이용해서 구현
    • +
  • key 속성을 추가해서 각각의 트랜지션 엘리먼트들을 구분하기
    • +
+

그룹 트랜지션

+
    +
  • <transition-group> 태그를 사용 +
      +
    • transition 은 DOM에 새로 render되지 않음
      • +
    • <span>을 새로운 태그로 생성 +
        +
      • transition-group tag=“TAG”로 어떤 태그를 생성할지 변경 가능
        • +
      +
      • +
    +
    • +
  • key를 넣어서 vue가 어떤 element를 animate 시킬지 알려줘야함
    • +
  • transition-group에만 적용되는 style 존재 +
      +
    • slide-move
      • +
    +
    • +
+
<button @click="addItem">Add</button>
+<transition-group name="slide">
+  <ul class="list-group">
+    <li
+      class="list-group-item"
+      v-for="(number,index) in number"
+      @click="removeItem(index)"
+      style="cursor: pointer"
+      key="number"
+    >
+      {{ number }}
+    </li>
+  </ul>
+</transition-group>
+
+<script>
+  export default {
+      methods: {
+          addItem: {
+              const pos = Math.floor(Math.random() * this.numbers.length);
+              this.numbers.splice(pos, 0, this.numbers.length +1);
+          },
+          removeItem: {
+              this.numbers.splice(index,1);
+          }
+      }
+  }
+</script>
+
+<style>
+  .slide-leave-active {
+    position: absolute;
+    /* absolute를 정의해서 애니메이션되는 동안 
+        다른 element가 그 자리를 채워 넣을 수 있게 만들어줌 */
+  }
+  .slide-move {
+    transition: transform 1s;
+  }
+</style>
+
+

자바스크립트 훅

+
    +
  • CSS 클래스처럼, 자바스크립트 훅이 존재
    • +
  • 이를 Vue 컴포넌트의 method 객체에 정의하여 사용 +
      +
    • before-enter
      • +
    • enter
      • +
    • after-enter (once the animation finished)
      • +
    • after-enter-cancelled (add element before animation is finished)
      • +
    • before-leave()
      • +
    • after-leave
      • +
    • leave
      • +
    • after-leave-cancelled
      • +
    +
    • +
  • method에 함수를 정의 할 때는 el 및 done을 input variable로 정확히 명시해야함 +
      +
    • enter 및 leave 훅에서 done 콜백 함수를 호출해야함
      • +
    • 콜백 호출 안하면, 동기적으로 호출이 되어 트랜지션이 즉시 완료되어버림
      • +
    +
    • +
+
<template>
+  <transition
+    @before-enter="beforeEnter"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @enter-cancelled="enterCancelled"
+    @before-leave="beforeLeave"
+    @leave="leave"
+    @after-leave="afterLeave"
+    @leave-cancelled="leaveCancelled"
+  >
+  </transition>
+</template>
+
+<script>
+  export default {
+      data() {
+          return {
+              elementWidth : 100
+          }
+      },
+      methods: {
+          beforeEnger(el) {
+              ...
+              this.elementWidth = 100;
+              el.style.width = this.elementWidth + 'px';
+          },
+          enter(el, done) {
+              ...
+              const interval = setInterval(() => {
+                  el.style.width = (this.elementWidth + round * 10) + 'px';
+                  round ++;
+                  if (round > 20) {
+                      clearInterval(interval);
+                      done();
+                  }
+              }, 20);
+              // done();  vue에게 애니메이션이 언제 끝났는지 알리기 위해 사용 (CSS랑은 다름)
+
+          },
+          afterEnter(el){
+              ...
+          },
+          enterCancelled(el) {
+              ...
+          },
+          beforeLeave(el) {
+              ...
+              this.elementWidth = 300;
+              el.style.width = this.elementWidth + 'px';
+          },
+          leave(el,done){
+              let round = 1;
+              const interval = setInterval(() => {
+                  el.style.width = (this.elementWidth - round * 10) + 'px';
+                  round ++;
+                  if (round > 20) {
+                      clearInterval(interval);
+                      done();
+                  }
+              }, 20);
+          }
+          /// 나머지도 정의
+      }
+  }
+</script>
+
+

여기까지 Vue의 트랜지션과 애니메이션을 구현하는 방법을 정리해보았습니다.

+

틀린 내용이 있다면 자유롭게 댓글로 달아주세요 :)

Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby
+ + \ No newline at end of file diff --git a/2019/06/17/tutorial14-filter/index.html b/2019/06/17/tutorial14-filter/index.html new file mode 100644 index 0000000..80344f9 --- /dev/null +++ b/2019/06/17/tutorial14-filter/index.html @@ -0,0 +1,154 @@ +
thumbnail
Vue.js 뽀개기 (14) 텍스트 형식 변환을 위한 필터
vue
2019.06.17.
+

본 글은 Udemy에서 제공하는 유료 강좌인 Vue.js Complete Guide를 수강하면서 정리한 내용입니다. 저작권 문제시 바로 글을 내리도록 하겠습니다.

+
+
+

사용자가 입력한 영문자를 모두 대문자로 바꾸는 방법은 없을까요?

+

Vue.js가 공식적으로 제공하는 기능인 필터 는 텍스트를 원하는 대로 형식을 변환시켜주는 역할을 합니다. 비록 어떻게 변환시킬 것인지는 개발자가 필터 함수를 직접 만들어야하지만, 저장된 데이터를 실제로 변환시키지 않고 템플릿에서만 마법처럼 바꾸어줍니다.

+
+

필터는 언제 사용합니까?

+
    +
  • 기존의 데이터는 유지하면서, UI에 보이는 텍스트를 다른 형식으로 변환시키고 싶을때
    • +
+

필터의 사용범위

+
    +
  • 로컬 및 전역으로 사용이 가능
    • +
+

{% raw %}

+

필터 사용 방법

+
    +
  • 필터는 항상 data객체에 정의된 값을 입력값으로 필요로함
    • +
  • 템플릿에는 중괄호 보간법, mustache interpolation, 혹은 v-bind를 선언 +
      +
    • {{ yourInput | Capitalized }}
      • +
    • 맨 앞이 입력값, 뒤에가 사용되는 필터 함수
      • +
    • 입력값과 필터 함수 사이에 파이프 심볼 (|)을 넣어주기
      • +
    +
    • +
  • 입력값으로 사용된 값이 실제로 변환되는 것이 아니라, 우리에게 보여지는 결과 화면에서만 변환 +{% endraw %}
    • +
+
+

로컬 등록

+
    +
  • 로컬 등록은 해당 컴포넌트에 정의하기!
    • +
+
<template>
+  {% raw %}
+  <p>{ text | to-uppercase }}</p>
+  {% endraw %}
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        // 입력값이 text이기 때문에, 데이터 객체에 text 값을 정의합니다.
+        // 값은 공백이여도 상관이 없습니다.
+        text: 'Hello there!',
+      }
+    },
+    filters: {
+      'to-uppercase'(value) {
+        return value.toUpperCase()
+      },
+    },
+  }
+</script>
+

전역 등록

+
// main.js 파일에 등록
+Vue.filter('to-lowercase', function(value) {
+  return value.toLowerCase()
+})
+

별도의 파일로 등록

+
    +
  • filter.js 파일에 작성
    • +
  • 혹은 더 나은 폴더 구조를 위해 filter 폴더에 index.js 파일에 작성
    • +
+
// index.js
+export function lowercase(value) {
+  return value.toLowerCase()
+}
+
+export function uppercase(value) {
+  return value.toUppaerCase()
+}
+
// main.js
+import * from './filter
+
+// 사용자 정의...
+
+
+

{% raw %}

+

여러개의 필터를 순차 적용하기

+
    +
  • 필터는 여러개를 순차적으로 적용하는 체이닝이 가능
    • +
  • {{ yourInput | toUpperCase | toLowerCase }} +
      +
    • 먼저, yourInput이 upper case로 변환
      • +
    • 변환된 결과가 다시, toLowerCase 필터의 입력값이 됨
      • +
    • 소문자로 변환된 결과가 화면에 출력
      • +
    +
    • +
  • 참고로 필터는 자바스크립트 함수이기 때문에 두개 이상의 입력 값을 가질 수 있음! +_ {{ yourInput | toUpperCaese('arg1', 'arg2')}} +_ 먼저, yourInput이 필터 함수에 의해 변환 +_ arg1이 두번째 입력값으로 전달되어 변환 +_ arg2가 세번째 입력값으로 전달되어 변환 +{% endraw %}
    • +
+

(번외) Computed 속성을 이용한 필터 정의

+
    +
  • Vue의 computed 속성을 이용해서 필터 정의 가능
    • +
  • computed 속성의 장점은 값의 변화가 있을때만, 연산을 다시 수행한다는 점
    • +
+
<!-- 사용자가 입력한 값에 따라, fruits에서 텍스트가 일치하는 항목을 필터링해서 보여줌 -->
+<template>
+  {% raw %}
+  <p>{{ text | to-uppercase }}</p>
+  {% endraw %}
+  <hr />
+  <input v-model="filterText" />
+  <ul>
+    <li v-for="fruit in fruits ">{{ fruit }}</li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        text: 'Hello there!',
+        fruits: ['Apple', 'Bannana', 'Mango', 'Melon'],
+        filterText: '',
+      }
+    },
+    filters: {
+      // 일반적인 지역 필터 등록
+      'to-uppercase'(value) {
+        return value.toUpperCase()
+      },
+    },
+    // Vue에서 제공하는 필터는 아니지만, 비슷한 역할 수행 가능
+    computed: {
+      filteredFruits() {
+        return this.fruits.filter(element => {
+          return element.match(this.filterText)
+        })
+      },
+    },
+  }
+</script>
+
+

다음 글에서는 렌더 함수와 JSX에 대해 소개합니다.

+

틀린 내용이 있다면 자유롭게 댓글로 달아주세요 :)

Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby
+ + \ No newline at end of file diff --git "a/2019/07/27/vuetify-grid-\354\213\234\354\212\244\355\205\234-\354\235\264\355\225\264\355\225\230\352\270\260/index.html" "b/2019/07/27/vuetify-grid-\354\213\234\354\212\244\355\205\234-\354\235\264\355\225\264\355\225\230\352\270\260/index.html" new file mode 100644 index 0000000..05d62ec --- /dev/null +++ "b/2019/07/27/vuetify-grid-\354\213\234\354\212\244\355\205\234-\354\235\264\355\225\264\355\225\230\352\270\260/index.html" @@ -0,0 +1,344 @@ +
thumbnail
[Vuetify] (1) Grid 시스템 이해하기
vue
2019.07.27.

Vuetify는 부트스트랩과 마찬가지로 12 포인트의 Grid 시스템으로 이루어져있음. +즉, 한 row (열)는 12개의 column으로 구성된다고 보면됨. +사이즈에 맞지 않으면, 아래로 커짐. +Vuetify에서 Grid system은 먼저 v-container로 컨텐츠를 담을 컨테이너를 정의. +v-layout은 단일 컨텐츠 항목인 v-flex를 포함하는 레이아웃을 정의. +v-flex는 가장 작은 컨텐츠 단위로 보면됨

+

순서: v-container >> v-layout >> v-flex (>> v-card)

+

+ + + + + + Vuetify Grid + + +

+
+

v-container

+
    +
  • Grid 시스템에서 가장 큰 개체
    • +
  • 안에 layout 및 flex를 포함
    • +
+

Props

+
    +
  1. fluid +
      +
    • Removs viewport size breakpoints
      • +
    • 화면에 따라 사이즈가 바뀌는게 아니라 항상 최대 넓이를 가짐
      • +
    • 사이즈 조절 안해도 되는 경우 사용하면 될듯
      • +
    +
    2. +
  2. justify-center +
      +
    • 컨텐츠를 가운데로 정렬
      • +
    +
    3. +
  3. grid-list-(size) +
      +
    • 각 v-flex 아이템들이 세로 및 가로로 몇 픽셀만큼 떨어져있는지
      • +
    • 2에서 24px까지 지정이가능 +
        +
      • xs = 2px
        • +
      • sm = 4px
        • +
      • md = 8px
        • +
      • lg = 16px
        • +
      • xl = 24px
        • +
      +
      • +
    +
    4. +
  4. fill-height +
      +
    • 칼럼 엘리먼트의 높이가 부모랑 자식 요소로 채워지도록 만듬
      • +
    +
    5. +
+
+

v-layout

+
    +
  • 섹션을 구분하는데 사용
    • +
  • v-flex를 포함
    • +
+

Props

+
    +
  1. wrap +
      +
    • 엘리먼트가 100%를 넘어가면 컨테이너안에서 자식노드를 감싸도록함 (similar as flex-wrap)
      • +
    • 한 줄에 다 안들어가면, 다음 줄로 넘어가서 배치됨
      • +
    • wrap 안쓰면, 컨텐츠가 화면에서 짤림
      • +
    +
    2. +
  2. row +
      +
    • 좌에서 우로 표시
      • +
    +
    3. +
  3. column +
      +
    • 위에서 아래로 표시
      • +
    +
    4. +
  4. reverse +
      +
    • 표시 방향을 반대로 뒤집는 기능
      • +
    +
    5. +
  5. align-content-() +
      +
    • v-layout을 Y축 방향으로 정렬
      • +
    +
    6. +
  6. justify-() +
      +
    • v-layout을 X축 방향으로 정렬
      • +
    • justify-center = X축의 가운데에 생성
      • +
    • justify-space-between = X축을 기준으로 컨텐츠 사이에 빈 공간을 두고 생성
      • +
    +
    7. +
+
+

CSS의 Flex에 대해 알아보자!

+
    +
  • +

    Flexbox는 1차원적인 레이아웃 모델

    +
      +
    • 한 번에 하나의 차원만 다룬다는 뜻
      • +
    • 행으로 정렬 혹은 열로 정렬
      • +
    +
    • +
  • +

    Flexbox는 가로축인 Main-axis와 세로축인 Cross-axis를 가짐

    +
    • +
  • +

    Flexbox는 Flex 컨테이너 안에 정의됨

    +
      +
    • CSS에 flex: 1 1 auto 와 같이 정의 +
        +
      • 첫번째 숫자 = flex-grow
        • +
      • 두번째 숫자 = flex-shrink
        • +
      • auto = flex-basis의 사이즈
        • +
      +
      • +
    +
    • +
  • +

    flex 컨테이너가 만약 500 픽셀 크기고, 100 픽셀 크기의 자식이 3개 존재하면 남은 공간은 200 픽셀

    +
      +
    • 마지막 자식 요소를 200 픽셀 빈공간으로 남겨둠
      • +
    • flex-grow, flex-shrink, flex-basis는 빈 공간을 분배하는 방식을 변경함
      • +
    +
    • +
+

1. flex-basis

+
    +
  • 항목의 크기를 결정
    • +
  • 디폴트는 auto +
      +
    • 이 상태에서는 flex안의 항목의 크기에 딱 맞는 크기 사용
      • +
    +
    • +
  • 각 내용물의 크기만큼 공간을 차지하게됨
    • +
+

2. flex-grow

+
    +
  • 주축에서 남는 공간을 flex 컨테이너 안의 항목들에 분배
    • +
  • 값을 양수로 지정하면, flex 항목별로 주축 방향으로 크기가 flex-basis 값 이상으로 늘어날 수 있음 +
      +
    • 위의 100 픽셀 항목이 있다면, 크기가 100 이상으로 늘어날 수 있음
      • +
    • 1로 지정하면 사용가능한 공간은 각 항목에 동일하게 분배
      • +
    • 각 항목은 주축을 따라 분배받은 값만큼 사이즈가 늘어남
      • +
    +
    • +
  • Vuetify에서는 flex-grow:1 로 고정
    • +
+

3. flex-shrink

+
    +
  • 주축의 공간이 부족하면, 어떻게 항목들의 사이즈를 줄일건지를 결정
    • +
  • 양수이면, flex 항목은 flex-basis에 지정된 사이즈보다 작아짐
    • +
+
+

v-flex

+
    +
  • 각각의 그리드 박스는 flex-box 요소임
    • +
  • 자식 노드를 flex: 1 1 auto로 설정 (기본 값) +
      +
    • flex-grow = 1 +
        +
      • flex-basis 값보다 커질 수 있음
        • +
      +
      • +
    • flex-shrink = 1 +
        +
      • flex 컨테이너 공간이 모자라면, 크기가 줄어듬
        • +
      +
      • +
    • flex-basis = auto +
        +
      • flex 항목의 내용물의 크기로 지정
        • +
      +
      • +
    +
    • +
+

Props

+
    +
  1. align-self-() +
      +
    • Y축 방향으로 정렬
      • +
    • align-self-end는 v-flex를 v-layout 맨 아래에 생성
      • +
    +
    2. +
  2. (size)(1-12) +
      +
    • xs12 = xs 크기 이상에서 12로 고정
      • +
    • lg12 = lg 크기 이상에서 12로 고정
      • +
    • 모든 디바이스 크기에서 12로 고정 +
        +
      • xs12
        • +
      +
      • +
    • xs 사이즈 이상에서 12, md 사이즈 이상에서는 6 +
        +
      • xs12 md6
        • +
      +
      • +
    +
    3. +
  3. offset-(size)(0-12) +
      +
    • 장치의 크기별로 v-flex 항목이 그리드에서 몇 칸뒤에 생겨야하는지를 지정해줌
      • +
    • offset-xs6 +
        +
      • xs 보다 큰 장치에서 6칸의 빈 공간을 두고 생성
        • +
      +
      • +
    +
    4. +
  4. order-(size)(1-12) +
      +
    • 그리드 항목의 순서를 지정가능
      • +
    • 이것도 장치 크기별로 지정가능
      • +
    • order-lg2 +
        +
      • lg 보다 큰 장치에서 2번째로 보여지도록 지정
        • +
      +
      • +
    +
    5. +
+

Row 및 Column breakpoints

+
    +
  • 디바이스 크기별로 동적으로 breakpoint를 지정 가능
    • +
  • 조금 귀찮은 방법;;; +
      +
    • computed 속성에 함수를 정의해야함?
      • +
    • v-layout에 v-bind로 함수랑 묶어주기
      • +
    +
    • +
+
new Vue({
+  el: '#app',
+  vuetify: new Vuetify(),
+  computed: {
+    binding() {
+      const binding = {}
+
+      // Screen size가 md 이상이면 항목을 아래로 정렬
+      if (this.$vuetify.breakpoint.mdAndUp) binding.column = true
+
+      return binding
+    },
+  },
+})
+

Grow와 Shrink

+
    +
  • 기본적으로 grow랑 shrink 둘다 켜져있음 (기본 값: 1 1 auto) +
      +
    • 레이아웃에 정의된 v-flex의 컨텐츠 크기에 맞춰서 빈 공간 없이 크기가 지정됨
      • +
    +
    • +
  • Grow를 비활성화하려면, shrink를 props로 +
      +
    • v-flex 내용에 맞춰 사이즈가 조정됨
      • +
    • 처음에 6으로 지정되면, 레이아웃 빈 공간을 채우려고 6에서 더 커지지는 않음
      • +
    +
    • +
  • Shrink를 비활성화하려면, grow를 props로 +
      +
    • 컨텐츠가 viewport보다 많아지면, 줄을 바꿈
      • +
    • 절대로 지정한 v-flex의 사이즈보다 작아지지 않음!
      • +
    • 빈 공간을 채우려고 커지기는함
      • +
    +
    • +
  • 둘다 끄려면, grow-shrink-0 +
      +
    • v-flex 내용에 딱 맞는 사이즈로 알아서 지정
      • +
    +
    • +
+

d-flex? d-inline? (뭔지 공부 필요…)

+
    +
  • display 속성을 지정해주는 역할 +
      +
    • d-inline-flex
      • +
    • d-flex
      • +
    • d-inline-block
      • +
    • d-block
      • +
    • d-inline
      • +
    • d-none
      • +
    +
    • +
+
+

v-spacer

+
    +
  • 컴포넌트 사이에 빈 공간을 생성하고 싶을때 사용
    • +
+
+

마무리

+

틀린 내용이 있다면 자유롭게 댓글로 달아주세요 :)

Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby
+ + \ No newline at end of file diff --git "a/2019/09/02/Vue\354\227\220\354\204\234-this-is-undefined-\354\227\220\353\237\254\352\260\200-\353\260\234\354\203\235\355\225\230\353\212\224-\354\235\264\354\234\240/index.html" "b/2019/09/02/Vue\354\227\220\354\204\234-this-is-undefined-\354\227\220\353\237\254\352\260\200-\353\260\234\354\203\235\355\225\230\353\212\224-\354\235\264\354\234\240/index.html" new file mode 100644 index 0000000..2008aee --- /dev/null +++ "b/2019/09/02/Vue\354\227\220\354\204\234-this-is-undefined-\354\227\220\353\237\254\352\260\200-\353\260\234\354\203\235\355\225\230\353\212\224-\354\235\264\354\234\240/index.html" @@ -0,0 +1,155 @@ +
thumbnail
Vue에서 this is undefined 에러가 발생하는 이유
vue
2019.09.02.
+

본 글은 Michael Thiessen의 개인 블로그와 Stack Overflow에서 정보를 얻어 작성하였습니다.

+
+
+

이런 경우 있으신가요?

+

Vue.js를 사용해서 코딩을 하다보면, 가끔 this is undefined와 같은 에러를 확인하신적이 있을 겁니다. +저의 경우에는 socket.io를 사용해서 webRTC 영상통화 기능을 구현하다가 처음 알게됬는데요. +아래의 예를 보면, 당연히 this는 Vue 인스턴스에 정의된 data 속성을 가르키는 줄 알았고 아무 문제가 없어 보이나… +this is undefined 에러가 발생하게됩니다.

+
// this님... 여기서 이러시면 안됩니다...
+mounted() {
+    this.socket.on('created', function(room){
+        this.isReady = true;    // this is undefined!
+    })
+}
+

분명 Vue.js 공식문서에서 data 속성에 정의하고, this를 통해 가져온다 그랬는데 문제가 뭐인걸까요? +이를 이해하려면 ECMAScript6 (이하 ES6)에서 새로 생긴 Arrow 함수와 일반적인 함수의 차이점을 알아야만 합니다.

+
+

ES6 이후 두 가지 함수 정의 방법!

+

ES6 문법이 쓰이게된 이후, 자바스크립트에서 함수를 두 가지 방법으로 정의를 할 수 있게 되었습니다. +하나는 일반적으로 쓰이게되는 function(){}와 같은 형태이고, +다른 하나는 Arrow 함수라고 불리우는 () => {}와 같은 형태를 띕니다.

+

그렇다면 무엇이 다른건지 차근차근 알아봅시다!

+

1. 일반적인 함수

+
    +
  • 일반적인 함수정의 방법에서 this는 정의한 함수가 종속되어있는 컨텍스트를 뜻합니다.
    • +
  • Vue에서 가장 많이 사용되는 방법인 아래의 예시를 확인해봅시다.
    • +
+
export default {
+  data: {
+    isReady: 'This This This',
+  },
+  methods: {
+    doesThisWork() {
+      console.log(this.isReady) // 콘솔 창에는 `This This This`가 뜹니다.
+    },
+  },
+}
+
    +
  • +

    위의 예시에서 this는 doesThisWork()이라는 함수가 존재하는 Vue 인스턴스를 가리킵니다.

    +
      +
    • 따라서, this를 불러온다면 이는 해당 Vue 인스턴스 안에 정의한 모든 것들을 지칭한다는 뜻!
      • +
    +
    • +
  • +

    반대로 다시 처음의 예를 확인해봅시다.

    +
    • +
+
// this님... 여기서 이러시면 안됩니다2...
+mounted() {
+    this.socket.on('created', function(room){
+        this.isReady = true;    // this is undefined!
+    })
+}
+
    +
  • +

    여기서 우리는 this.socket.on()이라는 함수 안에 다시 한번 function(room){}을 정의하였습니다.

    +
      +
    • this.socket의 this는 Vue 인스터스를 지칭합니다.
      • +
    +
    • +
  • +

    문제는 function(room){}안의 this는 Vue 인스턴스를 가리키지않고, 새롭게 정의한 해당 함수의 내부를 가리키게됩니다.

    +
      +
    • 즉, this.isReady는 this.socket.on() 컨텍스트를 가르키기 때문에, 해당 컨텍스트에서 정의하지 않은 데이터를 불러오려고한 우리를 에러처리를 해서 꾸짖습니다…
      • +
    +
    • +
  • +

    간단하게, 함수안에 또다른 함수를 정의하게 된다면 this를 Vue.js에서 쓰이는 일반적인 방법으로 사용할 수 없다 는 뜻입니다.

    +
    • +
+

2. Arrow 함수

+
    +
  • ES6부터 사용가능한 Arrow 함수에서 this는 함수가 내부를 가리키지 않고, 함수가 존재하는 컨텍스트를 지칭합니다.
    • +
  • 따라서, 위의 예를 다음과 바꾸게 되면 정상적으로 작동하게 됩니다.
    • +
+
mounted() {
+    this.socket.on('created', (room) => {
+        this.isReady = true;    // 에러 없음!
+    })
+}
+
    +
  • Arrow 함수안의 this는 함수가 처음 선언 될때의 컨텍스트를 참조 하게됨 (= Lexical Scoping)
    • +
  • this.isReady는 (room) => {} 함수 내부에 존재하는게 아니라, this.socket.on이 정의된 Vue 인스턴스를 가리킴. +
      +
    • 예를 들자면, 일반 함수는 Vue 인스턴스라는 집안에 있으면 집을 가리키고, 집안의 주방에 존재하게되면 주방을 가리킵니다.
      • +
    • Arrow 함수는 집안의 주방에 정의했지만 집을 가르킨다고 보면됨.
      • +
    +
    • +
+

Vue.js에서 Arrow 함수 사용시 주의!!

+

하지만, Arrow 함수를 Vue.js에서 사용할 때 주의할 점도 존재합니다. +Lexical scoping 성향을 띄는 Arrow 함수는 절대로! Vue.js의 methods에 정의하는 함수 선언에 바로 적용하면 안됩니다! +만약 아래와 같이 사용하게되면, 해당 this는 Vue 인스턴스를 가리키지 않고, Vue 인스턴스를 불러온 함수를 참조하게됨 (아마 Vue 인스턴스를 렌더링한 해당 화면 or window를 지칭하는듯?)

+
// Arrow 함수의 안좋은 예...
+export default {
+  data: {
+    isReady: 'This This This',
+  },
+  methods: {
+    doesThisWork: () => {
+      console.log(this.isReady) // this is undefined!
+    },
+  },
+}
+

따라서, Vue 인스턴스의 methods 안에서는 바로 Arrow 함수를 사용하지 말도록 하자.

+
+

this is undefined 해결법 세 가지

+

사실 해당 에러를 해결하는 방법에는 Arrow 함수를 사용하는 방법 이외에도 두 가지가 더 있습니다. +본 글을 마치기전에 이 문제를 해결하는 세 가지 방법을 간단하게 정리하고 마칩니다.

+

1. Arrow 함수 (Best!)

+
mounted() {
+    this.socket.on('created', (room) => {
+        this.isReady = true;    // 에러 없음!
+    })
+}
+

2. bind 사용 (Good)

+
    +
  • Arrow 함수를 사용하는게 훨씬 더 간략하지만, bind(this)를 내부 함수에 붙여줌으로써 내부 함수보다 한 단계 앞에 선언한 혹은 한 단계 큰 스코프의 함수를 지칭하게 만듭니다.
    • +
  • 테스트는 안해봤지만, 중첩의 중첩의 중첩함수에는 bind(this)를 붙여도 제대로 작동을 안 할 것으로 예상… 따라서, 최고의 선택은 Arrow 함수!
    • +
+
mounted() {
+    this.socket.on('created', function(room) {
+        this.isReady = true;    // 에러 없음!
+    }.bind(this))
+}
+

3. this를 변수로 정의 (Not recommended)

+
    +
  • mounted()가 실행 될 때, this를 변수로 지정해서 어떤 함수 내부에서도 사용이 가능하게 만들어버림
    • +
  • 코드를 보고 한 눈에 명확하게 안보이기 때문에, 조금 귀찮음
    • +
  • 그리고 코드가 길어지면 this랑 변수로 정의한 _this를 혼동하는 실수하기 딱 좋아보임
    • +
  • Arrow 함수를 알고 나서는, 굳이 쓸 일이 없는 방법…
    • +
+
mounted() {
+    let _this = this;   // 너를 this로 지정하겠노라
+
+    this.socket.on('created', function(room) {
+        this.isReady = true;    // 에러 없음!
+    }.bind(this))
+}
+
+

버스에서 스택오버플로우를 읽다가 깨우쳐서 밤에 바로 정리하는 글을 써봤는데, 아무래도 정리가 많이 미흡해보입니다… +이해가 안가는 설명이나 틀린 부분들이 있다면 댓글로 남겨주시면 저에게 큰 힘이 됩니다!

Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby
+ + \ No newline at end of file diff --git a/index.html b/index.html index 855b151..ffcb9aa 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ google_ad_client: "ca-pub-7299119014849148", enable_page_level_ads: true }); -
Profile Image
Nice to Meet You,
Welcome!
#All(57)#HBR 팟캐스트 정리(4)#vuePress(1)#부린이 탈출기(1)#Oxford Nanopore(4)#스탠포드 스타트업 강의(14)#vue(29)#vueRTC(4)
Post Item Image
직장에서 현명하게 아니오라고 대답하는 방법
2020.10.01.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 759화 <The Subtle Art of Saying No>를 듣고 정리한 내용입니다.
Post Item Image
VuePress를 설치하고 사용하는 방법에 대해 araboja
2020.09.20.
자바스크립트 프레임워크인 Vue를 기반으로 정적사이트를 생성해주는 VuePress에 CSS 프레임워크인 Tailwindcss를 적용하여 Github blog를 제작하는 방법에 대해 정리하는 글입니다.
Post Item Image
주택 거래 단계별 세금을 알아보자 (7.10 부동산 대책 이후)
2020.09.06.
주택 거래 단계별로 발생하게되는 주요 세금들에는 어떠한 것들이 있고, 2020년에 발표된 7.10 부동산 대책 이후 앞으로 어떻게 변화하게 되는지를 정리합니다.
Post Item Image
나노포어 데이터 분석 원리
2019.12.08.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 데이터가 어떻게 저장되고 분석되는지에 대해 간단히 소개하는 글입니다.
Post Item Image
인사관리에서 리더십 발휘하기
2019.10.31.
스탠포드대학에서 진행하였던 How to start a startup의 15번째 강의를 요약정리한 글입니다.
Post Item Image
회사를 운영하면서 리더십 발휘하기
2019.10.26.
스탠포드대학에서 진행하였던 How to start a startup의 14번째 강의를 요약정리한 글입니다.
Post Item Image
창업자에게 요구되는 소양은 무엇일까?
2019.10.19.
스탠포드대학에서 진행하였던 How to start a startup의 13번째 강의를 요약정리한 글입니다.
Post Item Image
B2B 사업하기
2019.09.30.
스탠포드대학에서 진행하였던 How to start a startup의 12번째 강의를 요약정리한 글입니다.
Post Item Image
좋은 직원을 뽑으려면 어떻게 해야하는가
2019.09.27.
스탠포드대학에서 진행하였던 How to start a startup의 11번째 강의를 요약정리한 글입니다.
Post Item Image
조직문화의 중요성
2019.09.12.
스탠포드대학에서 진행하였던 How to start a startup의 10번째 강의를 요약정리한 글입니다.
Post Item Image
Vue에서 this is undefined 에러가 발생하는 이유
2019.09.02.
Vue.js를 코딩하다가 알게된 사소한 팁들을 공유하는 글입니다. 본 글에서는 Vue 인스턴스에서 계속해서 사용하게 되는 this의 스코프가 어떻게 설정되고, 왜 Arrow 함수를 써야만 하는지를 설명합니다.
Post Item Image
Vue에서 this is undefined 에러가 발생하는 이유
2019.09.02.
Vue.js를 코딩하다가 알게된 사소한 팁들을 공유하는 글입니다. 본 글에서는 Vue 인스턴스에서 계속해서 사용하게 되는 this의 스코프가 어떻게 설정되고, 왜 Arrow 함수를 써야만 하는지를 설명합니다.
Post Item Image
Vue에서 this is undefined 에러가 발생하는 이유
2019.09.02.
Vue.js를 코딩하다가 알게된 사소한 팁들을 공유하는 글입니다. 본 글에서는 Vue 인스턴스에서 계속해서 사용하게 되는 this의 스코프가 어떻게 설정되고, 왜 Arrow 함수를 써야만 하는지를 설명합니다.
Post Item Image
투자자의 입장에서 본 투자를 유치하는 방법
2019.08.17.
스탠포드대학에서 진행하였던 How to start a startup의 9번째 강의를 요약정리한 글입니다.
Post Item Image
초심을 유지하는 방법
2019.08.15.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 693화 <초심을 유지하는 방법>를 듣고 정리한 내용입니다.
Post Item Image
실행하기, 작게 일하기 , PR하기
2019.08.07.
스탠포드대학에서 진행하였던 How to start a startup의 8번째 강의를 요약정리한 글입니다.
Post Item Image
[Vue+WebRTC] (4) Socket.io room 설정
2019.08.05.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
[Vue+WebRTC] (3) Socket.io 서버 설정
2019.08.04.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
고객이 사랑하는 상품 만들기
2019.08.02.
스탠포드대학에서 진행하였던 How to start a startup의 7번째 강의를 요약정리한 글입니다.
Post Item Image
[Vue+WebRTC] (2) 한 페이지에서 웹캠 스트리밍하기
2019.07.28.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
[Vue+WebRTC] (1) 웹캠 화면 띄우기
2019.07.28.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
[Vuetify] (1) Grid 시스템 이해하기
2019.07.27.
Vue의 UI를 예쁘게 꾸며주도록 도와주는 구글의 Material Design 기반의 UI 컴포넌트 라이브러리인 Vuetify의 Grid 시스템에 대해 정리합니다.
Post Item Image
[Vuetify] (1) Grid 시스템 이해하기
2019.07.27.
Vue의 UI를 예쁘게 꾸며주도록 도와주는 구글의 Material Design 기반의 UI 컴포넌트 라이브러리인 Vuetify의 Grid 시스템에 대해 정리합니다.
Post Item Image
[Vuetify] (1) Grid 시스템 이해하기
2019.07.27.
Vue의 UI를 예쁘게 꾸며주도록 도와주는 구글의 Material Design 기반의 UI 컴포넌트 라이브러리인 Vuetify의 Grid 시스템에 대해 정리합니다.
Post Item Image
직장에서 비판적 사고 기르기
2019.07.25.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 692화 <직장에서 비판적 사고 기르기>를 듣고 정리한 내용입니다.
Post Item Image
[Vue-Router] (2) 네비게이션 가드와 기타 기능들
2019.07.21.
Vue router에서 라우트를 보호해주는 네비게이션 가드를 정리하는 글입니다.
Post Item Image
폭발적인 성장을 위한 그로스 해킹
2019.07.20.
스탠포드대학에서 진행하였던 How to start a startup의 6번째 강의를 요약정리한 글입니다.
Post Item Image
리더의 3가지 종류
2019.07.20.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 690화를 듣고 정리한 내용입니다.
Post Item Image
[Vuex 뽀개기] (2) Vuex 모듈화하기
2019.07.13.
Vuex를 모듈화해서 사용하는 방법을 정리합니다.
Post Item Image
[Vue-Router] (1) 기본 사용법
2019.07.13.
Vue router 기본 사용법, 동적 라우트, 중첩 라우트, 리다이렉트 방법에 대해 설명합니다.
Post Item Image
[Vuex 뽀개기] (1) State, Getter, Mutation, 그리고 Action
2019.06.25.
Vue의 복잡한 상태 관리를 간편하게 만들어주는 Vuex 라이브러리가 무엇이고, 어떻게 사용해야하는지에 대해 정리하는 글입니다.
Post Item Image
블루오션 비즈니스 만들기
2019.06.23.
스탠포드대학에서 진행하였던 How to start a startup의 5번째 강의를 요약정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (14) 텍스트 형식 변환을 위한 필터
2019.06.17.
Vue에서 제공하는 기능 중, 텍스트의 형식을 변환시켜주는 필터에 대해 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (13) 플러그인
2019.06.16.
자주 사용하는 기능들을 묶어 플러그인으로 작성하는 법에 대해 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (12) 커스텀 디렉티브
2019.06.15.
사용자 정의 디렉티브를 만들어 DOM의 엘리먼트를 조작하는 법에 대해 요약하는 글입니다.
Post Item Image
Vue.js 뽀개기 (11) 믹스인
2019.06.13.
Vue 컴포넌트들에 재사용 가능한 기능을 배포하도록 도와주는 믹스인에 대해 요약하는 글입니다.
Post Item Image
Vue.js 뽀개기 (10) 트랜지션과 애니메이션 적용하기
2019.06.10.
Vue에서는 어떻게 트랜지션과 애니메이션 효과를 구현하는지 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (10) 트랜지션과 애니메이션 적용하기
2019.06.10.
Vue에서는 어떻게 트랜지션과 애니메이션 효과를 구현하는지 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (10) 트랜지션과 애니메이션 적용하기
2019.06.10.
Vue에서는 어떻게 트랜지션과 애니메이션 효과를 구현하는지 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (8) 컴포넌트 커뮤니케이션 - Props와 Emit
2019.06.07.
Vue의 컴포넌트끼리 데이터를 주고 받는 방식인 Props와 Emit에 대해 정리하는 글입니다.
Post Item Image
나노포어 시퀀싱이란?
2019.06.01.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 기술에 대해 간단히 소개하는 글입니다.
Post Item Image
나노포어 시퀀싱이란?
2019.06.01.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 기술에 대해 간단히 소개하는 글입니다.
Post Item Image
나노포어 시퀀싱이란?
2019.06.01.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 기술에 대해 간단히 소개하는 글입니다.
Post Item Image
제품제작, 그리고 고객과의 소통
2019.05.18.
스탠포드대학에서 진행하였던 How to start a startup의 4번째 강의를 요약정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (7) 컴포넌트 기본편
2019.05.13.
Vue를 가장 강력한 프론트엔드 프레임워크로 만들어주는 기능인 컴포넌트에 대해 알아봅니다.
Post Item Image
Vue.js 뽀개기 (6) CSS 스타일 넣기
2019.05.12.
Vue 템플릿에 CSS 스타일을 적용하는 방법에 대해 알아봅니다.
Post Item Image
Vue.js 뽀개기 (5) Computed와 Watch 속성
2019.05.11.
Vue 인스턴스의 핵심 속성인 computed와 watch에 대한 정리글입니다.
Post Item Image
Vue.js 뽀개기 (4) 조건문과 반복문
2019.05.07.
Vue에서는 조건문과 반복문을 어떻게 사용하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (3) Vue로 DOM 조작하기
2019.05.06.
Vue가 DOM을 어떻게 조작하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (3) Vue로 DOM 조작하기
2019.05.06.
Vue가 DOM을 어떻게 조작하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (3) Vue로 DOM 조작하기
2019.05.06.
Vue가 DOM을 어떻게 조작하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (2) Vue 인스턴스와 라이프사이클
2019.05.05.
Vue 인스턴스와 라이프사이클에 대해 정리한 글입니다.
Post Item Image
반직관적으로 생각하기
2019.04.30.
스탠포드대학에서 진행하였던 How to start a startup의 3번째 강의를 요약정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (1) 개발환경 설정
2019.04.30.
Vue 개발환경 설정하는 법에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (1) 개발환경 설정
2019.04.30.
Vue 개발환경 설정하는 법에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (1) 개발환경 설정
2019.04.30.
Vue 개발환경 설정하는 법에 대해 정리한 글입니다.
Post Item Image
창업 멤버 구성부터 실행에 옮기기까지
2019.04.24.
스탠포드대학에서 진행하였던 How to start a startup의 2번째 강의를 요약정리한 글입니다.
Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby
+
Profile Image
Nice to Meet You,
Welcome!
#All(58)#HBR 팟캐스트 정리(4)#vuePress(1)#부린이 탈출기(1)#Oxford Nanopore(4)#스탠포드 스타트업 강의(14)#vue(30)#vueRTC(4)
Post Item Image
직장에서 현명하게 아니오라고 대답하는 방법
2020.10.01.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 759화 <The Subtle Art of Saying No>를 듣고 정리한 내용입니다.
Post Item Image
VuePress를 설치하고 사용하는 방법에 대해 araboja
2020.09.20.
자바스크립트 프레임워크인 Vue를 기반으로 정적사이트를 생성해주는 VuePress에 CSS 프레임워크인 Tailwindcss를 적용하여 Github blog를 제작하는 방법에 대해 정리하는 글입니다.
Post Item Image
주택 거래 단계별 세금을 알아보자 (7.10 부동산 대책 이후)
2020.09.06.
주택 거래 단계별로 발생하게되는 주요 세금들에는 어떠한 것들이 있고, 2020년에 발표된 7.10 부동산 대책 이후 앞으로 어떻게 변화하게 되는지를 정리합니다.
Post Item Image
나노포어 데이터 분석 원리
2019.12.08.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 데이터가 어떻게 저장되고 분석되는지에 대해 간단히 소개하는 글입니다.
Post Item Image
인사관리에서 리더십 발휘하기
2019.10.31.
스탠포드대학에서 진행하였던 How to start a startup의 15번째 강의를 요약정리한 글입니다.
Post Item Image
회사를 운영하면서 리더십 발휘하기
2019.10.26.
스탠포드대학에서 진행하였던 How to start a startup의 14번째 강의를 요약정리한 글입니다.
Post Item Image
창업자에게 요구되는 소양은 무엇일까?
2019.10.19.
스탠포드대학에서 진행하였던 How to start a startup의 13번째 강의를 요약정리한 글입니다.
Post Item Image
B2B 사업하기
2019.09.30.
스탠포드대학에서 진행하였던 How to start a startup의 12번째 강의를 요약정리한 글입니다.
Post Item Image
좋은 직원을 뽑으려면 어떻게 해야하는가
2019.09.27.
스탠포드대학에서 진행하였던 How to start a startup의 11번째 강의를 요약정리한 글입니다.
Post Item Image
조직문화의 중요성
2019.09.12.
스탠포드대학에서 진행하였던 How to start a startup의 10번째 강의를 요약정리한 글입니다.
Post Item Image
Vue에서 this is undefined 에러가 발생하는 이유
2019.09.02.
Vue.js를 코딩하다가 알게된 사소한 팁들을 공유하는 글입니다. 본 글에서는 Vue 인스턴스에서 계속해서 사용하게 되는 this의 스코프가 어떻게 설정되고, 왜 Arrow 함수를 써야만 하는지를 설명합니다.
Post Item Image
Vue에서 this is undefined 에러가 발생하는 이유
2019.09.02.
Vue.js를 코딩하다가 알게된 사소한 팁들을 공유하는 글입니다. 본 글에서는 Vue 인스턴스에서 계속해서 사용하게 되는 this의 스코프가 어떻게 설정되고, 왜 Arrow 함수를 써야만 하는지를 설명합니다.
Post Item Image
Vue에서 this is undefined 에러가 발생하는 이유
2019.09.02.
Vue.js를 코딩하다가 알게된 사소한 팁들을 공유하는 글입니다. 본 글에서는 Vue 인스턴스에서 계속해서 사용하게 되는 this의 스코프가 어떻게 설정되고, 왜 Arrow 함수를 써야만 하는지를 설명합니다.
Post Item Image
투자자의 입장에서 본 투자를 유치하는 방법
2019.08.17.
스탠포드대학에서 진행하였던 How to start a startup의 9번째 강의를 요약정리한 글입니다.
Post Item Image
초심을 유지하는 방법
2019.08.15.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 693화 <초심을 유지하는 방법>를 듣고 정리한 내용입니다.
Post Item Image
실행하기, 작게 일하기 , PR하기
2019.08.07.
스탠포드대학에서 진행하였던 How to start a startup의 8번째 강의를 요약정리한 글입니다.
Post Item Image
[Vue+WebRTC] (4) Socket.io room 설정
2019.08.05.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
[Vue+WebRTC] (3) Socket.io 서버 설정
2019.08.04.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
고객이 사랑하는 상품 만들기
2019.08.02.
스탠포드대학에서 진행하였던 How to start a startup의 7번째 강의를 요약정리한 글입니다.
Post Item Image
[Vue+WebRTC] (2) 한 페이지에서 웹캠 스트리밍하기
2019.07.28.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
[Vue+WebRTC] (1) 웹캠 화면 띄우기
2019.07.28.
Vue 프레임워크에 WebRTC 기술을 적용하여 웹캠 스트리밍 어플을 만드는 과정을 설명합니다.
Post Item Image
[Vuetify] (1) Grid 시스템 이해하기
2019.07.27.
Vue의 UI를 예쁘게 꾸며주도록 도와주는 구글의 Material Design 기반의 UI 컴포넌트 라이브러리인 Vuetify의 Grid 시스템에 대해 정리합니다.
Post Item Image
[Vuetify] (1) Grid 시스템 이해하기
2019.07.27.
Vue의 UI를 예쁘게 꾸며주도록 도와주는 구글의 Material Design 기반의 UI 컴포넌트 라이브러리인 Vuetify의 Grid 시스템에 대해 정리합니다.
Post Item Image
[Vuetify] (1) Grid 시스템 이해하기
2019.07.27.
Vue의 UI를 예쁘게 꾸며주도록 도와주는 구글의 Material Design 기반의 UI 컴포넌트 라이브러리인 Vuetify의 Grid 시스템에 대해 정리합니다.
Post Item Image
직장에서 비판적 사고 기르기
2019.07.25.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 692화 <직장에서 비판적 사고 기르기>를 듣고 정리한 내용입니다.
Post Item Image
[Vue-Router] (2) 네비게이션 가드와 기타 기능들
2019.07.21.
Vue router에서 라우트를 보호해주는 네비게이션 가드를 정리하는 글입니다.
Post Item Image
폭발적인 성장을 위한 그로스 해킹
2019.07.20.
스탠포드대학에서 진행하였던 How to start a startup의 6번째 강의를 요약정리한 글입니다.
Post Item Image
리더의 3가지 종류
2019.07.20.
하버드 비즈니스 리뷰에서 진행하는 HBR Ideacast 690화를 듣고 정리한 내용입니다.
Post Item Image
[Vuex 뽀개기] (2) Vuex 모듈화하기
2019.07.13.
Vuex를 모듈화해서 사용하는 방법을 정리합니다.
Post Item Image
[Vue-Router] (1) 기본 사용법
2019.07.13.
Vue router 기본 사용법, 동적 라우트, 중첩 라우트, 리다이렉트 방법에 대해 설명합니다.
Post Item Image
[Vuex 뽀개기] (1) State, Getter, Mutation, 그리고 Action
2019.06.25.
Vue의 복잡한 상태 관리를 간편하게 만들어주는 Vuex 라이브러리가 무엇이고, 어떻게 사용해야하는지에 대해 정리하는 글입니다.
Post Item Image
블루오션 비즈니스 만들기
2019.06.23.
스탠포드대학에서 진행하였던 How to start a startup의 5번째 강의를 요약정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (14) 텍스트 형식 변환을 위한 필터
2019.06.17.
Vue에서 제공하는 기능 중, 텍스트의 형식을 변환시켜주는 필터에 대해 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (14) 텍스트 형식 변환을 위한 필터
2019.06.17.
Vue에서 제공하는 기능 중, 텍스트의 형식을 변환시켜주는 필터에 대해 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (13) 플러그인
2019.06.16.
자주 사용하는 기능들을 묶어 플러그인으로 작성하는 법에 대해 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (12) 커스텀 디렉티브
2019.06.15.
사용자 정의 디렉티브를 만들어 DOM의 엘리먼트를 조작하는 법에 대해 요약하는 글입니다.
Post Item Image
Vue.js 뽀개기 (11) 믹스인
2019.06.13.
Vue 컴포넌트들에 재사용 가능한 기능을 배포하도록 도와주는 믹스인에 대해 요약하는 글입니다.
Post Item Image
Vue.js 뽀개기 (10) 트랜지션과 애니메이션 적용하기
2019.06.10.
Vue에서는 어떻게 트랜지션과 애니메이션 효과를 구현하는지 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (10) 트랜지션과 애니메이션 적용하기
2019.06.10.
Vue에서는 어떻게 트랜지션과 애니메이션 효과를 구현하는지 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (10) 트랜지션과 애니메이션 적용하기
2019.06.10.
Vue에서는 어떻게 트랜지션과 애니메이션 효과를 구현하는지 정리하는 글입니다.
Post Item Image
Vue.js 뽀개기 (8) 컴포넌트 커뮤니케이션 - Props와 Emit
2019.06.07.
Vue의 컴포넌트끼리 데이터를 주고 받는 방식인 Props와 Emit에 대해 정리하는 글입니다.
Post Item Image
나노포어 시퀀싱이란?
2019.06.01.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 기술에 대해 간단히 소개하는 글입니다.
Post Item Image
나노포어 시퀀싱이란?
2019.06.01.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 기술에 대해 간단히 소개하는 글입니다.
Post Item Image
나노포어 시퀀싱이란?
2019.06.01.
차세대 유전체 분석기술 중 3세대 기술로 알려진 Oxford Nanopore Technologies사의 나노포어 시퀀싱 기술에 대해 간단히 소개하는 글입니다.
Post Item Image
제품제작, 그리고 고객과의 소통
2019.05.18.
스탠포드대학에서 진행하였던 How to start a startup의 4번째 강의를 요약정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (7) 컴포넌트 기본편
2019.05.13.
Vue를 가장 강력한 프론트엔드 프레임워크로 만들어주는 기능인 컴포넌트에 대해 알아봅니다.
Post Item Image
Vue.js 뽀개기 (6) CSS 스타일 넣기
2019.05.12.
Vue 템플릿에 CSS 스타일을 적용하는 방법에 대해 알아봅니다.
Post Item Image
Vue.js 뽀개기 (5) Computed와 Watch 속성
2019.05.11.
Vue 인스턴스의 핵심 속성인 computed와 watch에 대한 정리글입니다.
Post Item Image
Vue.js 뽀개기 (4) 조건문과 반복문
2019.05.07.
Vue에서는 조건문과 반복문을 어떻게 사용하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (3) Vue로 DOM 조작하기
2019.05.06.
Vue가 DOM을 어떻게 조작하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (3) Vue로 DOM 조작하기
2019.05.06.
Vue가 DOM을 어떻게 조작하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (3) Vue로 DOM 조작하기
2019.05.06.
Vue가 DOM을 어떻게 조작하는지에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (2) Vue 인스턴스와 라이프사이클
2019.05.05.
Vue 인스턴스와 라이프사이클에 대해 정리한 글입니다.
Post Item Image
반직관적으로 생각하기
2019.04.30.
스탠포드대학에서 진행하였던 How to start a startup의 3번째 강의를 요약정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (1) 개발환경 설정
2019.04.30.
Vue 개발환경 설정하는 법에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (1) 개발환경 설정
2019.04.30.
Vue 개발환경 설정하는 법에 대해 정리한 글입니다.
Post Item Image
Vue.js 뽀개기 (1) 개발환경 설정
2019.04.30.
Vue 개발환경 설정하는 법에 대해 정리한 글입니다.
Post Item Image
창업 멤버 구성부터 실행에 옮기기까지
2019.04.24.
스탠포드대학에서 진행하였던 How to start a startup의 2번째 강의를 요약정리한 글입니다.
Thank You for Visiting My Blog, Have a Good Day 😆
© ChansNotes Powered By Gatsby