나는 별일없이 산다 뭐 별다른 걱정 없다

universal code란 클라이언트와 서버에서 모두 동작하는 코드를 의미한다. 플랫폼과 케이스의 api 차이 때문에 우리의 코드는 다른 환경에서 작동시 완전하게 똑같이 작동하지 못 한다. 서버에서의 데이터 반작용성 서버사이드는 클라이언트와 같이 분리된, 신선한 인스턴스를 제공해야한다. 이는 cross-request state pollution을 방지하기 위함이다.  actual rendering process는 구분되어야 하기 때문에, 우리는 데이터를 서버에  pre-fetching 한다. 이는 렌더링이 시작 될 때, 어플리케이션 상태는 이미 resolved 되어있게 됨을 의미한다. 이는 데이터 반작용성이 서버에서 필요하지 않음을 이야기 하고,  기본적으로 disabled 되어 있다. disabling data reactivity는 또한  reactive objects 안의 데이터를 converting 하는데 들어가는 perfomance cost  컴포넌트 라이프사이클 훅 동적 업데이트가 없다면, 모든 사이클 훅 중 beforeCreate와 created만 SSR중 불려집니다. 나머지 훅은 클라이언트 측에서 실행됩니다. beforeCreate 와 created에서 전역 side effect를 생성하지 않도록 해야합니다. 예를 들면 setInterval이 있습니다.  클라이언트에서의 코드는 타이머를 만들고 beforeDestroy나 destroyed에서 타이머가 tear down됩니다.  그러나 SSR에서는  destroy 훅이 없기 때문에 타이머가 영원이 지속됩니다. 이를 방지하기 위해서 side-effect code는 beforeMount 나  mounted로 옮기시기 바랍니다. 특정 플랫폼 api에 접근하기 대부분의 커스텀 디렉티브는 직접적으로 DOM을 조종하고 이는 SSR의 오류를 야기한다.  다음의 ...

설치 npm install vue vue-server-renderer --save Vue 인스턴스 렌더링 // Step 1: Create a Vue instance const Vue = require ( 'vue' ) const app = new Vue ( { template : `<div>Hello World</div>` } ) // Step 2: Create a renderer const renderer = require ( 'vue-server-renderer' ) . createRenderer ( ) // Step 3: Render the Vue instance to HTML renderer . renderToString ( app , ( err , html ) => { if ( err ) throw err console . log ( html ) // => <div data-server-rendered="true">Hello World</div> } ) // in 2.5.0+, returns a Promise if no callback is passed: renderer . renderToString ( app ) . then ( html => { console . log ( html ) } ) . catch ( err => { console . error ( err ) } ) 서버와 통합시키기 npm install express --save const Vue = require ( 'vue' ) const server = require ( 'express' ) ( ) const renderer = require ( 'vue-server-r...

기초 옵션들의 병합! // mixin 객체 생성 var myMixin = { created: function ( ) { this .hello() }, methods: { hello: function ( ) { console .log( 'hello from mixin!' ) } } } // mixin을 사용할 컴포넌트 정의 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!" 옵션 병합 옵션이 병합되는데 규칙이 있다. 1. hook(life cycle)은 mixin(요소) 먼저 component(warrper) 나중 2. 객체 값(methods, components, directives)은 (충돌 시) components로 덮힘 3. 같은 전략이 vue.extend()에서 사용된다. 전역 mixin 1. 사용하지 마라: 전역이라고! 2. Vue.mixin({ ... })으로 선언함. 사용자 정의 옵션 병합 전략 1.  Vue.config.optionMergerStrategies에 메소드를 추가해서 사용하면 된다. 2. vuex를 공부하자. 3. 웬만하면 걍 표준으로 하자.

