div에 on:click 이벤트 붙일 때 on:key와 관련된 이벤트를 같이 사용해야하나요?

웹 접근성 내용이 Svelte 문법 도구에 적용되면서 보여지는 내용 같습니다. 문법 도구를 만드는 사람들 중 누군가 추가하고, 문제가 되면 또 누군가 제거하기도 해서 버전마다 상황이 조금씩 다를 수 있는데요. 핵심은, DIV는 대표적인 비대화형(Non-interactive) 요소라 키보드 이동이나 포커스가 되지 않으니, 말씀하신 BUTTON 혹은 INPUT 처럼 대화형 요소를 사용하라는 의미입니다. 그런데 이게 웹 접근성 측면에선 중요한 부분인데, 현실적으로 적용하기 쉽지 않습니다. 그래서 꼭 대화형 요소를 사용하지 않아도 해결할 수 있는 부분은, 키보드 이동이나 포커스가 가능하도록 만드는 겁니다. 그래서 요소에 tabindex="0" role="button" 속성을 추가하시면 DIV를 그대로 사용하실 수 있을 겁니다.

cdn지원과 프론트엔드 프레임워크는 무슨 상관관계가 있나요?

안녕하세요 :D 최대한 이해하기 쉽게 정리해 볼게요. React나 Vue 프레임워크를 사용해 작성한 코드는 별도의 처리 없이 브라우저에서 바로 동작할 수 있습니다. 처음부터 그렇게 설계되어 만들어졌고, 그러니 기본적으로는 프레임워크를 CDN으로만 연결해도 전혀 문제 없이 잘 동작합니다. 하지만, Svelte 프레임워크를 사용해 작성한 코드는 브라우저에서 바로 동작할 수 없고 동작이 가능하도록 한 번 변환해 줘야 합니다. Svelte는 그 과정을 '컴파일'이라고 부르고, 그 변환된 결과 파일이 브라우저에서 동작하는 겁니다. 혹시, '변환을 브라우저에서 하면 되지 않느냐' 라고 생각하실 수 있는데요. Svelte는 브라우저에서 동작하는 결과를 이렇게 따로 만들어 제공하는 방식을 쓰기 때문에, React나 Vue보다 훨씬 간단한 문법을 제공하고 메모리도 적게 사용하니 훨씬 빨라질 수 있습니다. (개발하는 코드가 따로 있고, 동작하는 코드가 따로 있는 거죠) 대신 CDN을 사용할 수 없다는 불편함도 있지만, 사실은 이게 더 발전된 개발 방식이라고 볼 수 있습니다. 참고로 React나 Vue도 SFC같이 Svelte와 유사한 컴파일 방식의 개발을 '지원'하고 있습니다. (Svelte가 먼저 시작한 방식은 당연히 아니고, '컴파일 방식의 장점을 최대한 활용해 만들어진 프레임워크' 라고 이해하시면 쉽습니다) 여러 프레임워크가 기본 원리는 비슷한데, 이렇게 서로 조금씩 다른 장단점을 가지고 있습니다.

안녕하세요

Sveltekit 도서가.. 있을지는 모르겠네요.. 안 그래도 이번에 Sveltekit 으로 개인 프로젝트를 준비하고 있습니다. 확실히 정보가 많이 없긴 한데, 조금씩 써보니 잘 만들었다고 생각은 들어요. 추후에 마무리가 되면 모은 정보로 강의를 만들까 생각하고는 있네요.

snowtemplate 를 설치하는중에 에러가 발생합니다.

윤성묵 님 안녕하세요.😊 말씀하신 것처럼 강의 촬영 시간이 많이 흘러서 패키지 설치를 최신으로 진행했을 때 문제가 되기 쉽네요. 우선 지금에서 가장 추천할 수 있는 방법은, 완성된 예제의 깃헙 저장소( https://github.com/HeropCode/Svelte-Movie-app )의 package.json 파일을 그대로 사용해서 npm install 을 하는 겁니다. 그러면 최소한의 환경을 일치시킬 수 있습니다. 그 외엔 Node.js나 NPM 버전도 일치해야 할 수 있는데, 아쉽게도 당시의 정확한 버전은 제가 따로 명시를 하지 않았네요.

강의 소스 코드

네 안녕하세요. 다음 링크에서 예제를 확인하실 수 있습니다. https://github.com/HeropCode/Svelte-Trello-app https://github.com/HeropCode/Svelte-Movie-app