HEROPY

sjh971009 님 안녕하세요. 아무래도 버전 문제 때문인 듯합니다. 지금은 강의에서 설명하는 템플릿 대신 Vite.js를 사용하시는 걸 추천합니다. 다음과 같이 간단하게 프로젝트를 시작하실 수 있습니다.<pre><code class="language-bash">cd <프로젝트폴더>
npm create vite@latest .
 > Svelte 선택
 > TypeScript 혹은 JavaScript 선택
npm i
npm run dev</code></pre>

에러가 나서 질문올립니다.

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

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

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

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

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

안녕하세요

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

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

네 안녕하세요. 다음 링크에서 예제를 확인하실 수 있습니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/HeropCode/Svelte-Trello-app">https://github.com/HeropCode/Svelte-Trello-app</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/HeropCode/Svelte-Movie-app">https://github.com/HeropCode/Svelte-Movie-app</a>

강의 소스 코드

안녕하세요. 강의를 잘 봐주셔서 감사해요 :D말씀해주신 것처럼 간단한 예제이기 때문에 별도의 파일을 만들지 않았을 뿐이고요. 그리고 Svelte의 장점이라면, Store 기능을 내장하고 있기 때문에 컴포넌트 단위에서도 충분히 사용할 수 있다는 것을 보여드리는 용도였네요. 결국 2가지 모두 해당합니다.이후 강의에서는 역시 말씀처럼 별도로 Store를 관리하니 참고해주세용~

todo 예제에서 스토어를 사용하실때 따로 stores.js 를 사용하지 않고 바로 App.svelte에서 스토어 객체를 생성하신 이유가 있나요

네 수렬 님 안녕하세요😆 1. 어떤 번들러를 사용하든 빌드 명령으로 만들어지는 결과 구조는 같으니, 말씀하신 Nginx 부분도 문제 없이 동작할 것 같아요! 2. 프론트엔드 프레임워크와 데이터 통신 방법은 기본적으로 관련이 없기 때문에, 단지 주어진 환경과 기타 상황에 맞게 방법을 선택하시면 충분해요. 결국 스벨트와 잘 맞는 방식이 따로 있진 않습니다. 다른 프레임워크도 마찬가지입니다.

aws ec2 배포시 질문

네 jamesome 님 안녕하세요.아쉽게도 Vite 기반 강의는 아직 추가할 계획이 없네요.혹시 Sveltekit을 사용해보시는 것도 같이 고민해보시면 어떨까 해요.<a target="_blank" rel="noopener noreferrer nofollow" href="https://kit.svelte.dev/">https://kit.svelte.dev/</a>

vite 사용하는 예시 추가 계획은 없으실까요?

limewhale 님 안녕하세요. 제가 터미널에서 사용하는 자동 완성 도구는 zsh-autosuggestions 입니다. 링크 첨부하니 확인해보세용~ <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/zsh-users/zsh-autosuggestions">https://github.com/zsh-users/zsh-autosuggestions</a>

HEROPY

投稿