Phot_o_matic Programming

구글 어시스턴트(Google Assistant)는 다양한 행동과 통합을 제공하는 개인 음성 비서다. 이런 구글 어시스턴트를 사용하여 어떠한 앱을 실행시킬 때에, 캔버스를 이용하여 시각적 다양화를 도모할 수 있다. 목표 interactive canvas란? interactive canvas가 어떻게 움직이는가? interactive canvas를 이용하여 액션(action)을 만들기 intro I/O'19에서 구글은 Interactive canvas라고 하는 Assistant-based-framework를 발표했다. 이것은 개발자들이 스마트 디스플레이에 터치 입력과, 음성, 비주얼적인 것이 제공되는 풀스크린 앱을 만들 수 있도록 해주었다. 한동안은 Actions를 이용한 스마트 디스플레이용 게임이 ..

Programming/Mindchain 2019. 7. 26. 16:51

&lttemplate> &ltdiv> &lth1>{{result}}&lt/h1> &ltform @submit.prevent="onSubmitForm"> &ltinput ref="answer" minlength="4" maxlength="4" v-model="value" /> &ltbutton type="submit">입력&lt/button> &lt/form> &ltdiv>시도: {{tries.length}}&lt/div> &ltul> &ltli v-for="t in tries" :key="t.try"> &ltdiv>{{t.try}}&lt/div> &ltdiv>{{t.result}}&lt/div> &lt/li> &lt/ul> &lt/div> &lt/template> &ltscript> const getNu..

Programming/Vue 2019. 7. 25. 22:48

v-땡땡 이후 코드는 javascript라고 생각하면 쓰면 된다. 여기선 v-for라는 것으로 반복문을 사용하려 한다. v-on:은 @으로 대체 가능하다. @event.prevent 로 preventDefault() 대체 가능하다. 변경사항이 생길 때 마다 build를 새로 해줘야 하는 번거로움이 있다. 이를 해소하기 위해서는 &lttemplate> &ltdiv> &lth1>{{result}}&lt/h1> &ltform v-on:submit="onSubmitForm"> &ltinput ref="answer" minlength="4" maxlength="4" v-model="value /> &ltbutton type="submit">입력&lt/buton> &lt/form> &ltdiv>시도: {{tries..

Programming/Vue 2019. 7. 25. 21:03

webpack은 지저분하게 많은 script src를 사용하거나, src 순서에 대해서 많은 고민들을 하지 않고자 할 때 사용한다. 하나의 bundle로써 모든 script들을 묶어주고, 이를 html에 src로 제공해주기만 하면 된다. 설치 npm i webpack webpack-cli -D -D는 --save-dev와 같은 의미이다. pacakage.json에 추가되었는지 확인 packing을 용이하게 하기 위하여, package.json의 scripts에 build: 'webpack'과 같이 바로 실행 가능하게 명령어를 추가하자. ex) npm run build => webpack이 실행된다 webpack.config.js webpack 설정을 하는 파일. 크게 네 가지 부분을 설정...

Programming/Vue 2019. 7. 25. 13:59

props react를 떠올려 보며 props를 이해해보자. props를 통해 특정 컴포넌트로 원하는 값을 주어지게 할 때 사용한다. kebop-case HTML 태그 내에서 props 값을 지정할 때에는 이름을 kebop-case로 작성해야 한다. script 내에서 props를 받거나 component 명명할 때에는, camelCase로 작성해도 자동으로 인식한다. props 받기 props는 컴포넌트 생성자 내에서 props: [props 이름]으로 받는다. webpack이 왜 필요한데? html 내에서 수많은 script src를 참고하는 경우가 있을텐데, 이 때에 보기도 어려울 뿐더러, 작성 순서도 고려사항이기 때문에 사용하는 데에 어려움이 있다. webpack을 사용하여 이런 문제를 해결해본다..

Programming/Mindchain 2019. 7. 25. 13:02

필요성 v-on, v-model 등의 삽입이 이뤄진 태그들을 재사용하고자 할 때에 유용하다. 기존에 작성한 태그의 코드를 그대로 복사하여 사용하게 되면, 모두 같은 data 객체를 공유하므로, 각각의 복사된 태그별로 data 내부 값을 새롭게 지정해주어야 한다. 그럼 또 각 data에 붙어있던 methods도 각각 새로 지정해줘야만 한다. 결국 복사된 태그 갯수만큼 data 객체, methods 크기가 불어나게 되어버리는 것이다! 코드의 중복은 지양해야한다 컴포넌트 (Vue.component('이름')) 반복되는 코드를 가진 태그를 묶는 최소단위. template, data, methods로 구성 template 원하는 컴포넌트의 태그 형태를 template에 담아 준다. react와 마찬..

Programming/Mindchain 2019. 7. 25. 11:31

실제로 보여지는 부분에서, 바뀌는 부분이 data 객체 내부에 값으로써 관리되어야 한다. //html 파일 내부에서 진행 &ltbody> &ltdiv id="root"> &ltdiv>{{word}}&lt/div> &ltform v-on:submit="onSubmitForm"> &ltinput type="text" v-model="value" ref="answer"> &ltbutton type="submit">입력&lt/button> &lt/form> &ltdiv>{{result}}&lt/div> &lt/div> &ltscript> const app = new Vue({ el: '#root', data: { word: '생우', result: '', value: '' }, methods: { onSubmi..

Programming/Vue 2019. 7. 25. 10:54

보간법과 v-model 글에 이어, 구구단 게임을 할 수 있는 웹 페이지를 마저 완성시켜본다. v-on:이벤트명 => v-on: 을 통해서 어떤 이벤트를 다룰 수 있다. 일종의 eventListener라고 생각하자. e.preventDefault() => 특정 이벤트에서 페이지가 새로고침 되지 않게 하기 위함이다. 특히 SPA에서 중요. ref로 태그 네이밍 후 커서 위치를 focus로 input에 옮겨주기. ref='이름'으로 특정 태그에 이름을 지어줄 수 있다. $refs.이름으로 접근이 가능해진다 &ltdiv id="root"> &ltdiv> {{first}} 곱하기 {{second}}(은)는?&lt/div> &ltform v-on:submit="onSubmitForm"> &ltinp..

Programming/Vue 2019. 7. 25. 09:47