날씬한 첫인상.

지난 몇 달 동안 날씬한 것에 대해 많은 이야기를 들은 후에 나는 마침내 한번 해 보기로 결정했다.Svelte와 처음으로 합작한 것이기 때문에 저는 최초의 생각을 발표하고 싶습니다. Svelte가 무엇을 제공할 수 있는지 궁금한 모든 사람들에게 도움을 주고 싶습니다.
이것은 결코 날씬함에 관한 강좌가 아니다. 이것은 단지 내가 처음으로 날씬한 반응을 본 것이다.아직 없으면be sure to check it out이것은 날씬함을 사용하기 시작하는 간단한 방법이다.대부분의 코드 예는 Svelte 튜토리얼에서 직접 추출됩니다.

날씬함이란?
자신의 말로Svelte는 사용자 인터페이스를 구축하는 새로운 방법이다.내 말로 Svelte는 웹 사이트와 웹 응용 프로그램을 구축하는 데 사용되는 구성 요소를 기반으로 하는 프레임워크이다.
개념적으로 말하자면 Svelte는 React와 Vue와 같은 개념이 많은 것 같지만 이것은 표면적인 외관일 뿐이다.Svelte는 새로운 구성 요소 사고방식과 독특한 기능을 도입하여 고품질의 구성 요소를 만들 수 있도록 합니다.

절대 첫인상
Svelte의 놀이공원에서 약 30분 정도 걸린 후에 나는 이 틀의 인체공학, 건축 부품에 어떻게 접근하는지, 그리고 전체적인 이념을 매우 좋아한다고 말할 수 있다.나도 일등 공민을 좋아한다.예를 들어 <img> 속성이 없는 alt 을 만들면 Svelte 컴파일러가 뚜렷하고 조작 가능한 경고를 줄 것입니다.이것은 응용 프로그램의 접근성을 크게 높일 수 있는 좋은 특성이다.
Svelte 컴파일러가 출력한 코드는 의외로 깨끗하다.컴파일러와 관련이 있을 때, 일반적으로 출력 코드가 완전히 인간이 읽을 수 있는 것이 아니라는 것을 의미한다.날씬한 건 이게 아니야.대부분의 출력 코드는 사람이 작성한 것처럼 보이는데, 이것은 실행할 때 코드가 매우 디버깅할 수 있어야 한다는 것을 의미한다.

건축하다
나는 Svelte의 체계 구조를 깊이 연구하지 않았지만, 비교적 높은 차원에서 Svelte 구성 요소는 HTML, CSS, 자바스크립트로 작성되었다.그리고 이 템플릿들은 브라우저에서 실행할 수 있는 코드로 컴파일됩니다.날씬한 템플릿은 정말, 정말 완전히 성명하고 싶어요.그들은 개발자로 하여금 렌더링과 렌더링 주기를 완전히 잊게 하려고 한다.이것은 개발자에게 있어서 정말 좋은 소식이다. 왜냐하면 우리는 구성 요소의 세부 사항을 보여주는 것이 아니라 업무 문제에 관심을 가질 수 있기 때문이다.필요한 데이터를 간단히 설명하고 Svelte에 작업을 위임할 수 있습니다.

날씬한 구성 요소 작성
가벼운 구성 요소 파일의 동작은 일반적인 HTML 문서와 같습니다.모든 HTML 문서와 마찬가지로 스타일과 상호작용을 추가하려면 <style> 및 <script> 태그를 사용합니다.나는 간단한 HTML, CSS, 자바스크립트 모델이 Svelte의 가장 강력한 기능 중 하나라고 생각한다.익숙한 HTML, CSS, 자바스크립트를 사용하여 신축성 있고 고성능 프로그램을 작성하는 것이 눈길을 끈다.사실, 만약 응용 프로그램이 구성 요소 수준의 css나javascript를 필요로 하지 않는다면, 날씬한 응용 프로그램은 HTML일 수 있습니다.잘 됐다!

Javascript 변수 선언
구성 요소에 Javascript를 추가하는 것은 템플릿 파일에 <script> 표시를 추가하는 것처럼 간단합니다.<script> 태그 내의 모든 내용은 구성 요소를 대상으로 하기 때문에 구성 요소 밖의 이름이나 상태 충돌을 걱정할 필요가 없습니다.
템플릿 파일에 선언된 변수는 HTML에서 괄호 표현으로 참조할 수 있습니다.

<script>
  let buttonText = 'text';
</script>

<button title={buttonText}>{buttonText}</button>

날씬한 구성 요소 중의 <script> 라벨은 표준<script> 라벨의 초집합이다.ternary, 함수 호출, 심지어 <script> 문장을 포함한 표준 자바스크립트를 import 표시에 사용할 수 있습니다.표준 자바스크립트를 제외하고 Svelte는 구성 요소의 성명과 문장을 강화하는 데 사용할 수 있는 특정한 영역의 개념을 도입했다.
나는 <script>의 용법이 매우 직관적이라고 생각한다. 왜냐하면 이것은 이미 내가 익숙한 개념이기 때문이다.그것 또한 템플릿 파일의 자바스크립트에 대한 나의 전체적인 견해에 부합된다.이런 방법은 Svelte가 반응성과 구성 요소 상태를 어떻게 처리하는지에도 매우 흥미롭다.

