Phot_o_matic Programming

vue.js 프로젝트를 진행하기 이전에, 공통된 문법 및 스타일을 가져가기 위하여 prettier와 eslint 설정 작업을 해 주었다. 처음엔 여러가지 예시들이 섞여 있어서 제대로 된 설정을 할 수가 없었다. eslint config와 prettier config에 대해서 다음과 같이 설정해주었다. settings.json vscode의 세팅에 다음 값을 추가한다. { "editor.formatOnSave": true, "editor.formatOnType": true } NPM으로 다음 라이브러리를 설치한다. npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev .eslintrc 파일 생성 및 설정..

Programming/Mindchain 2019. 8. 5. 22:32

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

공통점 가상 DOM의 활용 반응적이고 조합 가능한 컴포넌트의 제공 코어 라이브러리에만 집중 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리 존재 갱신 React 컴포넌트의 상태가 변경되면, 해당 컴포넌트에서 루트로 시작하여 전체 컴포넌트 하위 트리를 다시 렌더링한다. 불필요한 자식 컴포넌트의 rerender를 피하려면, 어디에서나 shouldComponentUpdate를 구현하고 변경 불가능한 데이터 구조를 사용해야 한다. Vue 컴포넌트의 종속성이 렌더링 중 자동으로 추적되므로 시스템은 실제로 다시 렌더링해야하는 컴포넌트를 정확히 알고 있다. 언어 React 모든 것이 Javascript이다. HTML 구조는 JSX를 통해서 입력되고, CSS 마저도 Javascript에서 하는 추세이다. 신박할 수..

Programming/Vue 2019. 8. 1. 21:48

https://wayhome25.github.io/django/2017/07/25/tsd7-django-query-database/ Django ORM 명령어에 대한 공부를 위하여 참조한 블로그 [ Django - ORM, 쿼리셋, 예외처리 · 초보몽키의 개발공부로그 Promo 모델 중에서 active 메소드로 리턴된 레코드 중에서 name 값이 name으로 시작하거나, description 값 중에 name이 포함되어 있는 레코드를 모두 가져와줘! wayhome25.github.io ](https://wayhome25.github.io/django/2017/07/25/tsd7-django-query-database/) https://americanopeople.tistory.com/316 여러 tool..

Programming/Mindchain 2019. 7. 30. 18:05

check-in dialog flow : latency가 길어서, 자체 엔진을 사용. django(python)을 왜 사용하는가? : AI쪽은 그냥 다 python이다. 근데 웹에서는 또 nodejs를 백엔드로 가져가면 서로 소통이 안 되니까! 그리고 django 개발자가 인력이 더 많다. 템플릿도 처음에 가져간 것으로 계속해서 사용하는 것이 유지보수측면에서도 좋고, 서로 간에 오해가 생길 우려가 적다. Vue js : 이전 거가 vue로 만들어서였다. 하나의 파일에서 관리하기가 쉽다.

Programming/Mindchain 2019. 7. 29. 14:11

Immersive Response 어떤 intent에 대하여, response로 어떤 웹앱으로 연결시킬 수 있도록 url을 주고, state가 어떤 상태인지도 함께 알려줄 수 있다. 이 response는 JSON 형태로 오는 것 같다. 웹 앱에서 해야할 것 1. HTML + Javascript로 구성 2. canvas event callback을 선언한다. 3. canvas Javascript 라이브러리를 initialize 4. 게임의 state를 기반으로 웹 앱을 업데이트하는 로직을 커스텀한다. - 유명한 프레임워크나 라이브러리에 대한 지원 - SPA를 추천한다 - Firebase hosting 지원 웹 앱 - index.html 1. CANVAS STYLESHEET : 참조를 통하여, 게임 실행 시..

Programming/Mindchain 2019. 7. 26. 20:27

Sample Action 샘플 코드 github 주소 화면 상에 보여지는 삼각형을 제어하는 Actions를 처리해보도록 한다. Fulfillment index.js - 처음 앱을 실행하면, 환영 인사와 함께 색깔을 바꾸거나 회전을 멈추고 싶냐는 질문을 한다. - 동시에 웹 앱에 대한 url을 response에 담아서 주고 있다. - 색깔에 대한 intent 처리 코드를 보여준다. - 도형 회전에 대한 intent 처리 코드를 보여준다.웹 앱 - index.html - 여기서는 drawing 할 때 PixiJS를 사용하기 위하여 src를 참조하고 있다. - view라고 id가 붙여진 div가 SPA에 사용될 태그 element이다.웹 앱 - main.js 초기 설정 - 웹 앱을 실행할 때, 초기 화면을 r..

Programming/Mindchain 2019. 7. 26. 17:13