코드 땜장이

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 포스팅을 작성하면서 사용한 코드이다.  React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.  다른 프레임워크들에 비해 react는 꽤나 불편한 편이다. class를 바인딩 하기위해서는 className에 문자열로 바인딩 해야 하기 때문이다. 다른 프레임워크는 Object 혹은 array로 여러 조건들을 처리 할 수 있기 때문이다.  실제로 프로젝트를 진행 한다면 Object혹은 Array를 문자열로 변경 해주는 함수를 제작하여 사용해야 할 것 같다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 포스팅을 작성하면서 사용한 코드이다.  React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.  context, useReducer를 이용하여 vue의 store를 모사해보았다. context를 사용 할때 마다 내가 정의한 context와 useContext를 import해야 되는 것을 꽤나 불편함을 느꼇다.  하지만 그 외에 mutation정의나 action정의에 대해서는 일반적인 함수를 구현 하듯이 처리하면 되어서 그 점은 좀 편할 수 도 있다고 생각 되었다. 무슨 말이냐면, vue, svelte와 같이 store를 사용 하기 위하여 더 특별한 구조를 학습 하지 않아도 된다는 뜻이다.  react를 점점 사용 할 수록 느끼는 점은 코드작성에 편의는 없지만, 학습에 대해서는 크게 러닝커브가 없는 것처럼 보이기도하다. => 코드가 일관적이다.  store를 정의 하는 것 조차도 컴포넌트 하나 custom hook하나 만들어 내는 느낌이다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 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)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 시맨틱 슈거의 부재  이건 전에도 언급 된 내용이지만... 또 한번 말해보자면 select multiple인 경우에 문제가... 크다. 아래의 코드만잠깐 보고 넘어가도록 하자. < select multiple value = {flavours} onChange = {onChangeFlavours} > { menu . map ((flavour) => { return ( < option key = {flavour} value = {flavour} > {flavour} </ option > ); } )} </ select > const [flavours, setFlavours] = useState ([ " Mint choc chip " ]); function onChangeFlavours (event) { const newFlavours = []; const options = event . target . options ; for ( let i = 0 ; i < options .length; i++) { const option = options[i]; if ( option . selected ) { newFlavours . push ( option . value ); } } setFlavours (newFlavours);