DEV
-
Svelte 강의 (2) - Dynamic attributesDEV/SVELTE 2023. 11. 15. 22:21
Svelte에서 요소의 속성을 제어하는 방법이다. 동적으로. 전에 중괄호를 사용하여 텍스트를 제어 했는데 이를 사용해 요소 속성을 제어 할 수 있다는 것인데 코드를 보면 src라는 변수에 image.gif 파일 경로를 넣었고 이를 이미지로 띄우려면 밑에 부분을 로 변경하면 그림이 웹으로 들어간다. src는 source의 줄임말로 html에서는 보통 파일의 소스 혹은 원본의 경로를 지정하는데 사용한다. 개발 공부를 할때 src는 src구나 하고 외우지만 말고 무슨 의미인지 알아보는 것도 도움이 될것이다. 근데 위에와 같이 쓰기만 하면 A11y : element should have an alt attribute 경고가 나오는데 이는 웹 어플리케이션을 개발할때 접근성을 고려해야 한다는 경고이다. 사실 무시해..
-
Svelte 강의 (1) - IntroductionDEV/SVELTE 2023. 11. 15. 22:08
스벨트 강의라고 제목을 지었지만 사실 모두 공식홈페이지에 있는 내용이다. 그 내용을 영어로 보기 힘들어 하는 사람을 위해 & 내가 공부하기 위해서 정리해서 올린다. Svelte가 MIT 라이선스 하에 릴리즈 되었지만 저작권에 문제가 있으면 즉시 삭제하는 걸로.. 우선 나는 웹에 대해 많은 지식과 경험을 가지고 있는 편은 아니다. 본래 임베디드로 시작해서 응용프로그램, F/W 개발자로 경력을 쌓았으면서 대개 linux와 MCU와 같은 것들을 C언어로 개발하였으며 객체지향 언어인 C#과 JAVA로 부수적인 것들을 개발 했다. GUI 프로그램은 QT를 잠깐 다뤘으며, Windows gui는 winform과 wpf를 telerik과 devexpress를 이용하여 개발하였고 웹은 blazor로 개발 해보았다. j..
-
Svelte - 컴포넌트간 변수 상태 공유DEV/SVELTE 2023. 11. 15. 21:32
Svelte 공식문서의 Part 1 - Stores - Writable stores 부분이다. 스벨트에서 store를 사용하여 여러 컴포넌트 간 변수 상태를 공유하는 방법에 관한 내용인데 핵심은 변수를 subscribe 하여 값의 변경을 감지 하는 것이다. // stores.js import { writable } from 'svelte/store'; // 초기 값은 0 export const count = writable(0); stores.js 부분으로 writable store로 초기값은 0으로 설정 하고 // App.svelte The count is {count_value} App.svelte에서는 count.subscribe로 값 변경을 감지 한다. // Incrementer.svelte + ..
-
Svelte Event forwardingDEV/SVELTE 2023. 11. 15. 21:10
스벨트 공식홈페이지 Learning중 Part 1 - Eventes - Event forwarding 내용이다 Svelte에서 컴포넌트가 중첩되면서 이벤트가 DOM에서처럼 자동으로 상위 컴포넌트로 버블링 되지 않을 때 이벤트를 처리하는 방법이다. 예제에서는 세가지 컴포넌트가 포함되어 있는데 App.svelte, Outer.svelte, Inner.svelte이다 // App.svelte // Inner.svelte Click to say hello //Outer.svelte 위의 프로그램을 실행하기 위해서는 Outer.svelte에 createEventDispatcher 함수를 사용 하는 것인데 svelte 모듈에서 가져 오고 있고 이벤트 디스패처를 생성하는데 사용한다. 이벤트 디스패처는 자식 컴포넌트에..