1만 시간의 노력

우선 Vue는 Component 를 많이 사용한다. 아주 기본적일 수 있지만 우선 Component 간의 통신에 대해서 간단하게 설명한다. 먼저 처음에 개념을 잘못 잡고 갈 수 있는 부분이 있어서 간단하게 설명한다. [ 예시 ] 화면에 UI가 저렇게 구현되어 있다고 하자. 저기서 헤더는 Component로 구현했다면 코드는 이렇게 구성된다. // page.vue 페이지 import TheHeader "@/component/Header.vue" export default{ component : { "the-header" : TheHeader, }, method:{ callPageMethod(){ console.log("저는 페이지 메소드 입니다.") } } } // TheHeader.vue 헤더 expor..

기본적으로 select 는 이렇게 쓴다. 보기를 선택하세요 프라우드먼 YGX Hook 라치카 코카N버터 웨이비 원트 이렇게 하면 보기를 선택하세요가 보여지고 하단에 셀렉트 박스가 보여지는데, vue에서는 v-model을 사용한다. 따라서 v-model을 사용하게 되면 이런 코드가 된다. 보기를 선택하세요 프라우드먼 YGX Hook 라치카 코카N버터 웨이비 원트 이렇게 v-model을 주는데, 그렇다면 우리는 어떻게 default value를 설정할 수 있는가? v-model을 사용하면 checked와 selected 속성을 무시한다! 따라서 우리는 초기데이터를 셋팅해 주어서 default value를 셋팅해야 한다. 보기를 선택하세요 프라우드먼 YGX Hook 라치카 코카N버터 웨이비 원트 {{ SWF...

v-show와 v-if는 특정한 영역을 보여줄것인가 보여주지 않을 것인가에 대한 기능으로 사용된다. 다만 초반에는 v-show와 v-if가 비슷한 것으로 알려져 있는데, 이는 조금 다르다. v-if의 경우에는 조건이 맞을 경우에만 렌더링을 한다. v-show의 경우에는 조건이 맞지 않아도 우선 렌더링을 하고 display 옵션을 none으로 처리한다. 따라서 v-if의 경우 렌더링이 무거운 화면일때 주로 사용하고 v-show의 경우 dialog 처럼 on/off가 잦은 화면이나 뷰에서 사용한다.

기본적으로 Vuex를 사용하면 mutation을 이용한 action.js 파일에서 commit을 한다. 즉, API를 이용해 받은 response값을 commit으로 저장하여 getter를 호출해 가져오는 형태로 사용한다. 하지만 가끔 *.vue 파일에서 특정한 값을 저장해서 getter로 손쉽게 불러와야 하는 경우가 발생한다. 이때. 우리는 아래와 같이 쓴다 this.$store.commit("setData", this.data); 이미 main.js에 store가 선언되어 있고 setData라는 mutations을 사용하는 방법이다. 위 코드를 사용하면 setData 를 통해서 this.data 값이 미리 선언된 글로벌한(?) 변수에 저장이 되고 이를 getter를 이용해 가져다 쓸수 있게 되는 것...

Vue를 이용해서 Scroll Event를 쉽게 처리할 수 있다. 기존 자바스크립트를 이용하면 window.addEventListener ... 등의 코드를 이용해서 사용한다. Vue를 최대한 활용해서 적용하였다. ....... 간단하게 설명하면. 1. v-container 에 id 값을 준다. - 이렇게 되면 v-container 태그 안에 있는 내용이 스크롤링 된다. 2. v-scorll:#main="handleScroll" 코드로 main id값을 가진 태그에서 scroll 이벤트가 발생하면 handleScroll method가 실행되도록 한다. 3. data 영역에 scrollPostion을 선언한다. 4. handleScroll(e) method를 통해 e.target.scrollTop 값을 s..