Phot_o_matic Programming

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

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

&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

실제로 보여지는 부분에서, 바뀌는 부분이 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

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