컴포넌트 는 vue에서 가장 강력한 기능. 코드 캡슐화에 도움이 됨. 전역 등록 vs 지역 등록 전역 등록과 지역 등록은 말 그대로 스코프가 어디까지 인지에 따라 정해진다. 그런데 난 인스턴스가 범위라고 하면 솔직히 둘이 뭐가 다른지 모르겠다. 보통 인스턴스 하나인 경우만 다루어 봤기 때문에 한 인스턴스에만 국한되든, 아니면 전역으로 있든 실질적인 차이는 잘 와 닿지 않는다. DOM 템플릿 경고 -> is 특수 속성 <table>과 같은 태그 밑으로는 커스텀 컴포넌트 태그를 바로 사용 할 수 없다. 따라서 <tr is="someting">과 같이 사용 해야 한다. 솔직히 다 의미 없고 is가 매우 중요해 보인다. 컴포넌트를 지정해 주는 것인데 앞으로도 많이 사용 할 것으로 보인다. data는 반드시 함수 컴포넌트의 data 옵션은 function 문법으로 작성된 함수여야 한다. 어떠한 값이면 실행이 되지 않는다. 함수여야 하는 이유는 재사용 되었을 때 각각의 인스턴스를 따로 만들기 위함이다. 함수는 실행 후 새로운 값을 인스턴스로 가져가지만, 값은 모두 같이 사용하게 되기 때문에 재사용이 불가능해...지지만 실은 이걸 일부러 활용 할 수도?!; 컴포넌트의 작성 props는 아래로 , events 위로. emit events, pass props. props props 옵션을 통해서 명시적으로 전달 동적 props v-bind와  props을 결합. 다수를 결합 할 수 도 있음. 리터럴 vs 동적 솔직히 뭘 어떻게 하든 상관 없을 것 같은데 단방향 데이터 흐름 '' In addition, every time the parent component is updated, all props in the child component will b...

반달 -  작자 미상 차갑게 잘려있었다. 완벽하게 나뉜 달은 잔인했다. 지나가는 젊음이 멈춰섰다. 이제는 가야할 길보다 오왔던 길이 길다. 동그란 시계 위 날카로운 바늘에 찔려있다. 하지만 달은 차오른다. 잠깐의 두려움과 실망을 부끄럽게 하며 밝아온다. 그렇게 달빛이 위로한다.

명령형 프로그래밍 순차적 어떻게 문제를 해결 할지가 주요 관심 튜링 완전 C, 파스칼 선언형 프로그래밍 어떻게 나타내야 할지에 초점 순차적일 필요가 없음 어떤 인터페이스를 만들지 HTML 함수형, 등등이 있다. (명령형이 아닌 것을 선언형이라 부르다?!) 튜링 완전하지 못함?! 프로그래밍에서 꽤나 중요한 개념일 것 같아서 조사하고 따옴 vue.js를 공후바다 컴공의 지식이 필요함을 느낀다. 언어를 공부하려니 구조를 파악하게 되고 그러려니 왜 그 구조가 나왔는지에 대한 목적을 알아야 하고 그러다 보니 그 목적이 무엇을 의미하는지를 알기 위해 컴공 지식이 필요해진다. 아 공부는 끝이 없다.

<div id="app-4">   <ol>     <li v-for="todo in todos">       {{ todo.text }}     </li>   </ol> </div> var app4 = new Vue({   el: '#app-4',   data: {     todos: [       { text: 'JavaScript 배우기' },       { text: 'Vue 배우기' },       { text: '무언가 멋진 것을 만들기' }     ]   } }) 콘솔에서, app4.todos.push({ text: 'New item' })을 입력하십시오. 목록에 새 항목이 추가되어야 합니다. 이상이 vue 가이드에서 이야기하는 반복문이다. 리액트에서는 <div> <ol> { this.props.list.forEach( e => { return ( <li>{e.name}</li> )})} </ol> </div> this.props.list = [ {name: kate}, {name: jason}, {name: tate} ] 이란 식으로 작성한다. 리액트로 공부를 시작한 나에게는 vue의 문법은 꽤 당황스럽다. 분명 리스트로부터 생성되는 dom element는 <li>일텐데 <li>를 감싸는 표식이 아무 것도 없고 오히려 <li> 안에서 데이터를 불러오기?! 때문이다. 물론 <li> 안에 v-for로 바인드가 되어 있어서 '이 <li>는 데이터에 맞추어 반복될 것이다'라...