문서의 임의 삭제는 제재 대상으로, 문서를 삭제하려면 삭제 토론을 진행해야 합니다. 문서 보기문서 삭제토론 Svelte (문단 편집) == 특징 == * '''실제 DOM을 사용, 컴파일러''' 가상 DOM을 사용하는 대표적인 웹 프레임워크인 [[React(라이브러리)|React]]는 각 구성 요소를 만들면 가상 DOM 객체가 만들어지고, 실제 DOM과 가상 DOM을 비교하여 변경 사항을 실제 DOM으로 업데이트하는 방식으로 작동한다. 반면, Svelte는 이 과정을 생략하고 바로 실제 DOM을 반영한다. Svelte는 앱을 실행 시점(Run time)에서 해석하지 않고 빌드 시점(Build time)에서 Vanilla JavaScript Bundle로 컴파일하여 속도가 빠르고 따로 라이브러리를 배포할 필요가 없어 간편하다. document.querySelector 등의 함수를 사용하여 실제 DOM 접근 및 제어가 더욱 간편한 장점이 있다. 가상 DOM을 사용하는 리액트, 뷰에서는 성능 저하 등의 이유로 실제 DOM을 제어하는 걸 되도록 피하기 위해서 Vue에서는 ref를 사용하고, React에서는 refs, useRef 등의 편법을 사용해야 한다. * '''비교적 간소화된 소스코드, 상대적으로 작은 용량''' React나 [[Vue.js]]와 비교했을 때 훨씬 적은 양의 코드로 동일한 결과물을 만들어낼 수 있으며, 가독성이 좋은 점도 장점이다. 웹사이트가 거대해질수록 그로 인한 소스코드의 비대화는 수반될 수 밖에 없는데, 상대적으로 간소화된 소스 코드를 가지고 있음으로써 유지보수와 기능 추가 개발에서 효율성이 높아지는 것이다. * [[https://learn.svelte.dev/tutorial/actions|{{{use:}}}]] 특성 등을 통한 기존 라이브러리 친화력 React, Vue의 경우, 기존 JS 라이브러리를 해당 환경에 맞게 컴포넌트를 재구성하여 만들어야 하는 대신, 생태계가 많이 발달하여 어렵지 않게 각 환경의 대체제를 구할 수 있으나, Svelte의 경우, 좁은 생태계에도 불구하고 사용하려고 하는 이유 중 가장 큰 비중을 차지하는 부분이 바로 기존 JS 라이브러리와의 친화력이다. [[SolidJS]]도 이 {{{use:}}} 특성을 사용하여 좁은 생태계를 타파하는 방법을 사용하고 있으며, {{{use:}}} 특성을 사용하는 함수에 초기화부터 정리(cleanup)까지 모두 구현할 수 있고, 액션 함수만 다르다면 복수 구현이 가능하여 특정 태그를 기준으로 여러 라이브러리와 생명주기까지 한 번에 해결할 수 있다. 이는 실제 DOM을 주력으로 사용함으로써 얻을 수 있는 이점이다.저장 버튼을 클릭하면 당신이 기여한 내용을 CC-BY-NC-SA 2.0 KR으로 배포하고,기여한 문서에 대한 하이퍼링크나 URL을 이용하여 저작자 표시를 하는 것으로 충분하다는 데 동의하는 것입니다.이 동의는 철회할 수 없습니다.캡챠저장미리보기