개발/Svelte 튜토리얼10 [Svelte 튜토리얼] Part 1 - Dynamic attributes 튜토리얼 링크 이번 튜토리얼에서는 Svelte에서 태그에 속성을 적용시키는 방법과 태그를 사용할 때 주의해야할 점을 알려줍니다. Your first component에서 알아봤듯이, HTML code에서 { script 블록에 존재하는 변수명 }을 쓰면 변수의 값으로 치환됩니다. 따라서 다음과 같이 코드를 작성해도 문제에서 요구하는 이미지가 나타납니다. 하지만 이렇게 마치면 Svelte는 다음과 같이 알려줍니다. A11y: element should have an alt attribute A11y는 태그에 alt 속성이 없어서 나오는 문구입니다. alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 지정하는데, 이 속성에 값을 주지 않았다고 해서 화면에 이미지가 보이지 않거나 프로그램.. 2022. 9. 5. [Svelte 튜토리얼] Part 1 - Your first component 튜토리얼 링크 이번 튜토리얼에서는 Svelte의 기본 구성 요소인 컴포넌트 작성 방법과 변수 사용 방법을 알려줍니다. Svelte의 기본 구성 Svelte는 컴포넌트 단위로 코드를 작성합니다. 컴포넌트는 애플리케이션을 구성하는 재사용 가능한 코드 블록이며, Svelte에서 컴포넌트를 사용하려면 .svelte 파일에 아래의 코드 예시처럼 Hello {name.toUpperCase()}! 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.. 2022. 9. 2. Svelte 튜토리얼 시작하기 Svelte 공식 사이트의 튜토리얼은 커리큘럼이 잘 짜여있고 직접 타이핑하며 결과를 바로 확인할 수 있습니다. 공식 사이트 튜토리얼의 모습은 다음과 같습니다. 하지만, 현재 리뉴얼 중인 Svelte 튜토리얼 주소가 있는데 디자인이 바뀌었고 기존 내용이 더 세분화되었으며 SvelteKit 내용이 추가되고 있습니다. 그래서 이 튜토리얼 사이트로 Svelte, 그리고 SvelteKit을 정리해보려고 합니다. 리뉴얼 중인 튜토리얼의 모습은 다음과 같습니다. 튜토리얼 활용 방법 튜토리얼을 활용하는 방법은 간단합니다. 오른쪽 상단 에디터에 코드를 작성하면 오른쪽 하단에 구현된 모습이 나타나는것을 이용해 왼쪽의 지문을 읽고 지문에서 알려준 방법으로 에디터에 써서 의도한 대로 잘 나타내면 됩니다. 에디터에 쓴 코드가 .. 2022. 8. 31. 이전 1 2 다음
