티스토리

아울로그

검색하기

블로그 홈

아울로그

owlog.tistory.com/m

아우르르 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Svelte 튜토리얼] Part 1 - Statements 튜토리얼 링크 이번 튜토리얼에서는 여러 구문의 예시를 보여주며 반응형 선언(reactive declaration)의 사용법을 알려줍니다. 첫 번째 예시입니다. Clicked {count} {count === 1 ? 'time' : 'times'} 반응성을 가지는 변수 count가 console.log 문에 있습니다. 반응형 선언은 한 줄로 이루어진 구문에 반응성을 가지는 변수가 있을 때도 변화를 감지합니다. 따라서 버튼을 눌러 count가 변경되면 이 구문을 통해 문자열을 출력합니다. 두 번째 예시입니다. Clicked {count} {count === 1 ? 'time' : 'times'} 반응성을 가지는 변수 count가 중괄호로 감싸져 있습니다. 반응형 선언은 중괄호 안에 반응성을 가지는 변수가 있.. 공감수 1 댓글수 0 2022. 9. 29.
[Svelte 튜토리얼] Part 1 - Declarations 튜토리얼 링크 이번 튜토리얼에서는 반응형 변수에 의존해 함께 업데이트가 되도록하는 반응형 선언(reactive declaration)에 대해서 알려줍니다. Svelte는 $: 변수가 포함된 구문의 형태로 반응형 선언을 지원합니다. 이 형태는 순수 Javascript label 문법으로, 새로운 변수를 선언하는 구문을 쓸 때 let을 사용하지 않는 것에 주의해야합니다. 튜토리얼에 주어진 코드는 다음과 같습니다. Clicked {count} {count === 1 ? 'time' : 'times'} 이번 튜토리얼의 목표는 다음과 같이 반응형으로 동작하는 문자열이 나타나도록 구현하는 것입니다. 이를 구현하기 위해서 다음과 같이 코드를 작성할 수도 있습니다. Clicked {count} {count === 1 .. 공감수 4 댓글수 2 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의 값의 증가가 보이도록 하는 것입니다. 이를 위해.. 공감수 1 댓글수 0 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에 추가하기 전에 잘못된 형식을 점검하.. 공감수 1 댓글수 0 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를 따르는 것을 확인할 수 있습니다. 공감수 1 댓글수 0 2022. 9. 8.
[Svelte 튜토리얼] Part 1 - Styling 튜토리얼 링크 이번 튜토리얼에서는 HTML에 CSS 스타일을 적용시키는 방법을 알려줍니다. Svelte에서 CSS 스타일은 위 코드의 태그 속에 요소는 현재 컴포넌트의 인스턴스에만 적용되어 다른 컴포넌트의 요소와는 독립적입니다. 공감수 1 댓글수 0 2022. 9. 6.
[Svelte 튜토리얼] Part 1 - Dynamic attributes 튜토리얼 링크 이번 튜토리얼에서는 Svelte에서 태그에 속성을 적용시키는 방법과 태그를 사용할 때 주의해야할 점을 알려줍니다. Your first component에서 알아봤듯이, HTML code에서 { script 블록에 존재하는 변수명 }을 쓰면 변수의 값으로 치환됩니다. 따라서 다음과 같이 코드를 작성해도 문제에서 요구하는 이미지가 나타납니다. 하지만 이렇게 마치면 Svelte는 다음과 같이 알려줍니다. A11y: element should have an alt attribute A11y는 태그에 alt 속성이 없어서 나오는 문구입니다. alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 지정하는데, 이 속성에 값을 주지 않았다고 해서 화면에 이미지가 보이지 않거나 프로그램.. 공감수 2 댓글수 0 2022. 9. 5.
[Svelte 튜토리얼] Part 1 - Your first component 튜토리얼 링크 이번 튜토리얼에서는 Svelte의 기본 구성 요소인 컴포넌트 작성 방법과 변수 사용 방법을 알려줍니다. Svelte의 기본 구성 Svelte는 컴포넌트 단위로 코드를 작성합니다. 컴포넌트는 애플리케이션을 구성하는 재사용 가능한 코드 블록이며, Svelte에서 컴포넌트를 사용하려면 .svelte 파일에 아래의 코드 예시처럼 Hello {name.toUpperCase()}! 공감수 2 댓글수 0 2022. 9. 3.
[Svelte 튜토리얼] Part 1 - Welcome to Svelte 튜토리얼 링크 이번 튜토리얼에서는 Svelte에 대해서 소개합니다. Svelte? React, Vue.js, Angular는 대표적인 프론트엔드 프레임워크입니다. Svelte는 이러한 프레임워크들과 같은 종류의 프론트엔드 프레임워크입니다. Svelte의 특징 Svelte 공식문서는 Svelte를 세 문장으로 표현하고 있습니다. 1. Write less code React, Vue.js, Svelte 세 가지 프레임워크를 이용한 다음과 같은 컴포넌트의 구현 코드입니다. React로 작성된 코드 더보기 import React, { useState } from 'react'; export default () => { const [a, setA] = useState(1); const [b, setB] = use.. 공감수 2 댓글수 0 2022. 9. 2.
Svelte 튜토리얼 시작하기 Svelte 공식 사이트의 튜토리얼은 커리큘럼이 잘 짜여있고 직접 타이핑하며 결과를 바로 확인할 수 있습니다. 공식 사이트 튜토리얼의 모습은 다음과 같습니다. 하지만, 현재 리뉴얼 중인 Svelte 튜토리얼 주소가 있는데 디자인이 바뀌었고 기존 내용이 더 세분화되었으며 SvelteKit 내용이 추가되고 있습니다. 그래서 이 튜토리얼 사이트로 Svelte, 그리고 SvelteKit을 정리해보려고 합니다. 리뉴얼 중인 튜토리얼의 모습은 다음과 같습니다. 튜토리얼 활용 방법 튜토리얼을 활용하는 방법은 간단합니다. 오른쪽 상단 에디터에 코드를 작성하면 오른쪽 하단에 구현된 모습이 나타나는것을 이용해 왼쪽의 지문을 읽고 지문에서 알려준 방법으로 에디터에 써서 의도한 대로 잘 나타내면 됩니다. 에디터에 쓴 코드가 .. 공감수 3 댓글수 0 2022. 8. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.