beomy

아구.. jsh971229님 말씀 주신게 맞습니다.
dispatch('message', event.detail)로 넘겨주는게 맞습니다.
강의 예제가 잘못 작성되었네요.. 햇갈리게 해드려서 죄송합니다. ㅜㅜ
질문 주셔서 감사합니다.

컴포넌트 이벤트

안녕하세요. jsh971129님.
&nbsp;
CDN은 Contents Delivery Network의 약자입니다. 물리적으로 멀리 떨어져 있는 사용자에게 컨텐츠를 빠르게 제공할 수 있는 기술을 이야기합니다.
리엑트에서는 https://unpkg.com/react@17/umd/react.production.min.js, 뷰에서는 https://cdn.jsdelivr.net/npm/vue@2.6.0 로 런타임 동안에 가상돔을 비교하기 위해 사용되는 코드를 CDN을 통해 제공합니다.
* 런타임이란 코드가 동작하는 시점을 뜻합니다. 사용자 입장에서 보면, 사용자가 웹 페이지에서 서비스를 제공받는 동안을 런타임이라고 볼 수 있습니다.
뷰에서 CDN을 사용하는 방법은
<pre class="language-html"><code><!DOCTYPE html>
<html lang="en">
 <head>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
 <div id="app"></div>
 <script>
 new Vue({ ... });
 </script>
 </body>
</html>
</code></pre>
와 같이 사용할 수 있습니다.
하지만 스벨트는 빌드 타임에 반응형이 결정되는 방식을 사용하여 가상돔이 필요없는데, 가상돔이 필요없어서 런타임 동안에 가상돔을 비교하기 위해 사용되는 코드가 필요하지 않지 않습니다. 그래서 스벨트는 런타임에서 가상돔을 비교하기 위해 사용되는 코드를 CDN으로 제공하지 않습니다.
* 빌드타임은 프로젝트가 빌드되어 빌드된 JS 파일들을 생성하는 시점을 이야기합니다.
&nbsp;
질문에 답변이 되었길 바랍니다. 감사합니다.

CDN이 뭔가요?

안녕하세요 Gichul Roh님 :) 질문 주셔서 감사합니다.
Backend에서 /user 라우터을 삭제 했으나, Frontend에서 /user API를 호출하고 있어서, API를 찾을 수 없다는 404 Not Found 에러가 발생하고 있습니다.
이 후의 강의에서 /user API를 호출하는 부분을 삭제하지만, 지금 단계에서 Frontend에서 /user API를 호출하는 부분을 삭제해도 상관없습니다.

백엔드와 프론트엔드 로그인 구현 부분까지의 중간단계 에러

안녕하세요 원님 :)
<a href="https://www.inflearn.com/course/스벨트-실전-스도쿠실습" target="_blank" rel="noopener noreferrer">Svelte 실전 강의 - 스도쿠 만들기</a> 강의을 오픈하였습니다~!
기다려주셔서 감사합니다.

혹시 다음 강의는 언제쯤??

안녕하세요 원님 :)
다음 강의를 기다려주셔서 정말 감사합니다.
다음 강의는 지금 80~90프로 녹화가 완료되었습니다. 지금은 강의에서 설명한 기념의 이해를 돕기 위한 참고 영상 녹화를 준비하고 있습니다.
참고로 말씀드리면, 다음 강의는&nbsp; Express(+ MongoDB)와 Svelte를 사용하는 실전 강의입니다.
늦어도 11월 말, 12월 초에는 다음 강의를 오픈할 수 있을 것 같습니다.
감사합니다~~~!

