Phot_o_matic Programming

코드스테이츠 기업 협업 프로젝트 부트캠프 코드스테이츠의 주요 커리큘럼 중 하나인 기업 협업 프로젝트를 "마인드로직"과 함께 진행하게 되었다. 마인드로직 마인드로직은 AI 기술을 활용하여, 감성적인 대화가 가능한 음성기반의 AI 연인 챗봇 서비스를 제공하고 있다. 서비스명은 가상 남친과 가상 여친이다 자세한 사항은 링크를 참조하면 될 것 같다. 프로젝트 소개 프로젝트의 주제는 간단명료하였다. Google Assistant 상에서 플레이 가능한 2가지 종류의 단어 게임을 개발하는 것이었다. 세부 조건은 다음과 같다. Google Interactive Canvas API 이용 음성 중심 플레이가 가능한 끝말잇기 / 초성퀴즈 게임 가상 남친 / 가상 여친에 사전 구현된 게임의 고도화 스핀 오프 버전 독립된 앱으..

Programming/Mindchain 2019. 8. 20. 22:30

props는 부모 컴포넌트가 자식 컴포넌트에게 어떠한 data를 내려주는 것을 말한다. 이 때, data는 다양한 형태의 값으로 넘겨줄 수 있다. number, string 같은 primitive 값은 물론이고 function도 넘겨줄 수 있다. props를 활용하면 컴포넌트 간 관계를 명확히 하여, 각 상태에 따라 원하는 동작을 할 수 있게 만들 수 있다. 하지만 props 개수가 많아지고 컴포넌트의 구조가 복잡해질수록 props만으로는 해결이 되지 않는 경우가 발생한다. 간단한 예시를 통하여 생각해보자. 컴포넌트 구조와 같은 모양의 가계도를 그려 보았다. "나"를 기준으로 생각을 해 본다. 나의 state 변화 만년백수이던 "나"는 드디어 취업을 했다. (state === '백수' 에서..

Programming/Mindchain 2019. 8. 20. 21:20

vuex와 store vuex의 store는 전역에서 참조 가능한 state data를 가질 수 있다. 하지만 이 data의 변화를 감지하고, 어떤 컴포넌트에서 rerender를 일으키려면, 해당 전역 data를 참조하여 return 하는 함수가 있어야 한다. 이 함수가 바로 vuex getters의 함수이다. 특정 컴포넌트에서 사용하고자 하는 특정 store data의 getter 함수를, 해당 컴포넌트의 computed에서 실행하여 값을 받아온다. 그러면 store 내부에서 data가 바뀌어도 감지를 하여, 해당 컴포넌트의 rerender 조건으로 사용할 수 있다. 아래의 예시는 store 내부 state 중, mode 객체의 값에 대하여 변동이 있는 경우이다. vuex의 구조 일반적으로 vuex의 ..

Programming/Mindchain 2019. 8. 7. 23:09

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

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