코드 땜장이

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 1. 시맨틱 슈거의 부재  vue를 공부해본 사람이라면 v-model이라는 키워드를 들어보았을 것이다. v-model="foo"은 :value="foo" @input="foo = $event" 이와 같이 풀어 쓸수 있다는 것도 알 것이다. react의 바인딩에는 v-model과 같은 시멘틱 슈거가 존재하지 않는다.    무슨말이냐 하면 아래와 같은 코드를 사용해야 한다는 것이다. <input type="text" value={foo} onChange={(event) => setFoo(event.target.value)}> 2. 데이터 타입 - numeric  아래의 코드를 보자. setA를 호출 할 때에 event.target.value를 숫자로 형변환 시키는 것을 볼수 있다.   당연하게도 html의 사용자 입력 가능한 값들은 숫자라고 하더라도 문자열이라는 것을 알 것이다. vue의 경우에는 .number라는 키워드를 이용할 수 있지만... react는 처리가 아래처럼 해야 할것 같다. < input type = " number " value = {a} onChange = {(event) => setA ( + event . target . value )} min = " 0 " max = " 10 " /> 3. 데이터 타입 - reference < select value = {selected} onChan

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 느낌점은 아래와 같다.  오늘은 svelte가 이벤트를 핸들링 하는 방식중에 눈에 띄는점이 두가지가 보였다. 1. react에서 자식이 이벤트를 발생 시키는 방법은 없다. 부모가 자식에게 함수를 props로 전달하는 것을 자식이 적절한 순간에 실행 시켜주는 것으로 자식이 부모의 리스너를 해소 시켜 줄 수 있다. 코드는 아래와 같다. vue에서는 아래와 같은 코드를 좀 안좋게 보는 경향이 있고, 아래처럼 하지 않아도 된다. 위와 같은 방식을 사용 할 때에 자식 컴포넌트에 이벤트 리스너를 기본값을 생성 하여 함수를 전달 받지 않았을 때의 처리가 필수 처럼 보인다.  자 그러면 뷰에서는 어떻게 해야 할까요?   2. 아쉬운 점은 once키워드에 대한 부재이다. 한번만 실행 시키고 싶은 경우 addEventlistner의 once옵션을 이용 할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener 참 불편한 코드이다... 한번만 실행 되는 함수일 뿐인데...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다. 느낌점은 아래와 같다.  1. svelte에서 지원하는 Await block은 react에서도 지원 하지 않는다... 편해보이는데. 게다가 v-if, v-for와 같은 키워드를 지원 하지 않기 때문에 불편하다... 함수를 잘 만들어서 사용 해야겠다는 생각이 든다.  2. props사용 방식은 너무 좋은 경험이었다. 생성자 함수에 파라미터로 받을 줄은... 아주 자연스러운 형태여서 이해가 빠른 부분이긴 했지만, 초기화는 왜 defaultProps을 이용해야 했는지 별로였다.  3. v-if, v-for의 부제는 너무 불편했다. 또한 인라인 스타일은 왜 {{}} <- 어째서 두번 사용 해야 하는지... 불편해보였다. 뭐 다른 용도가 있겠지...    위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 react(functional component)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 Vue vs Svelte 간단하게 문법만 비교해보기 포스팅을 작성하면서 사용한 코드이다. React 공식 문서를 보는것이 좋긴 하지만 좀 와닿지 않는 부분이 있기도 하고 Functional Component기반으로 예제가 공식문서에 찾기 힘들어서 예전 예제로 작성해보려고 한다.  위의 코드를 작성하면서 JSX표현법이 꽤나 어색하다는 생각이 너무 들었다. 뭐 이부분은 차차 익숙해져나가면 괜찮은 부분이기에 패스하도록 하겠다. 하지만 아쉽게도 react도 루트엘리먼트는 하나여야 한다는 점에서 좀 아쉬움이 들었다.  svelte가 꽤나 react 스럽다라고 생각이 드는 부분이 많다. 그도 그럴것이 svelte와 마찬가지로 data, watch, methods, computed 등등 코드에는 불필요한 선언(?)들이 필요 없어서 코드들이 간결해짐이 있다.  따라서 첫인상에 대한 아래의 평도 Vue vs Svelte와 같은 평가(?)를 할 수 밖엔 없을 듯 하다.  react vs (vue, svelte)의 차이중에 지금 눈에 띄는 것은 Hook 정도인가? 싶긴 하다.  vue, svelte 둘다 변수를 선언하고 템플릿에 바인딩 되어있으면 값의 변경 반영이 된지만, react hook을 이용하면 useState를 사용해야 처리가 되는것은 개발자가 신경 써야 하는 부분이 생긴것 처럼 보인다.  또한 계산된 속성, watch를 처리할 수 있는 useMemo의 경우에도 좀 특이했다. useMemo의 두번째 인자로 어떤 값들의 변화에 의해 해당 평가를 처리할 것인지 의존할 인자를 정의 해주어야 한다. 이부분도 개발자가 신경 써야 하는 부분이 생긴것 처럼 보인다.  뭐 물론 신경쓸수 있는 부분이 더 늘어남으로써 개발자가 직접 최적화 할 수 있는 부분이 더 많아 진것으로 볼수도 있겠지만...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.

 많은 개발자들이 label을 이용하거나 라벨을 이용하는 것처럼 여러가지 지원을 해준다. 하지만 몇몇 개발자 분들은!!!!! 사소한 부분을 신경을 쓰지 않기도 한다. 뭐 물론 아직 많이 사용하지 않는 혹은 아직 사용성에 신경쓸정도가 되지 않을 정도로 기능 우선적 개발이 필요한 경우가 있을 수 있지만... 몇몇 서비스의 경우 이미 오래되었음에도 불구하고, 신경을 안쓰는 곳이 있다.  웹을 공부를 하셨던 분이라면 html을 공부를 할 때, input과 관련 하여 label을 공부하게 될 것이다. 하지만 도덕 공부를 해도 쓰레기를 바닥에 버리는 것처럼 , 잘 신경 쓰지 않는 것 같다. 위의 코드를 보면 사용법은 간단하다. <input type ="radio" id ="html" name ="fav_language" value ="HTML" /> <label for ="html" > HTML </label> for와 id를 맞춰주기만 하면 label의 클릭이 input을 클릭한것처럼 처리가 된다. <label> <input type ="radio" name ="fav_language" value ="HTML" /> HTML </label> 혹은 for와 id를 제공하지 않고 label안쪽으로 input을 위치 시켜주어도 된다. <input type ="radio" id ="html" name ="fav_language" value ="HTML" /> <label for ="html" > HTML </label> 참고로 조심하여야 하는것이 같은 id와 for를 이용하면 안되는 것이다. 만약에 label에 for와 id를 사용 하는