안녕하세요. :)
이런 우연이 있을까 싶습니다! 백엔드는 Node.JS, 프론트엔드는 Svelte로 다음 강의를 촬영하고 있습니다.(강의는 다음달에 오픈 할 수 있을 것 같습니다.) 사용자 인증은 JWT를 사용합니다. 해서, 조금은 도움이 될 수 있을 법한 답변을 드릴 수 있을 것 같습니다.
JWT를 사용해 본 결과, JWT는 단순히 인증 방식이라 백엔드로 무엇을 사용하건, 프론트를 무엇을 사용하건 상관없이 어디든 사용이 가능합니다.
준비 중인 강의에서는 백엔드 Node.JS에서 jsonwebtoken이라는 npm 라이브러리를 사용해서 토큰을 생성하고 프론트에 전달합니다.
프론트에서는 백엔드에서 전달받은 토큰을 로컬스토리지에 저장해서 로그인을 유지 시켜줍니다. JWT 토큰이 만료되면 로컬스토리지에서 삭제해주고요. jwt-decode라는 npm 라이브러리를 사용해서 토큰을 디코딩에 만료시간과 기타 정보를 가져올 수 있습니다.
프론트에서 API를 요청할 때 HTTP 요청 해더에 토큰을 담아 API를 백엔드로 전달합니다. 백엔드에서는 jsonwebtoken 라이브러리의 verify를 통해 유효성 체크를 진행하고, 유효하지 않다면 에러를, 유효하다면 HTTP 요청에 응답합니다.

결론은,
1. 토큰의 생성, 유효성 체크는 백엔드에서 이루어진다. (jsonwebtoken 사용)
2. 프론트의 로컬스토리지에 토큰을 저장해서 로그인을 유지시켜준다.
3. 토큰 만료시 로컬스토리지에서 삭제한다. (jwt-decode로 만료 시간 확인)
4. 프론트에서 백엔드로 API를 요청할 때 토큰을 HTTP 요청 해더에 담아서 보낸다.

이렇게 정리할 수 있을 것 같습니다.

혹시 답변을 확인하시고 더 궁금한 사항이나, 이해가 안가는 부분은 추가 질문 주세요. :)

강좌 범위는 아니지만요...

안녕하세요 :)
<pre class="language-html"><code>{data || ''}</code></pre>
이런 방법은 어떨까요??

undefined 없애기

안녕하세요. :)
질문 주신 내용과 동일한 이슈가 <a href="https://github.com/sveltejs/svelte/issues/3290" target="_blank" rel="noopener noreferrer">https://github.com/sveltejs/svelte/issues/3290</a> 에 버그로 리포팅 되어 있었습니다. :(
수정된 것으로 이슈가 닫혀 있지만 재현되는 것으로 보아 해당 이슈가 완전히 해결되지 않은 것 같습니다.
문의 남겨 놓고, Svelte의 답변을 기다리는 중입니다. 답변이 오면 다시 답글을 드리도록 하겠습니다.

생명주기 중 afterUpdate가 동작하지 않는 이유를 모르겠습니다

질문 주셔서 갑사합니다. :)
이해하기 어려운거 있다면 언제든 질문 주세요~!

이벤트 수식어 중에서 passive 설명이 잘 이해가 되질 않습니다

강의 들어주셔서 감사합니다. :)

아래 코드와 같이 터치, 휠 이벤트는 preventDefault를 사용하면 스크롤을 막을 수 있습니다.
<pre class="language-html"><code><script>
	function handle (event) {
		event.preventDefault();
	}
</script>
<div on:wheel={handle} on:touchmove={handle}></div>
<style>
	div {
		height: 200vh;
	}
</style></code></pre>

브라우저에서는 터치 혹은 휠 이벤트가 발생할 때 마다 스크롤을 할지 말지 결정을 해야 합니다. 스크롤이 발생하면 많은 이벤트가 발생하게 되는데, 이벤트 마다 스크롤을 할지 말지 판단하게 된다면 브라우저는 느려질 수 있습니다.
이때 passive 속성을 사용해서 브라우저에게 preventDefault를 사용해서 스크롤을 막지 않겠다고 알려줍니다. 그러면 브라우저는 항상 스크롤을 하는 것으로 인식하고, 스크롤 할지 말지 결정하는데 낭비되는 자원을 절약해서 성능을 향상 시킬 수 있게 됩니다.

참고가 될 만한 링크입니다.
<a href="http://sculove.github.io/blog/2016/12/29/addEventListener-passive/" target="_blank" rel="noopener noreferrer">http://sculove.github.io/blog/2016/12/29/addEventListener-passive/</a>
<a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md" target="_blank" rel="noopener noreferrer">https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md</a>
<a href="https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener</a>

beomy

Posts