코드 땜장이

 지난 시간까지 만든 프로그램을 매번 node를 통하여 실행하게 만들 수는 없다. 다른 유저들에게 배포용도라면 더욱더! 그래서 이번 시간에는 electron-builder를 사용하여 설치를 할 수 있는 파일을 만들 수 있게 할 것이다. 기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다. 빌드를 위한 일렉트론 설정! npm i electron-builder --save-dev npm i cross-env --save-dev 일단 위의 명령어를 사용하여 필요한 노드 패키지들을 설치하자! 위의 패키지들을 간단하게 설명하면 electron-builder는 말그대로 electron 프레임워크로 만들어진 프로그램을 빌드해주는 역할을 해주는 패키지이다. cross-env는 환경 변수를 수정해주는 역할을 해준다. 이게 왜 필요한 이유는 아래에 코드를 보면서 설명 하겠다. package.json을 아래와 같이 빨간색으로 표현 된 부분을 추가해주자. { "name" : "my-electron-app" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "start" : " cross-env NODE_ENV=dev electron ." , "dist": "electron-builder" } , "keywords" : [] , "author" : "" , "license" : "ISC" , "devDependencies" : { "cross-env": ...

Vue 개발환경 준비  일단 이 포스트에서는 2.6.14버전을 사용 할 것입니다. 아래를 그대로 진행 해보도록 하자 npm install -g vue-cli vue init webpack my-project 위의 옵션은 입맛대로 하면 되긴 하다. cd my-project npm i && npm run dev Electron 개발환경 준비 index.js const { app , BrowserWindow} = require( 'electron' ) const path = require( 'path' ) const createWindow = () => { const win = new BrowserWindow({ width : 800 , height : 600 }) win.loadURL('http://localhost:8080') } app . whenReady (). then (() => { createWindow () }) win.loadFile('index.html') => win.loadURL('http://localhost:8080') 위 처럼 코드를 바꾸고 npm run start를 해봅시다 자 위와 같이 나왔다면 성공 입니다. 개발환경은 이제 설정이 끝났습니다. Electron api 개발 자 이제 프런트엔드에서 사용 할 수 있는 api를 개발을 해봅시다. 간단하게 파일 읽고 쓰기 를 해보도록 합시다. index.js를 아래와 같이 셋팅 합니다. 해당 window가 로드 될 때 미리 로드될 스크립트를 지정 하는 것입니다. const { app , BrowserWindow} = require( 'electron' ) const path = require( 'path' ) const createWindow = () => { const win = new BrowserWindow({ wi...

 기본적인 학습 예제는 끝났다고 판단이 되었다. 이번화부터는 간단하게 예제 파일들을 작성 해볼 것이다.  어떤 프로젝트를 하던지 날짜를 입력 받는 행위는 언제든지 하는 것 같다.  따라서 데이트피커를 작성 해보았다.

 위의 코드는 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);...

위의 코드는 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스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다....

 기본적인 학습 예제는 끝났다고 판단이 되었다. 이번에 화부터는 간단하게 예제 파일들을 작성 해볼 것이다.  어떤 프로젝트를 하던지 날짜를 입력 받는 행위는 언제든지 하는 것 같다.  따라서 데이트피커를 작성 해보겠다.  아직 문법들이 익숙하지도 않고, 생각 해보니 scss 설정도 할 줄 모른다. 여러가지 환경 구성 먼저 익숙해져야 할 필요성이 있고,  또한 computed가 방식이 vue와 svelte가 좀 다르다보니, 전혀 반응이 없는등... 아직 깊은 연구가 더 필요 해 보인다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuejs.org/v2/api/#v-slot https://vuejs.org/v2/api/#slot  이번 예제도 딱히 이렇다할 만한 내용은 확인이 불가능 하였다. 어떤게 더 좋다 나쁘다 이런 감정조차 없는 그저.... 아 vue랑 svelte가 이정도 문법 차이가 있구나 정도랄까요...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  참고로 MOTION, TRANSITIONS, ANIMATIONS, EASING, SVG, ACTIONS의 예제는 건너 뛰었습니다. https://vuejs.org/v2/guide/class-and-style.html  이번 예제는 딱히 이렇다할 만한 내용은 확인이 불가능 하였다. 어떤게 더 좋다 나쁘다 이런 감정조차 없는 그저.... 아 vue랑 svelte가 이정도 문법 차이가 있구나 정도랄까요...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuex.vuejs.org/kr/guide/state.html https://vuex.vuejs.org/kr/guide/getters.html https://vuex.vuejs.org/kr/guide/mutations.html https://vuex.vuejs.org/kr/guide/actions.html  위의 가이드를 보면 vue는 상태에 가해지는 행위별로 나누어서 관리하는 것을 볼 수 있다.  하지만, svelte에서는 어떤 상태인지에 대해서 관리가 중접적으로 이루어지는 것 같다. 무슨말이 냐면, 읽기전용의 상태, 읽기쓰기가능한 상태, 다른상태들과의 관계가 있는 상태.  위의 두가지 방식 중에 뭐가 더 편할지는 아직은 판단이 불가능하다. svelte의 경우에는 중간 중간에 읽기전용 이였는데, 쓰기가 되어야 하는 경우도 있을 것이고, vue의 경우에는 어떤 상태들이 mutaion이 제공하고 있는지 확인 하기 꽤 귀찮기 때문이다.  하지만 svelte에서는 해당 상태를 참고하지 않게 되었을 때, 처리를 추가적으로 해줄 수 있는데, 이게 라이프사이클에서 mount함수의 리턴값이 unmount때 실행 되는 함수가 되듯이 처리하였다. 꽤나 신경 쓴것을 느낄 수가 있었다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

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

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  아... 이번건 거의 매칭 되는 것이 없다 그나마 알아둬야 할 것이 아래와 같다 https://vuejs.org/v2/api/#ref https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model  오늘은 svelte가 데이터를 바인딩 함에 있어서 엘리먼트 속성을 다루는 것에 대해서 편안함을 느꼇다.  1. duration, currentTime [그림 - 1]  duration과 currentTime을 바인딩 해둔 것을 볼 수 있을 것 이다. 하지만 이건 duration의 경우에는 video태그가 준비가 완료 되었을 때 확인이 가능한 값이다. 즉 비디오 소스를 읽어서 이 영상이 몇초짜리 영상입니다. 이때 발생하는 것이지 해당 태그가 렌더링(mounted)되었다고 읽을 수 있는 값이 아니다.  하지만 svelte는 읽어준다...  currentTime의 경우에는 해당 video의 위치를 변경할 수 있다. 예를 들어 5초 앞으로 뒤로 같은 처리를 할 수있게 된다는 것이다. 이게 양방향 바인딩이 된다니...  2. clientWidth, clientHeight [그림 - 2]  이것도 참 골때린다 clientWidth와 clientHeight를 렌더링 시점에서 크기를 확인 하는 것이 아니라 변경까지도 감지해준다.  일반적으로 다른 프레임워크를 사용 하더라도, 첫 로딩시는 커녕 변경을 감지하기위해서는 resizeObserver와 같은 외장/내장 함수를 사용해야 한다.  그 외의 내용은 문법적인 차이라서 굳이 평을 하지 않겠지만, 위의 녀석들은 필요할때가 많은데, 코드가 지저분해지기 쉬운 녀석들이라 아주.....

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  오늘은 바인딩에 대해서 튜토리얼을 진행했다.  해당 튜토리얼은 양이 너무 많아서 반절정도 끊어서 진행 하도록 하였다.   https://kr.vuejs.org/v2/api/index.html#v-model   https://vuejs.org/v2/guide/forms.html#Text   https://vuejs.org/v2/guide/forms.html#Checkbox   https://vuejs.org/v2/guide/forms.html#Multiline-text   https://vuejs.org/v2/guide/forms.html#Select  바인딩 요소가 꽤 많다. 으으으으.....  그래서 좀 짤라서 하겟다 다음주에는 아주 많은 내용이다.. 저런  오늘은 svelte가 데이터를 바인딩 함에 있어서 그리고 외부라이브러리 취급 방식에 대해서 좀 얘기 해볼것이다.  1. numeric [그림 - 1] [그림 - 2]  위의 그림 - 1의 결과를 보면 처음에 설정해둔 a, b의 값이 문자열이기에 a + b => ab로 표현이 되어있다. 하지만, input들을 변경 후에 a + b => a + b 로 표현 되는 것을 볼 수 있다.  vue에서는 input의 이벤트를 숫자로 받을 것인지에 대한 키워드가 있다. v-model.number이런 방식이다.  일단 svelte에서는 type에 따라서 바인딩 되는 값의 타입이 고정이 되는 것 같아서 아쉽다.  2. group [그림 - 3]  그림 - 3에서 보면 checkbox와 radio가 서로 연관 되어있음을 표현 하기 위하여 bind:group이란 키워드를 써야 하지만 한번 제거...

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  오늘은 이벤트에 대해서 튜토리얼을 진행했다.   https://kr.vuejs.org/v2/guide/events.html   https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events  위의 내용만 같이 비교해봐도 될 정도이니 양이 그렇게 많지는 않다.  오늘은 svelte가 이벤트를 핸들링 하는 방식중에 눈에 띄는점이 두가지가 보였다. 1. 자연스러운 이벤트 버블  자식컴포넌트에서의 이벤트를 부모컴포넌트에게 전달하는 경우는 종종 있다.  => 자식 이벤트를 본인을 걸쳐서 부모에게 이벤트를 전달하는 경우 위의 경우에서 자신이 해당 이벤트를 소비 할거라면 이벤트 리스너를 걸고, 부모에게만 전달 할 것이라면 위처럼만 작성하면 된다. 뭐 물론 둘다 아니라면 작성자체를 안하면 되지요.  자 그러면 뷰에서는 어떻게 해야 할까요? 뷰에서는 해당 이벤트를 $emit 함수를 이용 하여 전달은 해줘야 한다.  2. 자 이제 아래코드를 보자.   아... 이건 좀 실망 스러운 형태이다. 대부분의 컴포넌트들에서 이벤트를 상위로보내는 행위는 자주 일어난다. 뭐 물론 내가 뷰에 익숙한 상태여서 그럴지도... 이벤트 하나를 보내기 위해서 위처럼 svelte 라이브러리에서 이벤트 발생시키기 위해서 createEventDispatcher가져와서 createEventDispatcher를 실행해서 이벤트 발생기를 생성하고, 해당 그 발생기에 이벤트를 상세하게 입력하는 것은 엄... 한 가지일을 위해서 세 가지 일을 하는것은 꽤나 불편하겠지....  위의 코드들을 vue스타일로 작성한 코드는 아래에 ...