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는 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

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를 사용하여 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