Phot_o_matic Programming

Vue-cli에서의 SCSS 모듈의 설치와 적용 VueJS에서는 vue-loader 덕분에 Single File Component 구성의 .vue 내에서 style 태그에 lang="scss" 요소만 추가하면 scss를 적용할 수 있다. # scss 관련 모듈 설치 npm install --save-dev node-sass sass-loader 전역 범위에서의 사용 SCSS는 일반적으로 사용 시에 variables 또는 mixin, 함수를 별도의 scss 파일로 분리하여 사용하므로 모든 파일에서 @import를 반복적으로 실행하는 불편함이 있다. vue-cli의 "@"는 "/src"와 같다 반복 작업을 피하기 위해 위의 파일들을 전역에서 사용 가능하게 바꿔줘야 한다. vue-cli의 2.x 버전에서는 w..

Programming/Vue 2019. 8. 30. 17:12

Vuex는 Vue 생태계에 있어서, React의 Redux와 같은 역할을 하는 것인가? - 맞는 것 같다.Vuex는 Redux처럼 Single store인가? - Redux를 안 써서 잘 모르겠다. - single store란 무엇일까? - vuex가 가지는 다수의 모듈들은 어떤 역할을 하는 걸까?event bus를 남용하면 안 되는 이유와 꼭 사용하여야만 하는 경우는 언제인가? - event가 많아지고 컴포넌트가 많아질수록, 컴포넌트 간의 관계가 명확해지지 않아서 디버깅이 힘들어진다.ssh -r 이란 백터널링을 뚫는것인가? - ssh란 뭘까? - 백 터널링이란 뭘까?sdk와 device, django 간의 통신은 http 프로토콜로 이루어졌는가? - http 프로토콜을 사용하는 곳은 어디가 있을까?co..

Programming/Vue 2019. 8. 17. 20:50

Vue에서는 data가 변화될 때 변화된 data를 그대로 사용하여 렌더하는 것 이외에 많은 작업을 할 수 있다. 1. Computed Vuex store 내부에서 저장하고 있는 data의 변화를 getters에 정의한 함수를 통하여 가공해준다. 가공한 data 값은 모든 컴포넌트에서 store를 참조할 수 있기 때문에, 컴포넌트 내에서 computed 라는 명칭의 객체 내부에서 특정 값으로 선언하여 컴포넌트 내부에서 정의한 data처럼 사용할 수 있다. 2. Watch Watch는 특정 data가 변할 시에 원하는 행동을 하는 함수를 선언할 수 있다. Computed가 실제 컴포넌트 내부의 data와 동일시되므로 watch는 data와 computed data 모두에 대하여 감시할 수 있다.

Programming/Vue 2019. 8. 9. 23:28

v-cloak은 수많은 v- 디렉티브 중 하나이다. vuejs에서 렌더링이 완료되기 이전에, 브라우저에서 보이지 않도록 감춰주는 역할을 한다. 감추는 것을 v-if나 v-show 등으로 제어하면 되는데, 왜 굳이 v-cloak라는 것을 별도로 사용하여야 할까? vuejs의 렌더 flow 브라우저 페이지 소스 로드 vuejs 프레임워크 실행 vuejs 처리 완료 vuejs가 처리되는 3번 이전의 단계에서는, {{}} 같은 콧수염 표현식이나 v-if 등을 통하여 조건부 렌더링을 걸어놓았더라도 그대로 화면에 노출이 되어버린다! vue에서 렌더링이 되기 전까지 아주 잠깐 보여지는 것을 막고자 사용하는 것이 v-cloak이다. v-cloak의 적용 방법 감추고자 하는 element에 디렉티브로 기입해준다. vue..

Programming/Vue 2019. 8. 9. 11:47

vue js를 사용하여 SPA를 만들 때 아주 유용한 라이브러리이다. 코어 라이브러리와 함께 공식적으로 지원되고 있다. 설치 npm install vue-router 라우터 Vue의 라우터는 기본적으로 "Root URL"/#/"router" 의 이름 구조로 되어 있다. 만약 #을 없애고 싶을 땐 mode 속성을 아래처럼 추가하면 된다. new VueRouter({ mode: 'history' }) Nested Routers nested router를 이용하면, 라우터를 통하여 화면 이동 시에 지정된 하위 컴포넌트를 표시할 수 있다. nested routing을 상하위 컴포넌트가 부모-자식 컴포넌트 관계의 형태를 가진다. //example.com/ &ltdiv id="app"> &ltrouter-view>..

Programming/Vue 2019. 8. 6. 17:44

Vue components Global or Local Component register 전역 컴포넌트의 등록 Vue.component('global-component', { //컴포넌트의 구성 내용 template: "", ... }) 지역 컴포넌트의 등록 let comp = { //컴포넌트의 구성 내용 template: ""; ... } new Vue({ components: { "my-comp": comp } }) Event Bus 상하위 관계가 아닌 컴포넌트 간 통신을 위해서 사용할 수 있다. Event Bus를 사용하기 위해서는 새로운 뷰 인스턴스를 생성할 때 아래와 같이 한다. socket.io 사용을 해보았다면 이해가 빠를 것이다. Event Bus는 실제로 보여줄 화면과는 관계 없는 별도의..

Programming/Vue 2019. 8. 6. 17:10

vue에서도 react처럼 자식 컴포넌트에게 props를 넘겨줄 수 있다. 자식 컴포넌트에서는 부모가 내려준 props를, 자신의 data로 사용할 수도 있고 조건부 렌더링의 조건으로만 사용할 수도 있을 것이다. 부모 컴포넌트 Parent.vue Passing props by static way &lttemplate> &ltdiv> &ltChild msg="giveprops">&lt/Child> 위아래 모두 같은 값을 다른 표현으로 props 넘겨주고 있다. &ltChild :msg="giveprops">&lt/Child> &lt/div> &lt/template> 부모로부터 변동되지 않는 값을 자식에게 넘겨줄 땐, 정적인 props로 넘겨준다. Passing Dynamic props way &lttemp..

Programming/Vue 2019. 8. 3. 19:08

SPA를 구현하기 위해서는, 해당 프레임워크의 라이프 사이클을 이해하는 것이 필요하다. 아래는 Vue.js의 라이프사이클 다이어그램이다. 간단히 분류하면 총 4가지로 나눌 수 있다. Create Mount Update Destroy Create 가장 먼저 실행된다. 이 단계에서 실행되는 라이프 사이클 훅은 DOM에 컴포넌트들이 추가되기 전이어서, DOM에 접근한다거나 this.$el을 사용할 수 없다. Create 단계에서 호출되는 훅들은 beforeCreate, created이다. 1. beforeCreate 가장 먼저 실행되는 훅이다. data, event($on, $off, $once, $emit), 감시자($watch)의 설정이 되기 이전에 호출되는 훅이다. 2. created data, comp..

Programming/Vue 2019. 8. 1. 22:58