개발/Svelte 튜토리얼10 [Svelte 튜토리얼] Part 1 - Statements 튜토리얼 링크 이번 튜토리얼에서는 여러 구문의 예시를 보여주며 반응형 선언(reactive declaration)의 사용법을 알려줍니다. 첫 번째 예시입니다. Clicked {count} {count === 1 ? 'time' : 'times'} 반응성을 가지는 변수 count가 console.log 문에 있습니다. 반응형 선언은 한 줄로 이루어진 구문에 반응성을 가지는 변수가 있을 때도 변화를 감지합니다. 따라서 버튼을 눌러 count가 변경되면 이 구문을 통해 문자열을 출력합니다. 두 번째 예시입니다. Clicked {count} {count === 1 ? 'time' : 'times'} 반응성을 가지는 변수 count가 중괄호로 감싸져 있습니다. 반응형 선언은 중괄호 안에 반응성을 가지는 변수가 있.. 2022. 9. 29. [Svelte 튜토리얼] Part 1 - Declarations 튜토리얼 링크 이번 튜토리얼에서는 반응형 변수에 의존해 함께 업데이트가 되도록하는 반응형 선언(reactive declaration)에 대해서 알려줍니다. Svelte는 $: 변수가 포함된 구문의 형태로 반응형 선언을 지원합니다. 이 형태는 순수 Javascript label 문법으로, 새로운 변수를 선언하는 구문을 쓸 때 let을 사용하지 않는 것에 주의해야합니다. 튜토리얼에 주어진 코드는 다음과 같습니다. Clicked {count} {count === 1 ? 'time' : 'times'} 이번 튜토리얼의 목표는 다음과 같이 반응형으로 동작하는 문자열이 나타나도록 구현하는 것입니다. 이를 구현하기 위해서 다음과 같이 코드를 작성할 수도 있습니다. Clicked {count} {count === 1 .. 2022. 9. 23. [Svelte 튜토리얼] Part 1 - Assignments 튜토리얼 링크 이번 튜토리얼은 Svelte에서 할당의 역할에 대해서 알려줍니다. Svelte에서 컴포넌트의 Clicked {count} {count === 1 ? 'time' : 'times'} 변수 count의 반응성을 확인하기 위해 Svelte에서 클릭 이벤트를 처리하는 문법을 사용하면 다음과 같은 코드가 됩니다. Clicked {count} {count === 1 ? 'time' : 'times'} Svelte에서 Dom 이벤트를 처리하는 on:event 문법은 on:이벤트={이벤트 처리 함수}의 형태로 쓰입니다. 따라서 의 의미는 버튼을 클릭했을 때 increment 함수가 실행된다가 됩니다. 이번 튜토리얼의 목표는 버튼을 클릭했을 때 count의 값의 증가가 보이도록 하는 것입니다. 이를 위해.. 2022. 9. 16. [Svelte 튜토리얼] Part 1 - HTML tags 튜토리얼 링크 이번 튜토리얼에서는 HTML로 이루어진 문자열을 단순하게 텍스트로 추가하는 대신 HTML 요소로 생성해서 DOM에 추가하는 방법을 알려줍니다. 튜토리얼에 주어진 코드는 다음과 같습니다. {string} 변수 string에는 HTML!!!라는 HTML이 포함되어 있습니다. 이 문자열을 주어진 코드처럼 {string}으로 사용하면 HTML 요소가 단순한 텍스트로 나타나게 됩니다. 단순한 텍스트가 아닌 HTML 요소로써 DOM에 추가하는 방법으로 Svelte는 {@html expression} 형태의 문법을 제공합니다. 따라서 튜토리얼의 답은 다음과 같습니다. {@html string} 하지만 Svelte는 expression 자리에 들어가는 표현식을 DOM에 추가하기 전에 잘못된 형식을 점검하.. 2022. 9. 13. [Svelte 튜토리얼] Part 1 - Nested components 튜토리얼 링크 이번 튜토리얼에서는 Svelte에서의 컴포넌트 사용방법을 알려줍니다. .svelte 파일을 컴포넌트로 사용하려면 사용하려는 파일의 This is a paragraph. 불러온 Nested 컴포넌트를 사용하려면 의 형태로 원하는 위치에 선언하면 됩니다. 따라서 튜토리얼의 답은 다음과 같습니다. This is a paragraph. 기본적인 HTML 요소(div, input 등)는 모두 소문자이기 때문에 이와 구분하기 위해서 Svelte 컴포넌트는 CamelCase를 사용합니다. 이 튜토리얼의 Nested 컴포넌트 또한 CamelCase를 따르는 것을 확인할 수 있습니다. 2022. 9. 8. [Svelte 튜토리얼] Part 1 - Styling 튜토리얼 링크 이번 튜토리얼에서는 HTML에 CSS 스타일을 적용시키는 방법을 알려줍니다. Svelte에서 CSS 스타일은 위 코드의 태그 속에 요소는 현재 컴포넌트의 인스턴스에만 적용되어 다른 컴포넌트의 요소와는 독립적입니다. 2022. 9. 6. 이전 1 2 다음