이벤트 처리
나는 스웨트가 사건을 처리하는 방법도 매우 직관적이라고 생각한다.이벤트 탐지기를 추가하는 것은 상당히 간단하다.<script> 태그에 이벤트 프로세서를 만들고 접두사 on: 의 속성을 사용하여 HTML에서 이 함수를 인용할 수 있습니다.예를 들어, 다음 코드에서 handleClick는 버튼을 클릭할 때마다 실행됩니다.

<script>
  let buttonText = 'text';

  function handleClick() {
      // handle click event
  }
</script>

<button on:click={handleClick}>{buttonText}</button>

반응성
반응성은 본질적으로 당신의 구성 요소와 응용 프로그램이 시간의 변화에 어떻게 응답하는지입니다.Svelte는 컴파일하는 동안 실행할 때가 아니라 반응성 귀속을 처리합니다.Svelte는 HTML에서 Javascript 변수의 참조 위치를 알고 있기 때문에 올바른 귀속을 미리 생성할 수 있습니다.이것은 실행할 때 CPU를 낭비해서 무엇이 반응적이고 무엇이 아닌지 이해할 필요가 없다는 것을 의미합니다. 어떤 코드를 실행하기 전에 Svelte는 이 점을 잘 처리할 것입니다.
스웨트는 가능한 한 투명하게 반응성을 높이려고 했다.값을 수동적으로 만드는 특별한 문법이 없다.네가 해야 할 일은 HTML의 값을 인용하는 것이다.이것은 날씬함을 증가시키는 반응성을 상당히 간단하게 만들었다.이것은 우리가 간단한 변수 성명에 부작용을 추가하고 있다는 것을 확실히 의미한다.내가 너무 많이 생각했는지 모르겠지만, 여기서 발총을 쓰는 것은 상상할 수 없는 것이 아니다.
Svelte의 컴파일러가 반응성 귀속을 생성하는 과정을 처리하기 때문에 변수의 반응성을 간단하게 합니다.HTML에서 이 값을 참조하기만 하면 됩니다.

<script>
  let buttonCount = 0;

  function handleClick() {
      buttonCount += 1;
  }
</script>

<button on:click={handleClick}>{buttonCount}</button>

단추를 눌렀을 때마다 우리의 buttonCount 변수는 점차적으로 증가하고 새로운 값을 나타낸다.표시할 값buttonCount만 설명하면 Svelte에서 코드를 생성하여 귀속을 처리합니다.Svelte는 HTML에 값을 연결하는 것을 쉽게 하지만, 반응 모델도 자바스크립트 값으로 확장됩니다.

성명
성명은 진정으로 날씬한 제품만이 제공할 수 있다는 느낌을 주는 첫 번째 기능이다.나는 성명이 날씬하고 가장 재미있는 특징이라고 생각한다.선언을 사용하면 HTML에 반영할 수 있는 조합 가능한 데이터 흐름을 만들 수 있습니다.<script> 표시에 새 문법이 $: NAME = VALUE 도입된 성명을 만들 수 있습니다.$: NAME 반응성 귀속을 만들고 이 귀속감청VALUE의 변화를 감청합니다.매번 VALUE 변경될 때마다 NAME 업데이트됩니다.HTML의 참조NAME가 예상대로 업데이트됩니다.
성명을 작성하는 것은 + 연산자를 사용하는 것처럼 간단하다.$: NAME = VALUE + OTHER는 NAME 또는 VALUE에 변화가 발생할 때 업데이트될 것이다.
나는 이 특성을 좋아한다. 왜냐하면 이것은 당신이 성명 방식으로 진정으로 복잡한 데이터 흐름을 만들 수 있기 때문에 너무 많은 노력을 기울일 필요가 없기 때문이다.새 문법을 제외하고, 창설 성명은 창설 일반 변수와 거의 같다.정말 예뻐요!

성명
Svelts 문은 선언과 유사하지만 변수가 아닌 전체 Javascript 문의 반응성을 증가시킵니다.예를 들어, 이것은 블록의 값이 변할 때마다if조건을 다시 계산할 수 있다는 것을 의미한다.
이것은 내가 절대로 좋아하는 또 다른 기능이다.실제로, 이것은 성명 방식으로 반응성 루틴을 만들고, 이 루틴을 파이프를 통해 다른 성명이나 문장으로 전송할 수 있도록 합니다.정말 좋은 물건이야!

결론
나는 분명히 미래에 더 많은 날씬함을 사용하려고 탐색할 것이다.나는 직관적인 구성 요소 모델에 혁신적인 성명 + 성명 기능이 미래의 일부 프로젝트에 믿을 만한 이유를 제공했다고 생각한다.날씬함에 대해 궁금하면 to their website로 가서 날씬함이 어떻게 일을 하는지 알아보세요.
즐거운 코딩!🗿

Enjoyed this article? Head on over to Easy Web Dev and SUBSCRIBE to get access to in-depth web development tutorials and walk-throughs.