코드 땜장이

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.  리액트 hook을 이용하여 라이프 사이클을 한번 훑어 보았다.  라이프사이클의 핸들링은 useEffect의 두번째 인자값에 따라 결정이 되고, 대략 아래와 유사하다. useEffect ( function updated () { return function beforeUpdated () {} } ) useEffect ( function mounted () { return function beforeUnmount () {} } , [])  svelte와 마찬가지로 라이프사이클 핸들러 함수의 Vue vs Svelte 간단하게 문법만 비교해보기 5 ( 라이프사이클 )  리턴함수를 이용하여 반대 상황에서의 처리가 가능한것은 좋다고 생각 된다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.   아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuejs.org/v2/api/#mounted https://vuejs.org/v2/api/#beforeDestroy https://vuejs.org/v2/api/#mixins https://vuejs.org/v2/api/#beforeUpdate https://vuejs.org/v2/api/#updated https://vuejs.org/v2/api/#Vue-nextTick-callback-context  이번 리뷰가 라이프사이클이지만.... mixin이라는 녀석이 svelte에서는 신기하게 구현 되어있는 것을 볼 수 있었다.    위의 그림을 보면, onDestroy에 있는 예제 이지만, utils.js파일이고 해당 코드에서 라이프 사이클에도 관여할 수 있고, 안쪽에 있는 함수 data등등을 노출 시켜 줄 수 있다.   이건 vue관점에서 보면 mixin으로 볼 수 있을 것이다. 저 안에 onDestroy가 어떻게 동작 하는지 한번 뜯어보고 싶긴 하다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.