Phot_o_matic Programming

기존에 존재하는 AI 단어 데이터베이스를 이용하여 제공되던 초성퀴즈와 끝말잇기 게임의 스핀 오프 버전을 만드는 것이 이번 프로젝트의 주제이다. 스핀 오프로 별도의 게임 앱을 만드는 것이므로, UI 디자인부터 새롭게 개편하게 되었는데, 이에 따라 디자인 시안을 구축하여 전문 디자이너와 미팅을 하는 과정이 선결되어야만 했다. 개발자 측에서 생각하고 있는 UI의 흐름과 필수적인 요소라고 생각되는 디자인적 부분을 제시하기 위하여 나름대로 시안을 짜서 회의를 소집하도록 한다. 유첨의 시안은 초안이므로, 디자이너 미팅 이후 얼마든지 변경될 가능성이 있다. 하지만 '게임'이라는 주제로 개발을 처음 해보는 입장에서, 이런 UI 디자인 및 흐름을 생각해보고 구축하였다는 것에는 특별히 의의를 두어도 될 것이라고 생각했다.

Programming/Mindchain 2019. 7. 24. 22:59

intro에서 기록한 내용을 간단히 되짚어보면, Vue 생성자 내에서 data라는 kew 값에는, 무언가 변하게 될 값이라고 예상되는 것들을 정의하였다. 화면 상에서 유동적으로 변화가 생기는 부분은, data 중심적으로 구조를 설계하여 관리해야 하는 것이다. 태그 안에 {{변수명 in data 객체}}의 형태로 data의 특정 값을 부를 수 있다 {{}} 내부에서 javascript 사칙연산을 실행할 수 있다 methods 내에서는 this로 data에 접근 가능하다 input과 data 내 값을 이어주는 건 v-model로 ex) data : {value: ''}일 떄, v-model = 'value'로 하면 input 값이 data의 value에 접근(삽입) 가능 &ltd..

Programming/Vue 2019. 7. 24. 22:51

설치 => npm install vue 기본적인 개념은 react와 크게 다르지 않다. HTML의 어떠한 특정 태그 안에서, SPA, 즉 SINGLE PAGE APPLICATION으로 사용하기 위하여, 페이지는 하나이지만 내용은 바뀔 수 있도록 한다. data 중심의 사고를 해야 한다! v-라는 접두어로 주로 사용한다 el, data, methods라는 명명은 건드리면 안 된다!!! el : rerender를 통해 다루고자 하는 태그를 선택하는 부분 data : react의 state 같은 개념으로, 어떤 rerender를 할 지에 대한 기준값을 나타내는 곳 methods : data를 건드릴 수 있는 함수를 정의하는 곳 ex) /* HTML 코드 내에서 특정 id 값을 가진 div 태그 내부를 사용하고..

Programming/Vue 2019. 7. 24. 22:29

특징 Django를 통하면 여러 특징을 가지는 소프트웨어 개발에 도움이 된다. Complete(완결성) : 개발자가 원하는 것이 어떤 결과물의 일부라고 여기어, 도달하려 하는 목표점이 같고, 이 덕에 일관된 디자인 룰을 적용하여 광범위한 최신 문서를 제공한다. Versatile(다용성) : 문서관리시스템이나 Wiki, SNS, 뉴스 등 다양한 종류의 웹 사이트를 빌드하는데에 사용되어 왔다. 또한 어떤 클라이언트단의 프레임워크와도 협업이 가능하다. HTML, JSON, XML 등 대부분의 형식으로 컨텐츠 전송이 가능하다. Secure(보안) : 개발할 때 고려해야 하는 보안 문제에 대하여 도움을 준다. 유저의 계정과 비밀번호를 관리하는 데에 있어 안전한 방법을 제공해준다. 흔히 할 수 있는 개발 상의 실수..

Programming/Python 2019. 7. 23. 23:45

dictionary는 반복문에서 순서대로 불러오지 않는다!!! 순서가 중요하면 list를 사용하자!!! for in dictionary.keys() | for in dictionary.values() ages = {'Tod':35, 'Jane':21, 'John': 27} for key in ages.keys(): print(key) # 'Tod', 'Jane', 'John' for value in ages.values(): print(value) # 35, 21, 27 for key in ages.keys(): print('{}의 나이는 {}입니다').format(key, ages[key]) for key in ages: print('{}의 나이는 {}입니다').format(key, ages[key])..

Programming/Python 2019. 7. 22. 18:52

구글 어시스턴트는 actions과 intgreation의 hosting을 제공한다. Interactive Canvas란? 구글 어시스턴트에 빌드되어 있는 프레임워크이다. 개발자들이 대화 actions에 대하여 시각적인 경험을 추가할 수 있도록 해준다. 이 visual layer는 웹 앱으로 사용자와의 대화의 응답으로써 보내진다. 어떨 때 사용하면 될까? 풀스크린 화면을 만들 때 커스텀 애니메이션과 이동을 구현할 때 커스텀 레이아웃과 GUI를 만들 때 데이터 시각화 비디오 플레이백 실행 작동하는 방법 커스텀 Conversational Action 웹 앱 Assistant Canvas ImmersiveResponse 1) 커스텀 Conversational Action -> 대화 인터페이스를 사용하여 사용자의..

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

PIP Python Package Index(PyPI) 저장소로부터 파이썬 패키지를 받아 설치하는 패키지 관리 도구. PyPI는 서드파이 파이썬 오픈소스 패키지들을 위한 저장소이다. Node.js의 npm과 같은 개념이라고 생각하면 된다. 기초적인 패키지 매니저인 easy_install이 파이썬 설치시 자동 설치된다. 하지만 pip를 사용하는 것이 훨씬 유용하므로 pip를 이용하는 것이 일반적이다. easy_install pip # Django를 설치하여보자 pip install django # global install Virtualenv 여러 개의 파이썬 프로젝트가 하나의 컴퓨터에서 충돌을 일으키지 않고 존재할 수 있게 도와주는 것이다. 어떤 문제 해결을 위하여 사용하는가? Virtualenv가 없을..

Programming/Python 2019. 7. 22. 16:08

그리기를 더욱 매력적으로 만들 수 있는 캔버스 옵션을 살펴볼 차례이다. 다른 색상, 선 스타일, 그라디언트, 패턴, 그림자 등을 추가할 수 있다. 도형변수.fillStyle = color -> 도형을 채우는 색을 설정 도형변수.strokeStyle = color -> 도형의 윤곽선 색을 설정 fillStyle 예시 ex) &lt!DOCTYPE html> &lthtml> &lthead> &ltmeta charset="utf-8"/> &ltscript type="application/javascript"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i &lt 6; i++){ for..

Programming/Mindchain 2019. 7. 22. 15:25